CSS学习重点总结（一）

来源：互联网发布：seo点击软件编辑：程序博客网时间：2024/05/19 18:46

前序介绍

CSS三大特性—— 继承、优先级和层叠。

继承：即子类元素继承父类的样式;

优先级：是指不同类别样式的权重比较;

层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。

a字体
斜体（Italic）等宽字体（Constant width）等宽粗体（constant width bold）等宽斜体（constant width italic）

1.css中块元素与行内元素

行内元素有：a b span img input select strong（强调的语气）?

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p?

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

块元素继承父元素的属性，block的默认属性值是inline

块级元素生成一个元素框，默认的填充其父元素的内容区，旁边不能有其他元素。（他在元素框之前和之后生产了“分隔符”）

2.层叠样式使页面看起来更专业。

层叠：即css中的规定的冲突规则。

3.替换元素和非替换元素，还有块级元素和非块级元素。

替换元素有:img input,等
非替换元素有：span

4.css样式的讲解

<link rel="stylesheet"type="text/css" href="head.css"title="Default layout" >
其中title的属性值有：方便确定首选样式
<style type=text/css>@import (head.css) </style>
<style type=text/css>@import (http://example.org/library/head.css) </style>//绝对路径
相对路径和绝对路径（相对路径是相对引用路径/绝对路径是指硬盘或者网络上的为位置）

5.选择器类型

1.标签选择器(如：body,div,p,ul,li)

　　2.类选择器(如：class="head",class="head_logo")

　　3.ID选择器(如：id="name",id="name_txt")

　　4.全局选择器(如：*号)

　　5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)

　　6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)h1 strong{color：gred}）

　　7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

　　8.继承选择器(如：div p,注意两选择器用空格键分开)

　　9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)

　　10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)

　　11.子选择器 (如：div>p ,带大于号>)子选择器（只匹配树中直接相连的元素。用法： h1>strong <h1>This is <strong> very <strong> imporant <h1> 正确 <h1> this is
<em>reallly <strong>very</strong></em> important</h1> 不正确）

　　12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)

6.选择器的优先级

a.不同级别
1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2.作为style属性写在元素内的样式
3.id选择器
4.类选择器
5.标签选择器
6.通配符选择器
7.浏览器自定义或继承

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
同一级别

同一级别中后写的会覆盖先写的样式

上面的级别还是很容易看懂的，但是有时候有些规则是多个级别的组合，像这样

<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div.test{
background-COLOR:#a00;
width:100px;
height: 100px;
}
.test.test2{
background-COLOR:#0e0;
width:100px;
height: 100px;
}
</style>
</head>
<body>

<div class="test test2"></div>

</body>
</html>

到底div是应用那条规则呢，有个简单的计算方法（经园友提示，权值实际并不是按十进制，用数字表示只是说明思想，一万个class也不如一个id权值高）
•内联样式表的权值为 1000
•ID 选择器的权值为 100
•Class 类选择器的权值为 10

•HTML 标签选择器的权值为 1
我们可以把选择器中规则对应做加法，比较权值，如果权值相同那就后面的覆盖前面的了，div.class的权值是1+10=11，而.test1 .test2的权值是10+10=20，所以div会应用.test1 .test2变成绿色

另外一种理解方式：

　　CSS优先级：是由四个级别和各级别的出现次数决定的。

　　四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。

　　优先级的算法：

　　每个规则对应一个初始"四位数"：0、0、0、0

　　若是行内选择符，则加1、0、0、0

　　若是 ID选择符，则加0、1、0、0

　　若是类选择符/属性选择符/伪类选择符，则分别加0、0、1、0

　　若是元素选择符/伪元素选择符，则分别加0、0、0、1

　　算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。　　

需注意的：

　　①、!important的优先级是最高的，但出现冲突时则需比较”四位数“;

　　②、优先级相同时，则采用就近原则，选择最后出现的样式;

　　③、继承得来的属性，其优先级最低;

　　!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

　　*css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化。

7.已访问的和未访问的类型成为伪类

a.visited{color:red}
<a href="http://www.w3.org/" class="visited">w3c wed site</a>
a:link 超链接并指向一个未访问地址的
a:visited已访问的连接
动态伪类
：focus 聚焦的时候
：hover 鼠标指针停留在这个元素上
：active 指示被用户激活的时候

8.简洁、高效的css

所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素。

1.不要再ID选择器前使用标签名

解释：ID选择是唯一的，加上标签名相当于画蛇添足了，没必要。

2.不要在类选择器前使用标签名

解释：如果没有相同的名字出现就是没必要，但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}

3.尽量少使用层级关系；

#divclass p.colclass{color:red;}改为 .colclass{color:red;}

4.使用类选择器代替层级关系（如上）

阅读全文

0 0