CSS基础语法

CSS概念

• css全称cascading style sheets，层叠样式表，是一种表现HTML的文件样式的计算机语言
• 作用：静态的修饰网页，并且可以配合各种脚本语言动态的对网页个元素进行格式化
• css的出现，实现了网页的结构和样式相分离

CSS语法

CSS规则

• CSS规则由两个部分构成：选择器以及一条或多条声明

        p {
            width: 300px;
            font-size: 14px;
        }

书写位置

• CSS代码根据书写位置不同分为四种不同的书写方式：内联式、内嵌式、外联式、导入式

内敛式

• 通常也被叫行内式
• 书写位置：在HTML标签之上的style属性中书写css样式
• 所有的css样式属性总体组成标签的style属性值

    <div style="width: 100px; height: 100px; font-size: 14px;">盒子</div>

内联式缺点

• 必须写在标签上，没有完全脱离html标签
• css样式代码让标签结构繁重，不利于html结构的解读
• 一个内联式的css代码，只能给一个标签使用，如果多个标签由相同的样式，同样的css代码需要书写多次，增加代码量
• 因此，实际工作中不会使用内联式

内嵌式

• 书写位置：在html文件中，head标签内部有一个style标签
• style标签书写在title标签后面，所有css代码书写在style标签内部
• style标签有一个标签属性type，属性值为“text/css”

内嵌式特点

优点

• 实现了结构和样式初步分离，css只负责样式，html负责结构
• 多个标签可以利用同一段代码设置相同的样式，节省代码量

缺点

• 结构和样式没有完全分离，代码依旧写在html文件的style标签内部
• css样式只能给一个html文件使用，不能够被多个html文件同时使用
• 在html中如果css代码太多，会造成文件头重脚轻

外联式

• 书写位置：在一个单独的扩展名为.css的文件中
• 书写语法：内部代码与内嵌式样式表证功style标签内部的代码时一样的，需要通过选择器选中标签，添加对应的样式
• 在.css中书写时，不需要再加style属性

外联式引用

• 外联式样式表必须引入到html文件中，才能正常进行加载
• 引入方式：在html中的head标签内部使用link标签进行引入
• link标签的属性

属性名	属性值	说明
rel	“stylesheet”	表示引入的外部文件与thml之间的关系，样式表
href	“css文件路径”	hypertext reference，超文本引用
type	“text/css”	表示加载时代码按照纯文本形式的css代码加载，html5中该属性可不写

外联式优点

1. 实现了html和css完全分离
2. 多个html文件可以共用一个css文件，便于提取公共css，减少代码量
3. 可以实现一个css变化，多个html页面同时变化，减少工作量
4. 一个html文件可以引入多个css文件，可以实现同一个页面中css代码分层

导入式

• 书写位置：在内嵌式样式表style标签内部，或者在外联式样式表内部，导入其他外部的.css文件
• 导入方式：利用一条@import url(css文件的路径)语句进行引入

导入式问题

• 导入式在浏览器加载时，会在html结构加载完毕后再进行编译，如果网速比较慢，会导致网页出现没有css样式的效果，给用户体验不好
• 在实际工作中，较少使用导入式，推荐外联式

实际应用

• 小型案例：可以使用内嵌式
• 实际工作、大型网站项目：推荐使用外联式

CSS样式规则

• 所有的css代码必须书写在head标签内部的一对style标签内
• css在给某个标签设置样式前，必须使用选择器先选择标签
• css样式的属性，属性名和属性值的键值对写法：k:v;
• 给某个选择器添加样式属性都必须写在一对大括号内

注意

• 分号的必要性：每条属性后面的分号必须写，如果不写，会导致后面的所有代码加载错误
• css中所有属性与属性之间对空格、换行、缩进不敏感

CSS注释语法

/*注释内容*/

CSS样式格式

• 展开格式：开发过程中，代码可读性强，便于调整
• 紧凑格式：上传服务器时使用，减少不必要的空白字符，压缩文件大小，利于传输

CSS常用样式

文字三属性-color

• 作用：给文字设置颜色
• 属性名：color
• 属性值：颜色名、颜色值（rgb/十六进制模式）

文字三属性-字体font-family

• 作用：定义元素内文字的字体
• 属性名：font-family，字体属于font综合属性的一个单一属性
• 属性值：字体名称，必须包裹在一对引号中，属性值可以有多个，值之间用逗号分割

文字三属性-font-size

• 作用：设置文字的大小
• 属性名：font-size，字号属于font综合属性的一个单一属性
• 属性值：可以使用相对长度单位，也可以使用绝对长度单位，推荐使用相对长度单位（px、em、%）

注意事项

• 如果html中不设置字号，不同的浏览器有自己默认的加载字号
• 不同浏览器的最小加载字号不同，如果设置的字号低于最小字号，都以最小字号加载

实际应用

• 网页中最小字号必须是12px，如果低于12px会出现兼容问题，现在网页中普遍使用14px
• 尽量使用12px、14px、16px等偶数字号，ie6等老式浏览器支持奇书会有bug
• 实际工作中的字号，需要以设计图为准

盒子实体化三属性

