引言：
CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML元素，样式通常存储在样式表中，把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。
CSS中Id和Class选择器
（1）Id选择器
Id选择器以#来定义
#para1 { text-align:center; color:red; }
（2）class选择器
类选择器以一个“.”号来定义
.center {text-align:center;}
CSS优先级
样式表允许以多种方式规定样式信息，样式可以规定在单个HTML元素中，在HTML页的头元素中，或在一个外部CSS文件中，甚至可以在同一个HTML文档引用多个外部样式表。优先级如下：
内联样式>内部样式>外部样式>浏览器样式
CSS背景设置
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
body {background-image:url('bgdesert.jpg');}
CSS文本格式
（1）文本颜色
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
（2）文本对齐方式
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
（3）文本修饰
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
（4）文本缩进
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
p {text-indent:50px;}
CSS字型
p{font-family:"Times New Roman";
font-style:normal; font-size:40px;}
CSS链接
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
CSS列表
列表项标记可以是使用基础的方块圆点等，或是自定义的图像
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
ul { list-style-image: url('sqpurple.gif'); }
CSS表格
（1）表格边框
table
{
border-collapse:collapse; 加上该属性把双边框折叠成单一的边框
}
table,th, td
{
border: 1px solid black;
}
（2）表格高度和宽度
table
{
width:100%;
}
th
{
height:50px;
}
（3）表格文字对齐
td
{
height:50px;
text-align:right;
vertical-align:bottom;
}
（4）表格填充
td
{
padding:15px;
}
（5）表格颜色
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
CSS盒子模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;
Border(边框) - 围绕在内边距和内容外的边框。
border-style:solid; border-width:5px;
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
CSS显示与隐藏
visibility:hidden; 隐藏元素，但是会影响布局
display:none; 隐藏元素且不会占用任何空间
display:inline;
display:block;
CSS定位
position:fixed;元素位置是固定的，即使窗口滚动，它也不会变动
position:relative;元素位置相对于其正常位置进行变动
position:absolute;元素位置相对于其最近的已定位的父元素，父元素没有定位则位置相对于整个html
CSS导航条
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li
{
float: left;
}
li a
{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover
{
background-color: #111;
}
CSS下拉菜单
.dropdown
{
position: relative;
display: inline-block;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content
{
display: block;
}
CSS提示框
/* Tooltip 容器*/
.tooltip
{ position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 悬停元素上显示点线*/
}
/* Tooltip 文本*/
.tooltip .tooltiptext
{ visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* 定位*/
position: absolute;
z-index: 1; }
/* 鼠标移动上去后显示提示框*/
.tooltip:hover .tooltiptext
{ visibility: visible; }
CSS图片透明度
opacity:0-1;
原创文章转载请标明出处
更多文章请查看
[http://www.canfeng.xyz](http://www.canfeng.xyz)
网友评论