CSS层叠样式有哪些

这篇文章主要讲解了“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层叠样式有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！