学习地址：https://www.w3school.com.cn/css/css_selectors.asp
| 选择器 | 例子 | 例子描述 |
| .class | .intro | 选取所有 class="intro" 的元素。 |
| #id | #firstname | 选取 id="firstname" 的那个元素。 |
| * | * | 选取所有元素。 |
| element | p | 选取所有 <p> 元素。 |
| element,element,.. | div, p | 选取所有 <div> 元素和所有 <p> 元素。 |
<!DOCTYPE html>
<html>
<head>
<style>
// 应用所有
* {
background-color: lightblue;
text-align: center; //居中
color: blue; //颜色
}
// p选择器
p,h1 {
color: red; //覆盖*
font-size: 200% //字体
}
#para1 { // id(不能数字开头)
font-size: 30%
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>页面上的每个元素都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
</body>
</html>
属性
颜色
rgb(255, 99, 71)，#ff6347，hsl(9, 100%, 64%)，rgba(255, 99, 71, 0.5)，hsla(9, 100%, 64%, 0.5)
透明度：
opacity: 0.3;
透明度应用于整个控件，可能使其中的元素也透明化。而颜色的透明度alpha，不会影响到其余。
背景
背景色
background-color: lightblue;
背景图像
background-image: url("paper.gif");
背景重复
background-repeat
配合背景图像使用，默认repeat-y：垂直重复。repeat-x：横向重复。no-repeat：不重复。
图像位置
background-position: right top; 位于右上角。
背景图像展示方式
background-attachment
fixed：固定；scroll：随页面滚动。
背景绘制区域
background-clip
背景绘制图像位置
background-origin
背景绘制图像尺寸
background-size
简写
原：
body {
background-color: #ffffff;
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
简：
body {
background: #ffffff url("tree.png") no-repeat right top;
}
在使用简写属性时，属性值的顺序为：color、image、repeat、attachment、position。
属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。
边框
border-style属性指定要显示的边框类型。
border-top-style：上边。border-left-style：左边。border-right-style：右边。border-bottom-style：下边。
dotted：点线边框；dashed：虚线边框；solid：实线边框；double：双边框；none：无边框；hidden：隐藏边框；
groove：3D坡口边框；rideg：3D脊线边框；inset：3D内边框；outset：3D外边框；
例如：border-style: dotted solid double dashed; 四个值 四条边
border-style: dotted solid double; 三个值 上 左右 下
border-style: dotted solid; 两个值 上下 左右
border-style: dotted; 一个值 四条边
注意：border-width和border-color也同样适用
border-width边框宽度
border-color边框颜色
border-radius边框圆角 : border-radius: 5px;
简写：
border: 5px solid red;
顺序：border-width，border-style(必须)，border-color。
text-align: center; 居中
color: blue;颜色
font-size: 200%字体
margin-left: 20px;左边距离
border:2px solid Violet边框样式（宽和颜色）
轮廓 Outline
轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。
注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。
用法与边框类似。
outline-color: invert，执行了颜色反转。这样可以确保无论颜色背景如何，轮廓都是可见的
外边距 Margin
CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。
通过 CSS，您可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距。
可以负值。
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
简写：
margin: 25px 50px 75px 100px; ： 四个值时为上右下左。
margin: 25px 50px 75px; ：三个值时上（左右）下。
margin: 25px 50px; ：两个值时为（上下）（左右）。
margin: 25px;：一个值时为上下左右，即四周。
auto
使用auto来水平居中。
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
inherit
使用inherit来集成父元素。
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
外边距合并。
当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
比如上方方框的margin-bottom:20，下方方框的margin-top:10，那么当他们相遇时，他们的间距是20。
内边距 Padding
CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。
通过 CSS，您可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。
不可以负值。
与外边距类似。
实例：
div {
width: 300px;
padding: 25px;
}
在这里，<div> 元素的宽度为 300px。但是，<div> 元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px);
若要将宽度保持为 300px，无论填充量如何，那么您可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。
box-sizing: border-box;
宽度和高度 Width&Height
height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。
可以使用max-width来指定最大宽度。可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。
当width大于浏览器宽度时会出现滚动条，而使用max-width可以避免此问题。同样也有min-width。
框模型
元素的总宽度应该这样计算：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度应该这样计算：
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
文本 Text
文本颜色 ：
使用color定义文本颜色，注意对于 W3C compliant CSS：如果您定义了 color 属性，则还必须定义 background-color 属性。
文本对齐 text-align
文本方向：
direction 和 unicode-bidi 属性可用于更改元素的文本方向。
文本装饰 text-decoration：
overline：上方线；line-through：删除线；underline：下划线；none：无（通常用来删除链接中的下划线）。
文本转换：
text-transform：uppercase（大写）；lowercase（小写）；capitalize（首字母大写）；
文字缩进:
text-indent: 50px;
字母间距：
letter-spacing: 3px; letter-spacing: -3px;
行高:
line-height: 0.8;
字间距:
word-spacing: 10px;
空白:
white-space: nowrap;
文本阴影：
text-shadow: 2px 2px 5px red; （水平阴影、垂直阴影、模糊效果、颜色）
字体：
font-family: "Times New Roman", Times, serif; （衬线字体（Serif）、无衬线字体（Sans-serif）、等宽字体（Monospace）、草书字体（Cursive）、幻想字体（Fantasy））
字体样式：
font-style：normal（正常）；italic（斜体）
字体粗细：
font-weight：normal（正常）；bold（加粗）
字体大小:
推荐使用em作为尺寸单位。为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素（px）。
1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。
可以使用这个公式从像素到 em 来计算大小：pixels/16=em。
font-size: 2.5em; /* 40px/16=2.5em */
简写：
font: italic small-caps bold 12px/30px Georgia, serif; : font-style font-variant font-weight font-size/line-height font-family
font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。
链接
<a href="https://www.example.com">点击这里访问示例网站</a>
<a> 是一个链接，通过 href 属性指定链接的地址。
链接各状态下的颜色：
/* 未被访问的链接 */
a:link {
color: red;
}
/* 已被访问的链接 */
a:visited {
color: green;
}
/* 将鼠标悬停在链接上 */
a:hover {
color: hotpink;
}
/* 被选择的链接 */
a:active {
color: blue;
}
链接各状态下的背景色:
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
链接按钮：
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
列表
无序列表（<ul>）- 列表项用的是项目符号标记
有序列表（<ol>）- 列表项用的是数字或字母标记
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
list-style-position 属性指定列表项标记（项目符号）的位置。
"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的。
"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本。
简写：
list-style: square inside url("sqpurple.gif");
样式
外部样式
通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！
每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式
如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。
内部样式是在 head 部分的 <style> 元素中进行定义。
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
请始终使用正确的 HTML 标签，例如 <h1> - <h6> 用于标题，而 <p> 仅用于段落。
行内样式
行内样式（也称内联样式）可用于为单个元素应用唯一的样式。
如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
行内样式失去了样式表的许多优点（通过将内容与呈现混合在一起）。请谨慎使用此方法。
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
样式重叠时，优先级为后>前>浏览器默认。
表格
TR（Table Row）：
<tr> 标签用于定义表格中的行。
TH（Table Header Cell）：
<th> 标签用于定义表格中的表头单元格。
TD（Table Data Cell）：
<td> 标签用于定义表格中的数据单元格
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<td>数据3</td>
<td>数据4</td>
</tr>
</table>
可悬停表格
在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：
tr:hover {background-color: #f5f5f5;}
条状表格
为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color
tr:nth-child(even) {background-color: #f2f2f2;}
响应式表格
如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条.
在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果：
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
