- CSS
- 选择器
- 字体属性
- 背景属性
- 文本属性
- 表格属性
1. CSS
1.1 CSS简介
CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表。CSS文件后缀名为 .css 。CSS用于HTML文档中元素样式的定义。使用CSS可以让网页具有美观一致的页面
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明(样式)。
语法：
- 选择器通常是需要改变样式的HTML元素
- 每条声明由一个属性和一个值组成
- 属性是希望设置的样式属性，每个属性有一个值。属性和值被冒号分开
1.2 CSS的引入方式
- 内联样式（行内样式）---- 缺乏整体性和规划性，不利于维护，维护成本高
要使用内联样式，需要在相关的标签内使用样式(style)属性。Style属性可包含任何CSS属性
<p style="background: orange; font-size: 24px;">CSS内联样式</p>
- 内部样式 ---- 单个页面内的CSS代码具有统一性和规划性，便于维护，但多个页面易混乱
当单个文档需要特殊的样式时，就应该使用内部样式表，可使用<style>标签在文档头部定义内部样式表。
<head>
<style>
h1{
background:red;
}
</style>
</head>
- 外部样式（推荐）
当样式需要应用于很多页面时，外部样式表将是最理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在文档的头部。
<link rel="stylesheet" type="text/css" href="xxx.css">
2. 选择器（为元素匹配样式）
2.1 全局选择器
可以与任何元素匹配，优先级最低，一般做样式初始化
*{
margin:0;
padding:0;
}
2.2 元素选择器
HTML文档中的元素，p、b、div、a、img、body等
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某个元素的“个性”。
<p>学完<span>前端</span>，继续学Java</p>
<style>
span{
color: red;
}
</style>
- 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等
- 无论这个标签藏的多深，一定能够被选择上
- 选择的所有，而不是一个
2.3 类选择器 ---- 灵活
规定用圆点 . 来定义，针对想要的所有标签使用
<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
width:800px;
}
class属性特点：
- 类标签可以被多种标签使用
- 类名不能以数字开头
- 同一标签可以使用多个类选择器，用空格隔开
<h3 class="classone classtwo">一个h3标题</h3>
2.4 ID选择器
针对某一个特定的标签使用，只能使用一次。css中的ID选择器以 # 定义
<h2 id="mytitle">你好</h2>
<style>
#mytitle{
border:3px dashed green;
}
</style>
- ID是唯一的
- ID不能以数字开头
2.5 选择器的使用
合并选择器
语法：选择器1,选择器2,…{ }，作用：提取共同的样式，减少重复代码
.header,.footer{
height:300px;
}
选择器的优先级
CSS中，权重用数字衡量
- 元素选择器的权重为：1
- class选择器的权重为：10
- id选择器的权重为：100
- 内联样式的权重为：1000
优先级从高到低：行内样式 > ID选择器 > 类选择器 > 元素选择器
3. 字体属性
CSS字体属性定义字体颜色、大小、加粗、文字样式
- color，规定文本的颜色
<style>p{color: red;color: #00ff00;color: rgb(0, 0, 255);color: rgba(255, 0, 0, .5);}</style>- font-size，设置文本大小，chrome接受最小字体是12px
- font-weight，设置文本的粗细
| 值 | 描述 |
| bold | 定义粗体字符 |
| bolder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100~900 | 定义由细到粗 400等同默认，而700等同于bold |
h1{font-weight:normal;}
- font-style，指定文本的字体样式
| 值 | 描述 |
| normal | 默认值 |
| italic | 定义斜体字 |
- font-family，指定一个元素的字体
font-family:"Microsoft YaHei","Simsun","SimHei";
//每个值用逗号隔开
//如果字体名称包含空格，它必须加上引号
4. 背景属性
CSS背景属性主要有以下几个：
| 属性 | 描述 |
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-position | 设置背景图片显示位置 |
| background-repeat | 设置背景图片如何填充 |
| background-size | 设置背景图片大小属性 |
- background-color属性
<div class="box"></div>
<style>
.box{
width: 400px;
height:400px;
background-color: palevioletred;
}
</style>
- background-image属性 ---- 设置元素背景图片
元素的背景是元素的总大小，包括填充和边界(不包括外边距)。默认情况background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小，则从图像的左上角显示元素大小的那部分。
<div class="box"></div>
<style>
.box2{
width: 400px;
height: 400px;
background-image: url("1.webp");
}
</style>
- background-repeat属性 ---- 设置如何平铺背景图像
| 值 | 说明 |
| repeat | 默认值 |
| repeat-x | 只向水平方向平铺 |
| repeat-y | 只向垂直方向平铺 |
| no-repeat | 不平铺 |
- background-size属性 ---- 设置背景图像的大小
| 值 | 说明 |
| length | 设置背景图片宽度和高度，第一个值宽度，第二个值高度；如果只设置一个，第二个值auto |
| percentage | 计算相对位置区域的百分比，第一个值宽，第二个值高度；如果只设置一个，第二个值auto |
| cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 ---- 图片有裁剪 |
| contain | 保持图片纵横比并将图片缩放成适合背景定位区域的最大大小 ---- 未充满整个容器 |
- background-position属性 ---- 设置背景图片起始位置，默认值是：0% 0%
| 值 | 说明 |
| left top | 左上角 |
| left center | 左中 |
| left bottom | 左下 |
| right top | 右上角 |
| right center | 右中 |
| right bottom | 右下 |
| center top | 中上 |
| center center | 中中 |
| center bottom | 中下 |
| x% y% | 第一个值水平位置，第二个垂直位置，左上角0% 0%，右下角100% 100%；默认左上角0% 0%，如果只指定一个值，其他值默认50% |
| xpos ypos | 单位是像素 |
5. 文本属性
- text-align ---- 指定元素文本的水平对齐方式
| 值 | 描述 |
| left | 文本居左排列，默认值 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
- text-decoration ---- 规定添加到文本的修饰，下划线、上划线、删除线等
| 值 | 描述 |
| underline | 定义下划线 |
| overline | 定义 上划线 |
| line-through | 定义删除线 |
- text-transform ---- 控制文本的大小写
| 值 | 描述 |
| captialize | 定义每个单词开头大写 |
| uppercase | 定义全部大写字母 |
| lowercase | 定义全部小写字母 |
- text-indent ---- 规定文本块中首行文本的缩进
p{
text-indent: 30px;
}
负值是允许的，如果值为负数，将第一行左缩进。
6. 表格属性
- 表格边框 --- 指定CSS表格边框，使用border属性
table,td{
border: 1px solid red;
}
- 折叠边框 ---- border-collapse 属性设置表格边框是否被折叠成一个单一的边框或隔开
table,td{ border: 1px solid red; }
table{
border-collapse: collapse;
}
- 表格宽度和高度 ---- width 和 height属性定义表格的宽度和高度
table{ width: 100%; }
td{ height: 50px; }
- 表格文字对齐 --- 表格中的文本对齐和垂直对齐属性
// text-align属性设置水平对齐方式，向左、右、或居中
td{ text-align:center;}
// 垂直对齐属性设置垂直对齐
td{ height:50px; vertical-align:bottom;}
- 表格填充padding ----如果在表的内容中控制空格之间的边框，使用 td 和 th 元素的填充属性
td{
text-align: center;
vertical-align: top;
padding: 20px;
}
- 表格颜色 ---- 指定边框的颜色，和 th 元素的文本和背景颜色
table,td,th { border:1px solid green; }
td { background-color:green; color:white; }
补充：td 和 th 都属于 tr 子元素，td 表示内容单元格，是table data的意思；th 表示标题，一般用在一列的第一格，里面的内容会自动加粗加黑，是table heading的意思。
<table><tr><th>姓名</th></tr><tr><td>张三</td></tr><tr><td>李四</td></tr>
</table>
