一、CSS
简介
CSS层叠样式表，文件后缀名为.css，目的是让网页具有美观一致的页面
语法
CSS规则由两个主要部分构成：选择器，以及一条或多条声明（样式）
h1 {color:blue; font-size:12px;}
每条声明由一个属性和一个值组成；
属性和值之间冒号隔开；声明之间分号隔开；
CSS引入方式
内联样式：
<p style="color:red; font-size:12px;">内联样式</p>
内部样式：
在head标签中添加一个style标签
<head> <meta charset="UTF-8"> <style> p{ color:red; font-size:12px; } </style> </head> <body> <p>文本</p> </body>
外部样式（推荐）
当样式需要应用多个页面时，推荐使用外部样式；
创建一个css文件，例如创建一个first.css文件，在html文件的head部分添加：
<link rel="stylesheet" href="./first.css">
二、选择器
全局选择器
可以与任何元素匹配，优先级最低，一般做样式初始化
*{
margin: 0;
padding: 0;
background: white;
}
元素选择器
HTML中的元素，p、b、div、a、img、body等
标签选择器，选择页面上所有这种类型的标签；
类选择器
用圆点来定义
<p class="firstclass">
helloworld
</p>
/*类选择器使用*/
.firstclass{
width: 45px;
}
class属性的特点：
- 类选择器可以被多种标签使用
- 类名不能以数字开头
- 同一个标签可以使用多个类选择器，用空格隔开
ID选择器
针对某一个特定的标签来使用，只能使用一次。css中ID选择器以#来定义
<p id="myId">
helloworld
</p>
/*ID选择器使用*/
#myId{
width: 45px;
}
注意：
1.ID是唯一的
2.ID不能以数字开头
合并选择器
语法：选择器1，选择器2…{}
作用：提取共同的样式，减少重复代码
选择器的优先级
CSS中，权重用数字衡量
元素选择器权重为： 1
class选择器权重为：10
id选择器权重为：100
内联样式选择器权重为：1000
三、背景属性
CSS背景属性主要有以下几个
| 属性 | 描述 |
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-position | 设置背景图片显示位置 |
| background-repeat | 设置背景图片如何填充 |
| background-size | 设置背景图片大小属性 |
这块比较简单但知识又多，具体省略，自行看书或者视频 。
四、文本属性
text-align
指定元素文本的水平对齐方式
| 值 | 描述 |
| left | 文本居左排列，默认值 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
text-decoration
规定添加到文本的修饰，下划线、上划线、删除线等
| 值 | 描述 |
| underline | 定义下划线 |
| overline | 定义上划线 |
| line- through | 定义删除线 |
text-transform
控制文本的大小写
| 值 | 描述 |
| captialize | 定义每个单词开头大写 |
| uppercase | 定义全部大写字母 |
| lowercase | 定义全部小写字母 |
text-indent
规定文本块中首行文本的缩进
负值是允许的，如果值是负数，将第一行左缩进；
五、表格属性
表格边框
指定CSS表格边框，使用border属性
table, td {
border: 1px solid black;
}
折叠边框
border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开
table { border-collapse : collapse;}
/*
单元格之间的边框合并成一个
*/
表格宽度和高度
width和height属性定义表格的宽度和高度
表格文字对齐
text- align属性设置水平对齐方式，向左、右或中心
td { text-align: right;}垂直对齐属性设置垂直对齐
td { height: 50px; vertical-align: bottom;}表格填充
如果在表的内容中控制空格之间的边框，使用td和th元素的填充属性
后续会补充padding含义
td { padding: 15px;}六、关系选择器
后代选择器
选择所有被E元素包含的F元素，中间用空格隔开
E F { }
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
//CSS中
ul li{
color: red
}
无序列表中所有的li标签颜色都为红色；
子代选择器
选择所有作为E元素的直接子元素F，对更深一层元素不起作用，用>表示
E>F {}
<div>
<a href="#">子元素</a>
<p><a href="#">孙元素</a> </p>
</div>
//CSS中
div>a {
color: red;
} 只有div中的a标签颜色为红色；
div中p中的a标签不起作用；
相邻兄弟选择器
选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择
E+F {}
<h1>h1</h1>
<p>第一个元素</p>
<p>第二个元素</p>
//CSS中
h1+p {
color: red;
}第一个p标签内容为红色，第二个为黑色
通用兄弟选择器
选择E元素之后的所有兄弟元素F，作用于多个元素，用～隔开
E～F {}
<h1>h1</h1>
<p>第一个元素</p>
<p>第二个元素</p>
//CSS中
h1~p {
color: red;
}
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
