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选择器和属性选择器的优先级一样，谁在后面谁说了算！）
★上述优先级的 底层原理 如下表（浏览器会根据各自的权重值来计算谁的优先级更大）：
| 类型 | 权重值 |
|---|---|
| !important | Infinity（正无穷） |
| 行间样式 | 1000 |
| id | 100 |
| class / 属性 / 伪类 | 10 |
| 标签 / 伪元素 | 1 |
| 通配符 | 0 |
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盒模型
- 内边距样式
设置方式 属性值的含义 padding: 6px 6px 6px 6px;上---右---下---左 padding: 6px 6px 6px;上---左右---下 padding: 6px 6px;上下---左右 padding: 6px;四个方向都一样 - 外边距样式
设置方式 属性值的含义 margin: 6px 6px 6px 6px;上---右---下---左 margin: 6px 6px 6px;上---左右---下 margin: 6px 6px;上下---左右 margin: 6px;四个方向都一样 - 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>
总结自《渡一教育_2020权威HTML+CSS零基础入学》