实体化属性

属性名	属性值	说明
width	px单位的数值	定义元素占有的宽度
height	px单位的数值	定义元素占有的高度
background-color	颜色名、颜色值	定义元素的背景颜色

CSS选择器

选择器

• 选择器：选择要添加样式的html标签的一种方法、模式
• 7种选择器：基础选择器（通配符选择器、标签选择器、类选择器、id选择器）、高级选择器（后代选择器、交集选择器、并集选择器）

标签选择器

• 通过标签名选择标签元素
• 书写方式：标签名
• 选择范围：选中的是html文件种所有的同名标签
• 注意：标签选择器可以选择所有的同名标签，会户使html元素的嵌套关系，不管嵌套多深，都能被选中

标签选择器特点

• 优点：可以选中所有的同名标签，设置所有同名标签的公共样式
• 缺点：只能实现全选，不能对局部的标签添加特殊样式

id选择器

• 通过标签上的id属性去选择标签
• 书写方式：#id属性值
• 选择范围：只能选择一个标签
• id命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写，每个id属性值必须是唯一的，不能与其他id同名
• 注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给多个标签取不同的id名，分别选中设置

id选择器的特点

• 缺点：id选择器只能实现单选，不能帮我们完成多选的功能

类选择器

• 通过标签的class属性去选择标签
• 书写方式：class属性值
• 选择范围：是页面种所有class属性相同的标签
• class命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写，class属性值可以与其他的class相同

类选择器的特点

1. 多个不同的标签，不区分标签类型，只要class属性值相同，都可以被同一个类选择器选中
2. 一个标签的class属性可以有多个属性值，值之间用空格分割，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一个标签

类选择的特殊应用

• 原子类：在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添加给需要的标签即可

类选择器的优点

1. 通过一个类选择器进行多选，选中多个标签，添加公共样式
2. 一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量
3. 实际工作中，通常我们有一个使用规律，类上样式，id上行为

通配符选择器

• 通过一个特殊符号选择页面内所有的标签
• 书写方式 *
• 选择范围：包含html标签内所有标签

通配符的特点贺应用

• 有点：可以实现全选，简化书写
• 缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作
• 注意：实际上线的网站不允许使用*去清楚默认内外边距
• 不过普通案例，代码较少时，为了节省书写，可以使用通配符

后代选择器

• 通过标签之间的嵌套关系去选择元素，基本组成部分时基础选择器
• 后代选择器也叫包含选择器
• 书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级
• 选择范围：通过后代选择器前面一系列基础选择器缩写选择范围，做种由最后一个选择器确定选中的标签
• 注意：后代选择器必须满足所有后代关系才能够被选中，后代关系不一定只能是父子关系

后代选择器特点

• 优点：减少class属性的定义使用，选择效率更高

交集选择器

• 通过一个标签之上满足所有的基础选择器的需求去选择标签
• 书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头
• 选择范围：选择的是满足所有基础选择器需求的标签，如果有一个条件不满足都不能被选中
• 比较常见的标签与类的交集

交集选择器更多写法

• 交集选择器可以进行类名的连续交集，需要满足更多条件才能选中标签
• IE6不支持类名连续交集写法
• 交集选择器可以作为其他高级选择器的组成部分

并集选择器

• 不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成浪费，可以将前面六种选择器进行并集书写
• 书写方式：将多个选择器中间用逗号进行分割，最后一个后面不能加逗号
• 选择范围：是所有的单独选择器选中的标签的并集

并集选择器用途

1. 如果多个标签有公共样式，但是不能用一个选择器选中，可以使用并集写法
2. 可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能

CSS层叠式

继承性

• 如果一个标签没有设置过一些样式，它的某个祖先曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来的，这种现象就是继承性
• 能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承

继承性应用

• 继承性是一个很好的性值，可以将页面中出现最多的文字样式设置给一个较大的祖先级标签比如body，后期所有的后代标签都可以从body进行继承

层叠性

• 多个选择器选择选中了一个标签，多个选择器在比对过程中，最终只有一个属性会加载成功，他会层叠、覆盖掉其他的属性

判断方法

选中目标标签

1. 比较多个选择器的权重，权重高的层叠权重低的
2. 如果选择器的权重相同，需要比较CSS中代码的书写顺序，后写的层叠先写的

选中目标标签的祖先级

1. 比较就近原则，比较选择器选中的祖先级的html结构中距离目标标签的远近，近的层叠远的
2. 如果选中的祖先级距离目标一样近（同一个祖先级），比较选择器权重，权重大的层叠小的
3. 如果距离一样近，权重也相同，最后比较css中的书写顺序，后面的层叠前面的

！important关键字

• 如果在比较选择器权重过程中，遇见！important关键字，可以将某条css样式属性的权重提升到最大
• 书写未知：在某个css属性的属性值后面空格加！important
  注意
• 就近原则中，不需要比较选择器权重，所有！important会失效
• ！important不能提升选择器权重，只能提升某条属性的权重到最大

行内式权重

• 行内是样式与内嵌式样式比较权重时，行内式的权重最高
• 但是，与！important关键字相比权重要低