CSS基础
概念：CSS层叠样式表，也称级联样式表；包含一个或多个规则的文本文件
作用：进行网页风格设计
特点：
1.是页面字体变得更漂亮，更容易编排
2.可以轻松控制页面布局
3.可以在大多数浏览器上使用
4.以前一些必须通过图像转换才能实现的功能，现在只要用CSS就可以轻松实现，页面下载更快
5.可以使用一个CSS文件控制整个网站的显示风格。只要修改CSS文件中相应的行，就可以改变整个网站上页面的显示样式
优势：
1.表现和内容分离
2.增强了网页的表现力
3.是整个网站显示风格趋于统一
编辑方法：
1.写在html文件里的CSS规则
2.将CSS规则写在单独的文件里
CSS规则组成：选择器和声明
选择器类型：
1.标记选择器
直接使用HTML标记名称作为选择器
例：h1{font-size:30px; color:blue; font-familiy:黑体;}
2.类选择器
例：.c1{ font-size:30px; color:blue;font-familiy:黑体;} //写在头部
<p class="c1">著名诗人</p> //写在主体部分
标记选择器和类选择器混合使用：
例：p.h2{ color:res; font-weight:bold;} //写在头部
3.id选择器
由”#”及id属性直接相连构成
例：#right{ color:red; text-align:right; font-size:20px;}
<p id="right">使用id选择器设置样式</p>
4.伪装选择器
用法：标记：伪类名{/*CSS规则*/}
例子：a:link{ color:gray; text-decration:none;}
常用伪类：
| 伪类名 | 说明 |
| link | 设置a标记在未被访问前的样式 |
| hover | 设置a标记在鼠标悬停时的样式 |
| active | 设置a标记在被用户激活（鼠标单击和释放之间）时的样式 |
| visited | 设置a标记在访问后的样式 |
| first-letter | 作用于块，设置第一个字符的样式 |
| first-line | 作用块，设置第一行的样式表 |
| first-child | 设置第一个子标记的样式 |
| lang | 设置具有lang属性的标记的样式 |
CSS选择器声明：
1.集体声明
例：h1,h2,h3,h4,h5,p{ color:purple; font-size:16px;}
h2.spscial, .special,#one{ text0decoration:underline;}
2.全局声明
全局声明符号：“*”
例子：
*{color:purple;
font-size:16px; }
3.派生选择器
优点：使CSS代码更加简洁
例子：
li strong { font-style:italic; font-weight:normal;} //italic 斜体
strong { font-weight:bold;} //bold 粗体
测试代码：
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我来说没有用</strong></p>
<ol>
<li><strong>我是斜体字，因为strong元素位于li标记内</strong></li>
<li>我是正常字体</li>
</ol>
CSS定义与引用
1.内联样式
基本语法：<标记 style=“属性1：属性值1；属性2：属性值2；…”>修饰内容</标记>
语法说明：
（1）标记是指HTML标记，如p、h1、body等标记
（2）标记的style定义的声明只对自身起作用
（3）style属性的值可以包含多个声明，每个声明之间用“；”分隔
（4）标记自身定义的style样式优先于其他所有样式定义
例子：<p style="font-size:20px; font-style:italic;">这个内联样式定义段落文字大小20像素，文字风格为斜体</p>
2.内部样式表
基本语法：
<style type="text/css">
选择器1{属性1：属性值1；属性2：属性值2；…}
选择器2{属性1：属性值1；属性2：属性值2；…}
…
选择器n{属性1：属性值1；属性2：属性值2；…}
</style>
语法说明：
（1）style标记语法是成对标记，有一个type属性是指style元素以CSS的语法定义
（2）选择器1...选择器n，可以定义n个选择器，再定义声明部分
（3）属性和属性值之间用冒号连接，“属性/属性值”对之间用分号分隔
例子：
（1）.int_css{ //类选择器
border-width:2px; //定义边框宽度
border-style:solid; //定义边框样式
text-align:center; //定义文本对齐方式
color:red; //定义颜色
}
（2）#h1_css{ //id选择器
font-size:28px; //定义字体大小
font-style:italic; //定义字体样式
}
3.外部样式表
外部样式表将CSS规则写在以.css为后缀的CSS文件里，需要用到此样式的网页里引用该CSS文件
优点：
①便于复用
一个外部CSS文件可被多个网页共用
②便于修改
修改样式只须修改CSS文件
③提高显示速度
（1）链接外部样式表
基本语法：<link type="text/css" rel="stylesheet" href="out.css"> //out.css是外部样式表的文件名称
语法说明：
link标记是单个标记，也是空标记，仅包含属性，只能存在于head部分，不过他可出现任何次数
link标记属性、取值及说明
| 属性 | 取值 | 说明 |
| type | MIME_type | 规定被链接文档的MIME类型 |
| rel | stylesheet | 定义当前稳当与被连接文档之间的关系 |
| href | URL | 定义被连接文档的位置 |
（2）导入外部样式表
基本语法：
<style type="text/css">
@import url("外部样式表文件1名称")
@import url("外部样式表文件2名称")
选择器1{属性1：属性值1；属性2：属性值2；...}
选择器2{属性1：属性值1；属性2：属性值2；...}
…
选择器n{属性1：属性值1；属性2：属性值2；…}
</style>
语法说明：
①导入样式表必须在style标记内开头的位置定义，可同时导入多个外部样式表，每条语句必须以“；”结束。一般导入外部文件写在最前面，内部样式写在后面
②“@import”必须连续书写，即“@”和“import”之间不能留有任何空格
③url（“外部样式表文件名称”）中的文件必须是全称，含后缀名.css，如out.css
CSS继承与层叠
1.CSS继承即子标记会继承父标记所有样式的风格，并且在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不影响父标记。
注意：有的属性不会继承父标记的属性值，如：边框属性就是非继承的。
2.CSS全称：层叠样式表
CSS规定优先级：行内样式>id样式>class样式>标记样式
