花了1周的时间也学完了CSS, 在这里我也讲黑马博客中pink老师的讲解内容记录一下。
CSS 是层叠样式表 (Cascading Style Sheets) 的简称.
有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、 边距等)以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解:CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离。
一、 CSS语法规范
- 展开格式书写
h3 {
color: pink; font-size: 20px;
}
- 样式大小写(强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外)
h3 {
color: pink;
}
- 空格规范
h3 {
color: pink;
}
- 属性值签名，冒号后面，保留一个空格
- 选择器（标签）和大括号中间保留空格
二、CSS选择器
选择器简单来说就是选择标签用的。这里选择其可以分为两个大类分别是基础选择器以及复合选择器。
基础选择器 是由单个选择器组成的, 基础选择器又包括：标签选择器， 类选择器， id选择器和通配符选择器
2.1 标签选择器
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
标签选择器可以把某一类标签全部选择出来，能快速为页面中同类型的标签统一设置样式,不能设计差异化样式，只能选择全部的当前标签。简单理解就是把所有的div或span标签全部选出来， 即我们按照标签名称进行选择。
2.2 类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器, 在类签名用.表示
.red {
color: red;
}
<div class=‘red’> 变红色 </div>
咱们也可以使用多类名进行选择， 如下所示。
<!--比如第一个类名表示颜色， 第二个类名表示字体-->
<div class=‘class1 class2 class3'> 变红色 </div>
2.3 id选择器
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。
注意:id 属性只能在每个 HTML 文档中出现一次。口诀: 样式#定义,结构id调用, 只能调用一次, 别人切勿使用
#nav {
color:red;
}
<div id="nav">test</div>
2.4 通配符选择器
在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素(标签)。
*{
margin: 0;
padding: 0;
}
三、字体选择
3.1 字体
CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)， CSS 使用 font-family 属性定义文本的字体系列。写多个就是为了防止某种字体不支持，则选择下一个字体。
p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
3.2 字体大小
CSS 使用font-size属性定义字体大小。(谷歌浏览器默认的文字大小为16px)
p{
font-size: 20px;
}
3.3 字体粗细
CSS 使用 font-weight 属性设置文本字体的粗细。下面不同的粗细代表不同的属性作用
normal 默认值不加粗
bold 定义粗体
100-900 400等同于normal， 700等同于bold， 注意不加单位
p{
font-weight: bold;
}
3.4 文字样式
CSS 使用 font-style 属性设置文本的风格。下面不同的属性值代表不同的样式：
normal 默认值，浏览器会显示标准的字体样式font-style：normal
italic 浏览器回显示斜体的字体样式
p{
font-style: normal;
}
3.5 字体复合属性
必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略(取默认值)，但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
body {
font: font-style font-weight font-size/line-height font-family;
}
四、文字属性
CSS Text(文本)属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等
4.1 文本颜色
color 属性用于定义文本的颜色。一下不同的属性值代表不同的含义，
【1】这里color可以使用预设定的颜色值，如pink, red等
【2】或十六进制，如##FF0000
【3】或RGB代码rgb(255, 0, 0)或rgb(100%, 0%, 0%)
div {
color: red;
}
4.2 文本对齐
text-align 属性用于设置元素内文本内容的水平对齐方式。text-align有三个属性分别是left（左对齐）, right（右对齐）, center（居中对齐）
div {
text-align: center;
}
4.3 文本装饰
text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。该属性还有其他的属性值如下：
none 默认，没有装饰性(如果想消去链接下划线可以用)
underline 下划线
overline 上划线
line-through 删除线
div { text-decoration:underline;
}
4.4 文本缩进
text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
div {
text-indent: 10px;
}
<!--em 是一个相对单位，就是当前元素(font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元 素的 1 个文字大小。-->
p{
text-indent: 2em;
}
4.5 行间距
line-height 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离（如果想让文字垂直居中，则字体大小等于行间距， 这样上间距及下间距都为0）
p{
line-height: 26px;
}
五、CSS引入方式
CSS引入方式主要分为三种样式表分别为：
-
行内样式表（行内式） -
内部样式表（嵌入式） -
外部样式表（链接式）
5.1 行内样式表
内部样式表(内嵌样式表)是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中。使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式
<style>
div {
color: red;
font-size: 12px;
}
</style>
5.2 行内样式表
行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
5.3 外部样式表
实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入 到 HTML 页面中使用.
- 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
- 在 HTML 页面中，使用<link> 标签引入这个文件。
ref定义当前文档与被链接文档之间的关系，在这里需要制定为stylesheet，表示被链接的文档是一个样式表文件。
href定义所链接外部样式表文件的URL，可以是相对路径也可以是绝对路经。
六、 CSS的复合选择器
上面第二个部分已经介绍了CSS基础选择器，这里我们说的复合选择器则是建立在基础选择器之上，对基础选择器进行合成的。这里的复合选择器分为以下几个部分，分别是：后代选择器, 子选择器, 并集选择器以及伪类选择器。
6.1后代选择器
/*元素1 是父级，元素2 是儿子级，也可以是孙子级*/
ul li{样式声明} /* 选择ul里面所有的li标签元素 */
6.2 子选择器 (重要)
必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器
div>p{样式声明} /* 选择div里面所有最近一级p标签元素 */
6.3 并集选择器
并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。逗号可以理解为和的意思
ul,div { 样式声明 }
/* 选择 ul 和 div标签元素 */
6.4 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。 伪类选择器书写最大的特点是用冒号(:)表示，比如 :hover 、 :first-child 。
因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。
具体属性如下所示：
a:link 选择所有未被访问的链接
a:visited 选择所有已经访问过的链接
a:hover 选择鼠标位于其上的链接（如果是a的子类b 则是a:hover .b{...}）
a:active 选择活动链接（鼠标按下未弹起的链接）
为了确保生效，请按照 LVHA 的循顺序声明:link-:visited-:hover-:active。
/* a 是标签选择器 所有的链接 */
a{
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */ a:hover {
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
-
:focus伪类选择器用于选取获得焦点的表单元素
input:focus {
background-color:pink;
}
效果如下所示，输入框颜色会变成粉红色。
七、 CSS的显示元素
7.1 块元素， 行内元素以及行内块元素
HTML 元素一般分为块元素和行内元素以及行内块类型。
块元素（自己独占一行， 有宽高， 宽度未容器宽度（父亲宽度），内部可以放行内或块级元素）： 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。（注意元素内不能放块元素例如 h1～h7或者<p)等）
行元素（一行可以显示多个， 设置宽高无效， 默认宽度为内容宽度，只能容纳文本或行内元素）： 常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中 <span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。（注意链接内不能再放链接， <a>内可以放块元素）
行内快元素（一行可以有多个并且可以设置宽高） : 在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。 有些资料称它们为行内块元素
7.2 元素模式转换
主要有以下三种转换方式
display:block;转换为块元素
diplay:inline;转换为行内元素
display:inline-block：转换为行内快元素
7.3 单行文字垂直居中
解决方案: 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中
<style>
div{
width: 200px;
height: 40px
<!--行高等于盒子的高度-->
line-height: 40px
}
</style>
八、 CSS的背景
8.1 背景颜色
background-color 属性定义了元素的背景颜色。一般情况下元素背景颜色默认值是 transparent(透明)，我们也可以手动指定背景颜色为透明色。
background-color:颜色值;
background-color:transparent;
8.2 背景图片
background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)
## none为无背景图， url为图片地址（不加引号）
background-image : none | url (url）
background-image: url("test.jpg")
8.3 背景平铺
如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。（背景图片会压住背景颜色）
repeat 背景图像在纵向和横向上平铺（默认）
no-repeat 背景图像不平铺
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向平铺
``
8.4 背景图片位置
利用 background-position属性可以改变图片在背景中的位置。
关于其属性值如下解释：
length: 百分数｜由浮点数字和单位标识符组成的长度值， 100%则和父亲大小一样款
position top|center|bottom|left|center|right 方向词
background-position: x y
background-postion: 12 32
background-postion: center 0
background-position:right center
参数代表的意思是:x 坐标和 y 坐标。 可以使用方位名词或者精确单位
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
8.5 背景图片图像固定
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment : scroll | fixed
scroll 背景图下时随着对象内容滚动的
fixed 背景图下固定
8.6 背景图像复合写法
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top ;
8.7 背景颜色半透明
background: rgba(0, 0, 0, 0.3)
十 总结
10.1 基础选择器
10.2 字体属性
10.3 文本属性
10.4 CSS引入方式
10.5 CSS复合选择器
10.6 元素显示模式
10.7 CSS背景
