这篇文章主要讲解了“CSS层叠样式有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS层叠样式有哪些”吧！
CSS Cascading Style Sheet 层叠样式表
设置html页面的样式
html负责显示 css 负责样式 显示和样式分离
编写css的位置：
1 标签内部
<div style="属性:值;属性:值">
2 页面中 <style>
选择器{
属性:值;
属性:值;
}
</style>
3 外部css文件(.css) 在html中通过 <link />导入css文件 ------最常用
选择器{
属性:值;
属性:值;
}
选择器： 作用？ 用来选择到页面上标签
css的选择器种类有很多
最常用的三种：
1 标签选择器 标签名{} div{} 选择到页面上的所有div标签 p{}
2 id选择器 同一个页面中所有标签id属性的值 都不要相同
#标签id属性值{
}
3 class选择器(类选择器) 先定义 再引用
.aaa{} <div class="aaa">AAA</div>
css中常用的属性：
color 颜色
font-size 字体大小
font-family 字体
font-weight 字体粗细
font-style 字体样式 italic(斜体) <i></i>
font:粗细 样式 大小 字体
line-height （行高）
text-align （对齐）
letter-spacing （字符间距）
text-decoration （文本修饰 ）
cursor:pointer 手型图标 (当然可以指定其他形状图标)
width 宽度
height 高度
background-color:#FF0;
background-image:url(flower4.jpg);
background-repeat:no-repeat;
background-position:300px 300px
background:#3FF url(flower4.jpg) no-repeat 400px 400px
关于列表的css
list-style: decimal/lower-latin/ lower-roman/lower-greek
circle/square/disc
none
浮动布局: 打破 html中块级标签独占一行的特征
float:left/right
---------------------------------------------------------------------------------------
盒模型：
边框 每个html标签都有边框 border
外边距 margin
设置某个标签的margin-left:100px
距离这个标签的左边框100px内不能有其他标签
margin-left
margin-right
margin-top
margin-bottom
margin: 1个值 上下左右4个方向
margin： 2个值 上下 左右
margin： 3个值 上 左右 下
margin: 4个值 上 右 下 左
margin:100px auto; 上下 100 左右居中
内边距 padding
设置标签的内边距 padding-left:100px
调整的是这个标签中包含的元素具体它左侧边框的距离 (不是调整为设置的值，而是在原来的基础上加上设置的值)
超链接样式的四种状态
未访问状态（a:link ）
已访问状态（a:visited ）
鼠标移上状态（a:hover ）
激活选定状态（a:active ）
图片的css：
img{filter:gray} 只有ie有效
图片旋转： transform:rotate(60deg) firefox
关于隐藏和显示的css
display:none 隐藏
:inline 不会独占一行
:block 独占一行
CSS中的选择器：
1 标签选择器
2 ID选择器
3 class选择器
4 * 通用选择器 选择到的是页面上的所有标签
5 E F 后代选择器 选择到的是F标签 F标签是E 标签的后代
6 E>F 父子关系选择器 选择到的是F标签 F标签是E标签的子标签
7 E+F 直接后兄弟选择器 选择的是F F要是E的兄弟
8 E~F 一般后兄弟
9 E[foo] 选择到有 foo属性的E标签
10 E[foo="xxx"] 选择到 foo属性值是xxx的E标签
11 E[foo^="xxx"] 选择到 foo属性值是以xxx开头的E标签
12 E[foo$="xxx"] 选择到 foo属性值是以xxx结尾的E标签
13 E,F,G 选择到页面上所有 E 和 F 和 G标签
14 伪类选择器：
E:first-child
E:link
E:visited
E:active
E:hover
E:focus
感谢各位的阅读，以上就是“CSS层叠样式有哪些”的内容了，经过本文的学习后，相信大家对CSS层叠样式有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
