CSS基础

2018-08-26

CSS 简介

cascading style sheets 汉译:层叠样式表

WEB 标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。
目前推荐遵循的是 W3C 发布的 CSS3.0

用来表现 XHTML 或者 XML 等样式文件的计算机语言。
1998 年 5 月 21 日由 w3C 正式推出的 css2.0

div+css 的优点：

缩减页面代码，提高访问速度;
代码减少，页面文件就会小，占用网络带宽就少，客户端打开速度就快，用户体验会更好
结构清晰，有利于 seo
有利于搜索引擎优化
缩短改版时间
对网站的重构有很好的支持
弥补 html 语言的不足

CSS 语法

选择符 {属性:属性值; 属性:属性值;}

选择符和声明

CSS 样式表

说明: 1)每个 CSS 样式由两部分组成，即选择符和声明，声明又分为属性和属性值； 2)属性必须放在花括号中，属性与属性值用冒号连接。 3)每条声明用分号结束。 4)当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。 5)在书写样式过程中，空格、换行等操作不影响属性显示。

内部样式表

1
2
3

<style type="text/css">
  /*css语句*/
</style>

内联样式
<标签 style=”属性:属性值; 属性:属性值;”></标签>
例如：

1 2	<div style=“width:100px; height:100px; border:1px solid #eee; background:#fff;"> </div>

外部样式表
引用外部样式表文件
方法一:

1	<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />

说明：使用 link 元素导入外部样式表时，需将该元素写在文档头部，即与之间。
rel：用于定义文档关联，表示关联样式表；
type：定义文档类型；
方法二:

1
2
3

<style type="text/css">
  @import url(目标文件的路径及文件名全称);
</style>

注：@和 import 之间没有空格,url 和小括号之间也没有空格,必须结尾以分号结束;

link 和 import 导入样式的区别

link 属于 XHTML 标签，而@import 完全是 CSS 提供的一种方式。 link 标签除了可以加载 CSS 外，还可以做很多其它的事情，比如定义 RSS，定义 rel 连接属性等，@import 就只能加载 CSS。
加载顺序的差别:当一个页面被加载的时候（就是被浏览者浏览的时候），link 引用的 CSS 会同时被加载，而@import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import 加载 CSS 的页面时开始会没有样式。
兼容性的差别:@import 是 CSS2.1 提出的，所以老的浏览器不支持，@import 只 t 在 IE5 以上的才能识别，而 link 标签无此问题。
使用 dom 控制样式时的差别:当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的.

样式表的优先级

内联样式最高
外部样式和内部样式谁写在下面就会覆盖上面的样式，优先级更高

样式表的作用域

内联样式只对当前标签起作用;
内部样式只对当前文件起作用;
外部样式对所有连接的页面都起作用;

CSS 选择器

CSS 选择符包括 4 大类:类型选择符、id 选择符、class 选择符、和特殊选择符;

常用的选择符有十种左右:
类型选择符（标记选择器）
类选择符（class 选择符）
ID 选择符（id 选择器）
伪类选择器
群组选择符（集合选择器）
通配符（*）
子选择符
包含选择符（后代选择器）

元素选择符/类型选择符

元素名称 { 属性：属性值；} 如

1
2
3

p {
  background: red;
}

说明：
① 元素选择符即使用结构中元素名称作为选择符。
如 body、div、p,img,em,strong,span……等。
② 所有的页面元素都可以作为选择符;
③ 使用元素选择器，会把文档中所有的标签都加相同的样式;
如：a｛background:red｝所有 a 的背景颜色都是红色

id 选择器
#id 名{属性：属性值;}

说明：
① 使用 ID 选择器时需给元素定义 id 属性;
如：

1	<div id="top"></div>

② 在 css 样式表中写 id 选择器时，id 名称前加#;
如：#box{width:300px; height:300px;}
③ 起 id 名时要取英文名，不能用关键字(所有的标记和属性都是关键字);
如：head 标记
④ 一个 id 名称只能对应文档中一个具体的元素;

class 选择器/class 选择符
.class 名{属性:属性值;}

说明：
① 使用类选择符时需为元素定义一个 class 属性；
如：

1 2	<div class="top"></div> “

② 一个 class 属性可以起多个名字；
如

1	<p class="box main"></p>

扩展：div.box{background:red;} 指定选择器

1 2	<div class="box"></div> <p class="box"></p>

只会给 class 名为 box 的 div 标签加样式

群组选择器
选择符 1，选择符 2，选择符 3{属性：属性值;}

说明：当有多个选择符应用相同的样式时,可以使用群组选择器;

包含选择器(后代选择器)
选择符 1 选择符 2{属性：属性值;}

说明:选择符 1 和选择符 2 用空格隔开，选择符 1 中必须包含的所有选择符 2;

子元素选择器

选择符 1>选择符 2{属性:属性值;}

说明:子元素选择器只能匹配父元素下的第一级子元素

伪类选择器(伪类选择符)
a:link{属性：属性值;} 超链接的初始状态;
a:visited{属性：属性值;} 超链接被访问后的状态;
a:hover{属性：属性值;} 鼠标划过超链接时的状态;
a:active{属性：属性值;} 即鼠标按下时超链接的状态

说明：
① 当四个伪类选择器同时使用时，必须是以上的顺序;
② 写网页时一般我们简化使用
如：a{color:red;} a:hover{color:green;}
表示超链接的三种状态都相同,只有鼠标划过变颜色。

通配符
- {属性:属性值;}

说明：通配选择符的写法是”*“，其含义就是所有元素。
用法：常用来重置样式

CSS 选择器的权重

选择符的权重
css 中用四位数字表示权重，权重的表达方式如：0,0,0,0
类型选择符的权重：0001
class 选择符的权重：0010
id 选择符的权重：0100
子选择符的权重：0000
属性选择符的权重：0010
伪类选择符的权重：0010
伪元素选择符的权重：0010
包含选择符的权重：包含的选择符权重值之和
内联样式的权重：1000
继承样式的权重：0000

注释的写法

HTML 注释

1	<!--注释的内容-->

CSS 的注释

/*注释内容*/

本文作者：人模人样的搬砖老段
本文链接：CSS 基础
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

最后更新于:2019/10/22