一、什么是css?

主要用于html页面文本内容、图片外形、版本布局等外观样式的设置

二、css语法规则

语法：选择器 声明语句；

div {

width: 200px;

}

div就是选择器花括号中属性键值对就是 属性名:属性值

二、css样式的引入方式

1、行内样式–内联式语法：

适用于：个别元素添加特殊样式时缺点：作用范围小，尽量不要使用

2.内部样式–嵌入式（内嵌式）

我的第一个页面

内容

在head中单独开启一个style标签，书写 选择器和属性键值对适用于：单个html文档需要特殊样式时优点：相对于向内样式，代码能够服用

3.外部样式-外链式，引入的时扩展名为 .css 的文件

可以使用相对路径或者绝对路径来引入。rel 属性：当前文件与被链接文档之间的关系，只有stylesheet得到所 有浏览器的支持，表示外部文件的类型时css文件；适用于：多个html文档拥有相同样式时

创建步骤：1.新建一个扩展名为.css的文件，把文件保存到网站目录的css文件夹中2.打开新建的.css文件，设置编码方式 @charset “utf-8”;3.在html文档中链接后缀名为.css的文件:

三、样式表的优先级

行间样式>内部样式>外部样式就近原则 离标签样式越近

四、样式选择器

* < div < class < id

通配符 < 元素选择器 < class选择器 < id选择器

1.通配符选择器 * ：单独使用匹配所有元素（标签） 0

2.元素选择器–标签选择器、类型选择器： 1

结构中：<标签名>

内容

样式中：标签名{css样式}

在通配选择器中设置了所以元素的padding和margin都为0，在元素选择器中设置div的padding为2px，所以现在对于div元素生效的padding为2px。

3.class选择器–类选择器 10

结构中：<标签名 class=”类名”>样式中：.类名{css样式}

我的第一个页面

内容

类名的权重为10，所以上方的通配符选择器、元素选择器的相同样式会被类名选择器替换掉页面：

选择器的命名规范：3.1、名称尽量有含义；3.2名称建议以英文字母开头，字母、数字、连字符(-_)；3.3除了连字符其他字符不能使用（包括空格）；3.4不能纯数字、不能数字、中文开头；3.5类名区分大小写；

4.id选择器 100

结构中：<标签名 id=”id名”>样式中：#id名{css样式}

我的第一个页面

内容

id选择器的权重为100，所以上方的通配符选择器、元素选择器、类名选择器的相同样式会被类名选择器替换掉页面：

注意：id名字在本页面中只能出现一次；

5.选择器的优先级：一般来说选择器的权值越大，优先级越高；

1.基本选择器的全栈由小到大为：通配符选择器（0）< 标签选择器（1）< class选择器（10）< id选择器（100）< 行间样式（1000）2.如果选择器的权值相同，后写的内容会覆盖先写的内容

我的第一个页面

内容

上面 对于id为boxId 的元素，使用id选择器写了两套样式，后面和前面有相同的样式，后面的会替换前面css样式。

6.行间样式拥有最高优先级但高不过 !Important

我的第一个页面

内容

行内样式虽然拥有最大的权重，但是也没有!important猛。

五、优先级

选择器的权值越大，优先级越高，权值相同时，谁在后面显示谁基本选择器权值：通配符选择器0、标签选择器1、类选择器10、id选择器100复合选择器权值计算方式：组成复合选择器的所有单一算账去的权值累加.box div{} 10+1 =11

box .box p{} 100+10+1=111

行间样式的优先级高于id选择器的优先级；继承央视的权值为0；子元素中设置的样式，会覆盖继承到的样式；在样式中定义！important，优先级高于行内样式