内容概览
CSS学习笔记（一）一、CSS选择器二、CSS权重三、常用CSS样式四、元素的分类五、开发经验六、CSS盒模型七、定位（position）八、Demo（实现：奥运五环）CSS学习笔记（一）
CSS，即：层叠样式表（Cascading Style Sheets）
CSS文档，后缀名为：.css
CSS的引入方式如下：① 行间样式；② 页面级CSS；③ 外部CSS文件。
<!-- 1. 行间样式 --><p style="width: 30px;height: 30px;background-color: aqua;">小方块</p>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS学习笔记</title><!-- 2. 页面级样式 --><style>p {width: 30px;height: 30px;background-color: aqua;}</style></head><body><p>小方块</p></body></html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS学习笔记</title><!-- 3. 引入外部CSS文件 --><link rel="stylesheet" href="123.css"></head><body><p>小方块</p></body></html>
一、CSS选择器
<div id="one" class="box"><h1 class="header">我是标题</h1><p class="content">内容</p><span>结尾</span><div><span>123</span></div></div><div id="two" class="square">方块1号</div><p class="square">方块2号</p>
对以上（HTML文档中的）元素进行选择并应用CSS样式可采取的选择器类型有如下几种：
id选择器（一对一，标签和id名之间呈一一对应的关系）
/* 结构为：# + id名 */#one {width:30px; height:30px;}
class选择器（多对多，标签和class类名之间呈多对多的关系）
/* 结构为：. + class类名 */.square {width:30px; height:30px;}
标签选择器
/* 结构为：标签名 */div {width:30px; height:30px;}
通配符选择器（*）— 常用来初始化所有标签的样式
/* 结构为：* (星号) */* {color: #f40;}
属性选择器
/* 结构为：[属性名] 或 [属性名=属性值]*/[id] {/* 对设有id属性的标签设置样式]*/width:30px; height:30px;}[id="one"] {/* 对设有id属性且id值为one的标签设置样式]*/backgound-color: #f40;}
父子选择器（又称：派生选择器）
/* 结构为：父级元素 + 空格 + 子级元素 + ...*/#one span {/* 即：为id为one的标签下所有的span标签设置样式 */color: #f40;}
直接子元素选择器★★★ 浏览器在遍历父子选择器时，遍历顺序为：自右向左!
/* 结构为：父级元素 + "大于"符号（>） + 子级元素 + ...*/#one > span {/* 即：为id为one的标签的直接子元素（即：此处内容为“结尾”的span标签）设置样式 */color: #f40;}
并列选择器（标签选择器和其他选择器并列时，应该将标签选择器放在最前面！）
/* 结构为：任意选择器(条件1) + 任意选择器(条件2)（注意：两个条件之间不能有空格） */div.square {/* 即：为class类名为square的div标签设置样式 */color: #f40;}
分组选择器（可用来简化代码）
/* 结构为：不同标签之间用英文逗号隔开，最好用一下格式写，方便维护 */#one .header,#one .content,p.square {/* 即：将这三个标签中的内容的字体颜色设置为“淘宝红” */color: #f40;}
伪类选择器
/* 结构为：在目标元素后加上：":hover" 等 */.box:hover {/* 即：当鼠标移动到该class类名为box的元素上时，其上的字体颜色变为“淘宝红” */color: #f40;}
二、CSS权重
★优先级★：!important > 行间样式 > id… > class… / 属性选择器 / 伪类… > 标签选择器 / 伪元素… > 通配符选择器 （注意：class选择器和属性选择器的优先级一样，谁在后面谁说了算！）
★上述优先级的底层原理如下表（浏览器会根据各自的权重值来计算谁的优先级更大）：
1）CSS权重值采用的是：256进制
2）权重值越大，优先级越高；权重值一样，后面的覆盖前面的。
三、常用CSS样式
字体
font-size: 12px;<!-- 注意：① 浏览器默认的字体大小为：16px ; ② 一般网页的字体大小是：12px或14px ; ③ 设置字体的大小实际设置的是字体的高度。-->font-weight: bold;<!-- 注意：font-weight 的属性值有：lighter / normal / bold / bolder / 100、200、... 、900（定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。） -->font-style: italic;<!-- 注意：italic 表示 斜体。 -->font-family: arial;<!-- 注意：font-family 可定义各种字体样式。前端最常用的字体是：arial（乔布斯发明的）。 -->color: #f40;<!-- 注意：颜色的设置方法为：① 纯英文单词 eg：red ；② 颜色代码 eg： #f40 或 #ff4400 ； ③ 颜色函数 eg：rgb(255, 255, 255) -->
边框
border: 1px solid #f40;/* border-width: 1px;border-style: solid;border-color: #f40; */border-left: 1px;/* border-right: 2px;border-top: 3px;border-bottom: 4px; */
★ 利用 border 绘制三角形 ★
文本
text-align: center;文本对齐方式（center、left、right）
line-height: 30px;单行文本的行高（单行文本的高度 = 容器的高度 ------ 垂直居中）
text-indent: 2em;文本首行缩进（单位为：em）
①【1em = 1 * font-size】
eg：文字的行高是1.2倍字体高度（
line-height: 1.2em;）② 分辨率：每英寸能容纳的的垂直像素点数。
（一个像素点只能展示一个颜色单位，像素是相对单位）
text-decoration: line-through;中划线（属性值：line-through、underline、none、overline）
cursor: pointer;光标设置（属性值：pointer、help、……）
四、元素的分类
行级元素（又称：内联样式）— inline★特点★：1）内容决定元素所占位置；2）不可以通过CSS改变宽高。
eg：span、strong、em、a、del块级元素— block
★特点★：1）独占一行；2）可以通过CSS改变宽高。
eg：div、p、ol、ul、li、form、address行级块元素— inline-block
★特点★：1）内容决定元素所占位置；2）可以通过CSS改变宽高。
eg：img
【注意】凡是带有 inline 的元素，都具有文字特性 ！！！
五、开发经验
下图内容是一种常用的开发技巧：（现在CSS中定义功能，后在HTML中选配功能，用以提高开发效率，减少代码冗余度。）标签选择器，常被用来初始化标签：
通配符选择器，常被用来初始化所有标签：
六、CSS盒模型
内边距样式外边距样式CSS盒模型CSS盒模型的计算问题
小实例（绘制一个简易的“远视图”）
【补充】<body></body>标签有一个默认的 margin 为：8 px
七、定位（position）
absolute（绝对定位）★特点★：1）脱离原来位置进行定位；2）相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位。relative（相对定位）
★特点★：1）保留原来位置进行定位；2）相对于自己原来的位置进行定位。fixed（固定定位）
★特点★：将DOM元素固定在可视窗口的某个位置，并且其位置不随滚动条的滚动而变化。
z-index：此属性只能在有定位的DOM元素中生效。该属性可以设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。（如果为正数，则离用户更近，为负数则表示离用户更远。）
八、Demo（实现：奥运五环）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>奥运五环</title><style>* {padding: 0;margin: 0;}.wrapper {position: relative;margin: 30px auto;width: 340px;}.top {margin: 0 auto;width: 100%;height: 106px;}.bottom {position: absolute;left: 50%;top: 50%;width: 224px;height: 106px;margin-left: -112px;margin-right: -53px;}.circle {width: 100px;height: 100px;border: 3px solid #000;border-radius: 50%;float: left;margin-left: 10px;}.circle:first-child {margin-left: 0;}.blue {border-color: blue;}.black {border-color: black;}.red {border-color: red;}.orange {border-color: orange;}.green {border-color: green;}</style></head><body><div class="wrapper"><div class="top"><div class="blue circle"></div><div class="black circle"></div><div class="red circle"></div></div><div class="bottom"><div class="orange circle"></div><div class="green circle"></div></div></div></body></html>
总结自《渡一教育_权威HTML+CSS零基础入学》
