[目录]
一、CSS基础介绍
- CSS层叠样式表（Cascading Style Sheet）：用于定义HTML内容在浏览器内的显示样式
- 特点：
- CSS简化HTML相关标签，网页体积小，下载快
- 解决内容与表现分离的问题
- 更好的维护网页，提高工作效率
二、CSS基础语法
- CSS样式规则：CSS规则由两部分构成：选择器，声明
- CSS引用
<style type="text/css"><!--写在<<head></head>标签内-->
css样式
</style>
- CSS注释：/注释语句/
三、CSS的使用方法
- 引用CSS样式的方法
- 行内样式（内联样式）：在开始标签内添加style样式属性，如：
<p style="color:res;">内容</p> - 内部样式表（嵌入样式）：把CSS样式代码写在style样式中，如：
<style type="text/css">样式</style> - 外部样式表：把CSS样式代码写在独立的一个文件中，扩展名.css，引入外部文件，
<link href="xx.css" rel="stylesheet" type="text/css"/>，要放到标签内 - 导入式：@import“外部CSS样式”
- 行内样式（内联样式）：在开始标签内添加style样式属性，如：
- CSS使用方法区别
属性 |
值 |
位置 |
加载 |
|---|---|---|---|
| 行内样式 | 开始标签style | html文件内 | 同时 |
| 内部样式 | <head>中<style>内 | html文件内 | 同时 |
| 链入外部样式 | <head>中<link>引用 | .css样式文件.html文件分离 | 页面加载时，同时加载CSS样式 |
| 导入式@import | 在样式代码最开始处 | .css样式文件与.html文件分离 | 在读取完html文件之后加载 |
- 使用链入外部样式的好处
- CSS和html分离
- 多个文件可以使用同一个样式文件
- 多文件引用同一个CSS文件，CSS只需要下载一次
- CSS使用方法优先级
行内样式 > 内部样式 > 外部样式
- 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
- 最后定义的优先级最高（就近原则）
- CSS优先级规则
- 同一样式表中：
- 权值相同：就近原则（离被设置元素越近优先级越高）
- 权值不同：根据权值来判断CSS样式，哪种CSS样式权值高就使用哪种样式
- 选择器权值
- 标签选择器：权值为1
- 类选择器和伪类：权值为10
- ID选择器：权值为100
- 通配符选择器：权值为0
- 行内样式：权值为1000
- 权值规则
- 统计不同选择器的个数
- 每类选择器的个数乘以相应权值
- 把所有的值相加得出选择器的权值
- !import规则
可调整样式规则的优先级，添加在样式规则之后，中间用空格隔开
四、CSS选择器
- 标签选择器：以HTML标签作为选择器
- 类选择器：为HTML标签添加class属性，通过类选择器来为具有此class属性的元素设置CSS样式，可对不同类型元素的同一个名称的类选择器设置不同的样式规则，同一个元素可以设置多个类，之间有空格隔开
- ID选择器：为HTML标签添加ID属性，通过ID选择器来为具有此ID的元素设置CSS规则
- 群组选择器：集体统一设置样式
- 全局选择器：所有标签设置样式
- 后代选择器：使用后代选择器设置，之间用空格隔开
- 伪类：伪类伪类选择器定义特殊状态下的样式，无法用标签id,class及其它属性
伪类 |
值 |
|---|---|
| :link | 未访问的链接 |
| :visited | 已访问链接 |
| :hover | 鼠标悬停状态 |
| :active | 激活的链接 |
- 伪类:hover和:active兼容
- IE6及更早版本支持<a>元素的4种状态
- IE6浏览器不支持其他元素的:hover和:acitve
- 链接伪类的顺序
:link > :visited > :hover > :active- a:hover必须置于a:link和a:visited之后才有效
- a:active必须置于a:hover之后，才有效
- 伪类名称对大小写不敏感
五、CSS继承和层叠
- CSS继承：从父元素那继承部分CSS属性
- 继承的好处：父元素设置样式，子元素可以继承部分属性，减少CSS代码
- CSS层叠
- 可以定义多个样式
- 不冲突时，多个样式可层叠为一个
- 冲突时，按不同样式规则优先级来应用样式
六、CSS样式命名规则
- 采用英文字母、数字以及“-”和“_”命名
- 以小写字母开头，不能以数字和“-”、“_”开头
- 命名形式：单字，连字符，下划线和驼峰
- 使用有意义命名
常用的CSS样式命名
- 页面结构
页头：header 导航：nav 页面主体：main 侧栏：sidebar 页尾：footer
栏目：column 内容：content/container 页面外围控制：wrapper
容器：container 左中右：left、right、center
- 导航
导航：nav 左导航：leftsidebar 主导航：mainnav 右导航：rightsidebar
子导航：subnav 菜单：menu 订导航：topnav 子菜单：submenu
边导航：sidebar 标题：title 摘要：summary
- 功能
标志：logo 注册：register 广告：banner 搜索：search
登录：login 功能区：shop 登录条：loginbar 标题：title