CSS层叠样式表
层叠：多个选择器可以同时作用于一个标签，效果可以叠加
样式表：元素视觉表现的集合，样式是依附HTML而存在的
像素单位px
元素关系选择器
根据当前元素与其他元素的关系选择元素的选择器，减少命名
1.子元素选择器
作用：选中指定元素的指定子元素
语法：父元素 > 子元素 > 用>表示
2.后代选择器
作用：选中指定元素的所有后代元素
语法：父元素 子元素（中间有个空格）
3.相邻兄弟选择器
作用：选中下一个兄弟
语法：前一个 + 下一个 用+号连接
层叠性和选择器权重
层叠性
多个选择器可以作用于同一个标签 如果css样式没有一样的 则效果进行叠加
选择器权重
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值，此时就产生了样式冲突
发生了样式冲突，应用哪一个样式就需要选择器（优先级）决定
复杂选择器 根据
id选择器个数 class 选择器个数 标签选择器个数
行内样式优先级大于上面三个
| 权重 | 优先级 |
|---|---|
| 行内样式 | （1,0,0,0） |
| id选择器 | （0,1,0,0） |
| 类名选择器class（属性选择器和伪类选择器） | （0,0,1,0） |
| 元素选择器div（伪元素选择器） | （0,0,1,0） |
| 通配符 | （0,0,0,0） |
| 标签自带的和继承的样式 | 没有优先级 |
为某个样式最后面加！important 该样式直接获得最高权重 开发慎用
优先级相同 优先后面（写）的覆盖先写的
emmet 语法
快速生成HTML基本结构的语法
class和id
.box默认生成div标签类名为box
#box·默认生成div标签id名为box
1.标签名 + .类名 或者 #id名
p.box ==> <p class="box"></p>
p#box ==> <p id="box"></p>
2.重复（*）
p*5 ==>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
3.子节点（>）和兄弟节点（+）
ul.list>li>a ==>
<ul class="list">
<li><a href=""></a></li>
</ul>
ul.list>li*3>a
<ul class="list">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
div+p+img ==>
<div></div>
<p></p>
<img src="" alt="">
4.属性（[])
[title=“div”]默认生成div 属性卸载中括号里面
p[title=“div”] ==>
<p title="div"></p>
css盒模型
css可以将元素设置
一个个矩形的盒子，将元素设置成矩形盒子后，对页面的布局就是将不同盒子放在不同的位置
每个盒子有以下几部分组成
内容区（conetent）
内边距（padding)
边框（border）
外边距（margin）
块级元素能够设置宽高，宽度默认腹肌宽度100%，默认高度90%
行内元素不能设置宽高 默认宽高为0
盒模型边框三要素
边框（border）
- 块级元素的border的作用是在元素的内容区和padding区的外面加上一个边框线
- 通常用来分隔内容，盒子会随着border的设置增大
复合写法
broder：宽度 样式 颜色
线的种类
| 线的样式 | 意义 |
|---|---|
| solid | 实线 |
| double | 双边框 |
| dashed | 虚线 |
| dotted | 点状线 |
边框三要素属性
| 属性 | 意义 |
|---|---|
| border-width | 宽度（默认3px） |
| border-style | 种类（默认是none） |
| border-color | 颜色（默认黑色） |
四个方向的边框
| 属性 | 意义 |
|---|---|
| border-top:宽度 种类 颜色； | 上border |
| padding-right:宽度种类 颜色； | 右border |
| padding-bottom:宽度 种类 颜色; | 下border |
| padding-left:宽度 种类 颜色； | 左border |
内边距（padding）
内容区和边框之间的距离就是内边距 不能放内容
内边距设置会影响盒子大小
内边距的颜色继承背景颜色，不能单独设置
padding是四个方向的
四个方向的padding可以分别用小属性进行设置
| 属性 | 意义 |
|---|---|
| padding-top | 上padding |
| padding-right | 右padding |
| padding-bottom | 下padding |
| padding-left | 左padding |
外边距（margin）
- 外边距不会影响盒子大小
- 外边距会影响到即盒子和其他盒子之间的位置距离
默认设置左上外边距移动自身
右下移动其他元素
margin-bottom 正值 是下方元素向下走
margin-right 正值是右边元素向右走
设置负值就是往相反方向
怪异（IE）盒模型
默认情况下，盒子的大小由内容区，内边距，边框共同决定
box-sizing 用来设置盒子尺寸的计算方式（width和height的作用）
可选值：
content-box 默认值 宽度和高度用来设置内容区的大小
border-box 宽度和高度是设置整个盒子的大小
盒模型计算
盒模型的组成，由里向外分别是content，padding，border，margin
1.标准盒模型
2.怪异盒模型
垂直外边距合并（折叠）现象
发生条件
- 相邻的块级元素垂直方向会发生重叠现
兄弟外边距合并现象
- 竖直方向的margin有塌陷现象
- 两个盒子之间的间距为40px
- 竖直方向的margin不叠加以大数为准
兄弟元素之间的垂直外边距会取两者之间的最大值（两者都是正值）
特殊情况：
如果相邻的外边距一正一负，则取两者的和
如果相邻的外边距都是负值，则取两者中绝对值较大的
文本和字体属性
特点：
- 行内元素不支持设置宽度和高度
- 行内元素可以设置padding.但垂直方向的padding不会影响布局
- hang捏元素可以设置border，垂直方向的border不会影响布局
- 行内元素可以设置margin，垂直方向的margin不会影响布局
字体属性
字体大小（font-size)
font-size实际上设置的是字体的高度，原因很简单为了保证css的视觉效果
单位
- px像素单位是相对于显示器屏幕分辨率而言的。几乎所有浏览器的font-size默认大小都是16px，除非用户修改偏好设置，通常最小设置10px
- 相对于em会根据父级元素的字体大小计算
- 百分比也是相对于父级元素的字体大小设置
- 我们希望单位固定值可以使用rem，相对于根元素的字体大小设置
字体颜色（color）
- color属性可设置文本内容的前景色
- 默认情况下 文本渲染为黑色。链接除外（颜色为活力蓝）
- color属性主要可以使用英语单词、十六进制、rgb()、grgb()、等表示法
- 英语单词表示法，如color：red;仅仅用于学习是临时设置一下颜色，工作时基本不用这样的形式，因为追求精确
字体（font-family)
font-family属性用于设置字体
字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体
font-faily:serif,“Times New Roman”,微软雅黑；
字体名称中有空格，必须用引号包裹
多个字体间使用，隔开，字体生效时优先使用第一个，第一个无法使用则使用第二个
目前的字体设计领域，字体大致分为两大类 ：
1：Serif(有衬线)，多用于网页正文，内容等大量文字内容区域
2：Sans Serif(无衬线)，多用于文章的标题，表格，宣传海报等一些要求文字醒目的领域
serif 衬线字体
sanserif 非衬线字体
monospace 等宽字体 指定字体的类别，游览器会自动使用该类别下的字体
有衬线(serif)和无衬线(sans serif)
-
有衬线笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同.中文字体中的宋体就是一种最标准的serif字体，衬线的特征非常明显.字形结构也和手写的楷书一致。因此宋体一直被做为最适合的正文字体之一
-
没有这些额外的装饰，而且笔画的粗细差不多 无衬线字体醒目，适合用于标题、广告、海报.需要醒目但不需要长时间阅读的地方
随着现代生活和流行趋势的变化，如今的人们越来越喜欢用无衬线体，因为他们看上去“更干净”
中文字体也可以称呼他们的英文名字
| 中文字体名称 | 等价的英语字体名称 |
|---|---|
| font-family:“微软雅黑” | font-family:“Microsoft Yanhei” |
| font-family:“宋体” | font-family:“SimSun” |
| 常见汉字字体英文名称 |
|---|
| 黑体：SimHei |
| 宋体：SimSun |
| 新宋体：NSimSun |
| 仿宋：FangSong |
| 楷体：KaiTi |
| 华文黑体：STHeiti |
| 华文楷体：STKaiti |
| 华文宋体：STSong |
| 幼圆：YouYuan |
字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体较多，设置成其他字体较少
如何设置为用户电脑中没有的字体呢？
那就必须自己定义新字体，这就需要我们有字体文件，用户加载网页的时候，会同时下载这些字体文件
定义字体
字体文件根据操作系统和浏览器不同,有eot、woff2、woff、ttf、svg文件格式，需要同时有这5种文件
当我们拥有字体文件之后，就可以用@font-face定义字体
字体粗细（font-weight）和倾斜
- font-weight属性设置字体的粗细程度，支持关键字和整数100-900
- 通常就用normal和bold两个值
| 示例 | 含义 |
|---|---|
| font-weight:normal; | 正常粗细，与400等值 |
| font-weight:bold; | 加粗，与700等值 |
| font-weight:lighter; | 更细，大多数中文字体不支持 |
| font-weight:bolder; | 更粗，大多数中文字体不支持 |
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
