day05

1 css 层叠样式表（修饰html）

优势：弥补html本身标签标记的不足

减少冗余代码，减小文件体积，减少网络带宽占有，提高页面加载速度

提高用户体验

对网页的重构有很好的支持

有利于SEO

2 css的语法

css由两不分组成 : 选择器和声明（包含属性和属性值）

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

注意：属性和属性值冒号连接，分号结束，必须是英文模式

一个选择器可以同时存在多个属性，不分先后顺序

选择器和{}之间存在空格，（从语法规范角度来说建议有）

属性和冒号之间存在空格（语法规范角度）

如果是最后一个属性值分号可以省略（不建议省略）

每一个属性都要单独一行书写（语法规范角度）

3 css的样式表

1 行内样式表

写在html内部，用style写，例如<h2 style="color :red;"></h2>

耦合性太高，复用性低，控制范围小，不利于代码的维护，一般不常用

2 内部样式表（仅限当前页面）

写在head标签中，用style包裹

耦合性小，控制范围大，复用性高

3 外部样式表（只要页面引入了样式表都能生效，工作中常用）

写在html外部，新建文件 ***.css

外部样式表需要引入才能生效，一个页面可以存在多个外部样式表

<link rel="stylesheet" href="路径">

rel="stylesheet"必须要有，作用：创建文档的关联性

复用性更高，耦合性更小，控制范围更大

4 导入式样式表（外部样式表引入方式的一种，一般不用）

<style>

@import url(路径)

</style>

注意点：@import必须是style里的第一句话，不然外部样式表导入不进来

5 【link与@import的区别】

1 老祖宗不同

link是html提供的一种引入外部样式表的方式，不仅可以引入css文件，其他文件也可以，@import是css提供的一种引入外部样式表方式，只能引入css文件

2 加载顺序不同

link与@import同时被加载，@import是当所有的html文件被加载完成之后再加载css

3 兼容性不同

@import需要在IE6以上支持，link没有版本要求

4 控制dom

link支持，@import不支持

6 样式表的优先级

当一个页面同时使用了多个样式表，对同一个元素设置了相同的属性但是值不同，最终生效的是优先级高度

行内的优先级最高，内部和外部的优先级是就近原则，谁在后边谁生效

7 css的选择器

基本选择器

1 标签选择器

语法：html标签 {属性 :属性值;}

作用：统一页面中这个标签的效果

注意点：body中必须存在这个标签

2 id选择器

语法：#id名称 {属性 :属性值;}

作用：可以区分相同的标签，用来控制页面的外围结构

注意：需要引入才能生效，在标签中写id="id名称"，一个标签只能存在一个id名称

3 class选择器

语法：.class名称 {属性 :属性值;}

作用：可以区分相同的标签，用来统一某一个类

注意：需要引入才能生效，在标签里写class="class名称"，一个标签可以同时存在多个class名称

起名规则：可以用数字、字母、下划线组合，不能以数字开头，不能使用汉字，不要使用关键字(html的标签)

建议使用驼峰命名法 .news_top{} 小驼峰

.newTOP{} 大驼峰

id不支持引入多个

4 通配符选择器

语法：* {属性 :属性值;}

作用：清空浏览器解析的默认值

常用写法：* {margin :0; padding :0;}

8 注释问题

快捷键 ctrl+/

html 注释：<!---->

css 注释：/**/