html5实训笔记（二）css样式和选择器

css：页面美化和控制布局

css入门基础

css 指层叠式样

*层叠多个样式在html的元素上，同时生效

 

行内>内部>外部

 

css和html的结合

内部样式

优：方便在页面中修改样式

缺点：不利于在多页面中复用代码以及维护，对内容和样式的分离不够彻底

 

外部链接样式

解决了分离不够彻底

1.定义一个css文件，书写对应的css代码

2.在head标签内，定义link标签引入书写的css文件

 

css语法结构

选择器{

属性：属性值；

……}

多个属性属性值，最后一个；可以省略

 

外部导入式样式@import

 

链接式和导入式的区别：

1.link标签属于xhtml（例如xml）内容，@import属于css2.1

2.使用link链接的css文件先加载到网页中，再进行编译显示

3.使用@import导入式css文件，先显示html结构再把css文件加载到网页当中。

4.@import是属于css2.1 对于不兼容css2.1的游览器是无效的

link优势大于导入式

 

css优势：

1内容与表现分离

2网页表现统一，容易修改

3丰富的样式，使网页布局更加灵活

4减少网页的代码量，增加网页浏览速度，节省网络带宽

5运用独立的css，有利于网页被搜索引擎收录

 

选择器

概念：筛选同类的元素

id选择器

基本选择器的优先级

id选择器>类选择器>元素选择器

 

扩展选择器

所有选择器：

并集选择器：可以控制选中的多个选择器

后代选择器：可以控制所有的后代

兄弟相邻选择器：选择所有紧挨着某个元素之后的元素