1 CSS入门
基本上是在<head>标签中设定各种样式
1.1 CSS的组成
CSS是一门基于规则的语言 — 你能定义用于你的网页中特定元素的一组样式规则。这里面提到了两个概念，一是特定元素，二是样式规则。对应CSS的语法，也就是选择器（selects）和声明（eclarations）。
-
选择器：选择HTML元素的方式。可以使用标签名，class值，id值等多种方式。
-
(样式)声明：给HTML元素设置具体的样式。格式：属性名：属性值；
格式：
选择器 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
}例如：
h1 { 相当于选了这个页面中所有的h1这个标签
color: red;
font-size: 5px;
}
1.2浏览器开发者工具
1.3总结
2 基本语法
2.1 引入方式
2.1.1 内联样式
2.1.2 内部样式表
在<head>标签中通过<style>标签来控制样式。只能影响当前文件。
-
格式：
<head>
<style>
选择器 {
属性名: 属性值;
属性名: 属性值;
}
</style>
</head>
2.1.3 外部样式表
在<head>标签中通过<link>标签来引入独立css文件。可以影响不同的文件。【把一些样式的控制写在一个单独的css文件里，通过link标签把文件引入进来，来实现样式控制。并且这个css文件可以作用在不同的文件上】
-
格式：
<link rel="stylesheet" href="css文件">【必须要有这两个属性 】
rel： 引入css文件固定格式为stylesheet。
href：属性值为css文件的相对路径。
今后推荐使用外部样式
2.2 关于注释
2.3 关于选择器
1.什么是选择器
一个HTML文件中会存在很多个元素（标签），如果想对不同的元素添加不同的样式，就需要使用到选择器了!说白了，选择器就是用来选择指定的元素的!
2.选择器的分类：
| 分类 | 名称 | 符号 | 作用 | 示例 |
|---|---|---|---|---|
| 基本选择器 | 元素选择器 | 标签名 | 根据标签名匹配元素 | div{ } |
| 类选择器 | . | 基于class属性值匹配元素 | .center{ } | |
| ID选择器 | # | 基于id属性值匹配元素 | #id属性值{ } | |
| 属性选择器 | 属性选择器 | [] | 基于指定属性匹配元素（这个属性可以有属性名，也可有属性名=属性值的方式） | [type]{ } 选中了一个标签中带有type属性名称的元素 |
| [type=text]{}选中了一个标签中带有type属性，而且属性值为text的元素 | ||||
| 伪类选择器 | 伪类选择器 | : | 用于向某些选择器添加特殊的效果【一般配合超链接标签使用】 | a : hover{ } |
| 组合选择器 | 后代选择器 | 空格 | 使用空格符号结合多个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素 | .top li{ }【选择的是class为top的选择器下所以的li选择器】 |
| 分组选择器 | ，（逗号） | 可以同时匹配多个元素【同时对多个标签添加相同样式】 | div，span，p{} | |
| 子级选择器 | > | 使用 > 结合两个选择器，基于第一个选择器，匹配第二个选择器的直接子级元素 | .top > li{ } | |
| 同级选择器 | ~ | 使用 ~ 结合两个选择器，基于第一个选择器，匹配第二个选择器的所有兄弟元素 | .l1 ~ li{ } | |
| 相邻选择器 | + | 使用 + 结合两个选择器，基于第一个选择器，匹配第二个选择器的相邻兄弟元素 | .l1 + li{ } | |
| 通用选择器 | * | 匹配文档中的所有内容 | *{ } |
基本选择器：
属性选择器：
伪类选择器【配合超链接标签使用】
组合选择器
总结：
3 CSS案例-头条页面
3.1 案例效果
3.2 语义化标签
没有任何意义，仅代表这个标签里放什么的。比如<nav>代表里面放的是导航链接
为了更好的组织文档，HTML5规范中设计了几个语义元素，可以将特殊含义传达给浏览器。
| 标签 | 名称 | 作用 | 备注 |
|---|---|---|---|
| header | 标头元素 | 表示内容的介绍 | 块元素，文档中可以定义多个 |
| nav | 导航元素 | 表示导航链接 | 常见于网站的菜单，目录和索引等，可以嵌套在header中 |
| article | 文章元素 | 表示独立内容区域 | 标签定义的内容本身必须是有意义且必须独立于文档的其他部分 |
| footer | 页脚元素 | 表示页面的底部 | 块元素，文档中可以定义多个 |
标签结构示例如图：
3.3 常见样式属性
3.3.1边框样式
3.3.2 文本样式
4 CSS案例-登录页面
4.1 案例效果
4.2 Table标签
表格标签
<th>自带加粗居中效果
标题3中
<td rowspan="2">男</td> 行合并标识：“2”表示：自此行开始的两行合并在一起，所以下一行（李四那行）的 <td>男</td> 语句省略掉标题4中同理
4.3样式控制（CSS）
控制背景重复（background-repeat）
no-repeat效果
repeat-x水平重复
repeat-y垂直重复
控制轮廓【outline配合input使用】
边框的轮廓效果 double为双实线
元素显示（display）
比如div是块级元素，独占一行，但我们可以通过样式控制，对他进行更改，使用inline将其改为行级元素
block：变为块级元素，独占一行
inline-block：行级元素，但可以设置长宽 
none：隐藏元素：，不对外显示
4.4盒子模型
以红色边框为视角，设置里面的蓝色边框为内边距。
以蓝色边框为视角，要设置外面红色边框，称为外边距。
外边距：从蓝框边缘线到红色框的距离
推荐用外边距来实现布局方式
外边距下的样式：
margin:auto仅使水平方向进行居中
上右下左：顺时针
内边距下的样式：
红边框也随之变化
427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
