手摸手带你学CSS
好好学习，天天向上
本文已收录至我的Github仓库DayDayUP：github.com/RobodLee/DayDayUP，欢迎Star
前言
在大一的时候，上过网页设计的课程，当时感觉学的还不赖，但也确实挺长时间没碰了，很多东西都忘了，所以这段时间在B站上找了视频重新学了一遍。好记性不如烂笔头嘛，所以一边学一遍做了详细的笔记，以后有什么不记得的就可以拿出来复习复习。
基础选择器
CSS中的选择器可以将HTML中的标签选择出来，然后为其设置CSS样式。
标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。优点就是能为某一类选择器设置统一的样式，缺点是不能为单个标签设置样式，只能设置所有的。
<head>
…………
<style>
/* 语法：
标签名 {
属性名: 属性值;
......
} */
p {
width: 30px;
height: 30px;
background-color: aquamarine;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
类选择器
如果想要单独设置某一个或者某几个标签的样式，可以使用类选择器。只要为相应的HTML标签设置class属性，指定对应的类选择器，就可以为其设置样式，可以使用多类名，类名用空格隔开。
<head>
......
<style>
/* 语法：
.类名 {
属性名: 属性值;
......
} */
.box {
width: 20px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="red">红色</div> <!--多类名的格式： class="red box"-->
<div class="green">绿色</div>
<div class="red">红色</div>
</body>
id选择器
id选择器可以为标有特定 id 的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS中 id 选择器以 “#” 来定义。
<head>
......
<style>
/* 语法：
#id名 {
属性名: 属性值;
......
} */
#robod {
background-color: bisque;
color: rgb(43, 10, 75);
}
</style>
</head>
<body>
<p id="robod">微信公众号：Robod</p>
</body>
通配符选择器
通配符选择器用 “*” 定义，用于设置页面中所有标签的样式。它只需要定义不需要调用，标签会自动调用通配符选择器。
<head>
......
<style>
/* 语法：
* {
属性名: 属性值;
......
} */
* {
color: blue;
}
</style>
</head>
<body>
<p>0000</p>
<div>1111</div>
</body>
CSS字体属性
font-family：设置文字的字体，如果指定多个字体默认会使用第一个，当第一个字体没有安装时会使用第二个，以此类推。字体名不需要用引号引起来，但由多个单词组成的字体名需要用单引号引起来。
p {
font-family:'Times New Roman', Times, serif;
}
font-size：设置文字的大小，单位是 px (像素)。标题标签的文字大小需要单独设置，不然不起作用。
p {
font-size: 100px;
}
font-weight：设置文字的粗细。
font-style：设置文字的样式
还可以使用复合属性的方式将上述几种属性写在一起，不过要遵守一定的顺序，不能颠倒。
CSS文本属性
color：设置文本的颜色，有三种方式，第一种是预定义的颜色，第二种是十六进制，第三种是RGB值
text-align：用于设置元素内文本内容的水平对齐方式，一般有左对齐(align，默认值)，右对齐(right)，居中对齐(center)三种
<head>
<style>
p {
text-align:right;
}
</style>
</head>
<body>
<p>微信公众号：Robod</p>
</body>
图中 p 标签与浏览器窗口一样宽，文字在最右边。
text-decoration：用于装饰文本，比如下划线，删除线等
text-indent：设置段落的首行缩进
p {
/*text-indent: 20px; 首行缩进20像素 */
text-indent:2em; /*首行缩进2个字符*/
}
text-shadow: h-shadow v-shadow blur color;文字阴影
在CSS3中，新增了文字阴影的设置：
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值，单位px |
| v-shadow | 必需，垂直阴影的位置，允许负值，单位px |
| blur | 可选，模糊的距离，数值越大，阴影越发散，单位px |
| color | 可选，阴影的颜色，可用rgba()设置颜色及透明度 |
line-height：设置段落文字的行高(行间距)，单位为px或em等，也可以跟一个不带单位的数字，表示行高是字体大小的多少倍。
行高=盒子高度：文字垂直居中
CSS中并没有提供文字垂直居中的属性，可以让文字的行高等于盒子高度，就可以实现文字垂直居中的效果。
<head>
<style>
div {
background-color: aquamarine;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<div>
微信公众号：Robod
</div>
</body>
复合选择器
后代选择器
元素A 元素B {
样式声明
}
后代选择器就是设置父元素里面子元素的样式。其中，元素B可以是元素A的直接子级，也可以是元素A子元素的子元素。像下面这段代码，可以将文字都设置为红色。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<div>
<p>微信公众号：Robod(红色)</p>
<a>
<p>微信公众号：Robod(也是红色)</p>
</a>
</div>
</body>
子选择器
元素A>元素B {
样式声明
}
子选择器和后代选择器类似，不过子选择器只能设置某元素的直接子级元素的样式。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>p {
color: red;
}
</style>
</head>
<body>
<div>
<p>微信公众号：Robod(红色)</p>
<a>
<p>微信公众号：Robod(黑色)</p>
</a>
</div>
</body>
并集选择器
元素A,
元素B {
样式声明
}
并集选择器可以同时为多个元素设置样式，其中元素不仅可以是标签或者类，也可以是后代和子选择器。
<head>
<style>
.red,
div>span>.red2 {
color: red;
}
</style>
</head>
<body>
<div>
<a class="red">微信公众号：Robod</a>
<span>
<p class="red2">微信公众号：Robod</p>
</span>
</div>
</body>
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。常用的伪类选择器有很多，如链接伪类结构伪类等。伪类选择器书写时用冒号(:)表示
链接伪类选择器
a:link：选择所有未被访问的链接a:visited：选择所有已被访问的链接a:hover：选择鼠标指针位于其上的链接a:active：选择活动链接(鼠标按下未弹起的链接)
<head>
<style>
a:link {
color: black;
}
a:hover {
color: yellow;
}
a:visited {
color: red;
}
a:active {
color: green;
}
</style>
</head>
<body>
<a href="#">未被访问的链接</a>
<a href="#">已被访问的链接</a>
<a href="#">鼠标指针位于其上的链接</a>
<a href="#">鼠标按下未弹起的链接</a>
</body>
: focus伪类选择器
input: foces：用于选取获得焦点的表单元素。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:focus {
background-color: red;
}
</style>
</head>
<body>
<input type="text" name="" id="">
<input type="text" name="" id="">
</body>
元素显示模式
元素显示模式就是元素以什么方式进行显示，分为块元素、行内元素以及行内块元素三种。
块元素
常见的块元素有
<h1>~<h6>、<p>、<di>、<u>、<o>、<i>、<div>
块级元素的特点