第一二章 css3基本语法
HTML,CSS,JavaScript关系：
HTML时网页内容的载体
CSS样式时表现（外观控制）
JavaScript是行为，用来实现网页特效效果
什么是CSS?
-css层叠样式表（Cascading Style Sheets）
-用于定义HTML在浏览器内的显示样式
为什么学习CSS?
-css简化html相关标签，网页体积小，下载快
-解决内容与表现分离的问题
-更好的维护网页，提高工作效率
##CSS基础语法： css规则由两部分组成：选择器，声明 h1 {color:red;font-size:14px}
css引用
写在<head></head>标签内：
<style type= "text/css">
css样式......
</style>
css注释：
/*注释*/
css使用方法
如何使用css样式
- 行内样式（内联样式）
- 内部样式表（嵌入样式）
- 外部样式表
- 导入式
行内样式
在开始标签内添加style样式属性
如：<p style="color:red;">内容</p>
内部样式
把css代码写在：
<style type= "text/css">
<!--
css样式......
-->
</style>
写在<head></head>标签内
外部样式
-
外部样式表把css样式代码写在独立的一个文件中
-
扩展名：css文件名.css
-
引入外部文件：
<link href="XX.css" rel="styleheet" type="text/css"/>
说明：<link>标签放在<head>标签中
css导入式
放在<style>标签中
- @import "外部文件地址"
- @import url(外部文件地址)
css使用方法区别。
| 类别 | 引入方法 | 位置 | 加载 |
|---|---|---|---|
| 行内样式 | 开始标签内style | html文件内 | 同时 |
| 内部样式 | <head>中<style>内 | html文件内 | 同时 |
| 链入外部样式 | lt;head>中<link>引用 | css样式文件 与html文件分离 |
页面加载时，同时加载css样式 |
| 导入式@import | 在样式代码最开始处 <style>文件第一行 |
css样式文件 与html文件分离 |
在读取完html文件之后加载 |
使用链入外部样式的好处
- css和html分离
- 多个文件可以使用同一个样式文件
- 多文件引用同一个css文件，css只需下载一次
css使用方法优先级
行内样式>内部样式>外部样式
说明：
- 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后。
- 最后定义的优先级最高。
第三章 css选择器
css规则由两部分组成：选择器，声明；
标签选择器
以html标签作为选择器：
类选择器
为html标签添加class属性：
<h1 class="red">内容1</h1>
<p>内容2</p>
<p class="red">内容3</p>
通过类选择器来为具有此class属性的元素设置css样式：
.red{color:red;}
注：只要通过class属性引用类选择器设置的样式，那该标签引用相应的样式
可对不同类型元素的同一个名称的类选择器设置不同的样式规则
eg:
p.red{color:red;}
h1..red{color:red;}
同一个元素可以设置多个类，之间由空格隔开
eg:
<p class="red special">内容3</p>
ID选择器
其属性与class属性基本相同
为html标签添加ID属性：
<h1>内容1</h1>
<p id="p1">内容2</p>
<p id="p2">内容3</p>
通过ID选择器来为具有此ID的元素设置css规则：
#p1{color:red}
#p2{color:blue}
注：同一个html文件下，每一个ID是唯一的
群组选择器
集体统一设置样式：之间用逗号隔开
*是全局选择器，是对所有标签进行统一样式设置
注：class和id的值区分大小写！！！
后代选择器
<em>css</em>
<p><em>css</em>层叠样式</p>
<p><em>css</em>层叠样式</p>
使用后代选择器设置，之间用空格隔开
p a em{......}/*p标签中a标签中的em*/
#p1 em{......}/*id为p1的标签中的em*/
p.red a em{......}/*class为red的p标签中的a标签中的em*/
伪类
—伪类选择器定义特殊状态下的样式
—无法用标签、id、class及其他属性实现
链接伪类
链接的4种状态：激活状态，已访问状态，未访问状态，和鼠标悬停状态
| 伪类 | 说明 |
|---|---|
| ：link | 未访问的链接 |
| ：visted | 已访问的链接 |
| ：hover | 鼠标悬停状态 |
| ：active | 激活的链接 |
伪类：hover和：active
- :hover用于访问的的鼠标经过某个元素时
- ：active用于一个元素被激活时（即按下鼠标之后放开鼠标之前的时间）
链接伪类的顺序：
：link>:visited>:hover>:active
说明：
- a:hover必须放在a:link和a:visited之后才有效
- a;active必须置于a:horve之后才有效
- 伪类名称对大小写不敏感
第四章 css继承，层叠，优先级
css继承
从父元素那继承部分css属性
继承好处：
- 父元素设置样式，子元素可以继承部分属性
- 减少css代码
css层叠
- 可以定义多个样式
- 不冲突时，多个样式可层叠为一个
- 冲突时，按不同样式规则优先级来应用样式
css优先级
行内样式>内部样式>外部样式
说明：
- 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
- 最后定义的优先级最高（就近原则）
优先级结果：
1. id选择器>class选择器>标签选择器>通配符
2. 同类样式多次使用，样式表中后定义的优先级高
优先级规则
同一样式表中：
- 权值相同 就近原则
- 权值不同 根据权值来判断css样式，哪种css权值高，就使用哪种样式
选择器权值
- 标签选择器：权值为1
- 类选择器和伪类：权值为10
- id选择器：权值为100
- 通配符选择器：权值为0
- 行类样式：权值为1000
权值规则
- 统计不同选择器的个数
- 每类选择器的个数乘以相应权值
- 把所有的值相加得出选择器的权值
!important规则
- 可调整样式规则的优先级
- 添加在样式规则之后，中间用空格隔开
div{color:red !important;}
优先级总结
- important声明高
- css使用方法的优先级
行内样式>内部样式>外部样式
- 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
- 最后定义的优先级最高（就近原则）
- 样式表中优先级
id选择器>class选择器>标签选择器>通配符
- 权值相同 就近原则
- 权值不同 根据权值来判断css样式，哪种css权值高，就使用哪种样式
第五章 css应用
css样式命名
- 采用英文字母，数字以及“-”和“_”命名
- 以小写字母开头，不能以数字和“-”和“_”开头
- 命名形式：单字，连字符，下划线和驼峰
- 使用有意义命名
常用的css样式命名
id和class使用
- id不要滥用，谨慎使用
- 适当使用class
