1.CSS简介
在上文【HTML简识】中，我们初步了解了前端代码，但通过HTML，只是完成了一个页面的骨架，真正描述页面的样式即丰富页面内容，需要通过CSS来实现。
2.CSS基本知识
2.1 基本语法规则
每一个CSS语句包含两个部分：
选择器+应用的属性
{}中写CSS的各种属性，都是通过键值对的结构来完成的；
键值对之间使用；来分割，习惯上每个键值对独占一行。
键和值之间使用：来分割，习惯上会在冒号后面加个空格。
每个键值对就对应一个CSS的属性。
注意：
在CSS中的注释风格为/* */,其他方式的注释并不支持。
2.2 引入方式
1.内部样式表
将CSS代码放入style标签中，然后style标签可以放到html文件中的任意位置（一般放到head标签中）。
2.内联样式
通过html标签中的style属性，来指定某个标签的样式。
只适合于写简单样式，只针对某个标签生效，只针对当前元素生效。
<p style="color:red"> hello world </p>
3.外部样式
在实际开发中最为常用的样式，这种方式把CSS代码单独提取出来，放到了一个.css文件中，然后在html代码中，通过link标签，来引入该CSS文件。（通过这样的方式，可以使得样式和结构彻底分离）
样例：
创建style.css
p { color: red; }
创建demo.html
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LDJ</title> <link rel="stylesheet" href="style.css"> </head> <body> <p > hello world </p> </body>
预览效果：
2.3 选择器
2.3.1 基础选择器
基础选择器是由单个选择器构成的
1.标签选择器
写的选择器就是一个html的标签名
<style> p { color: red; } </style>
2.类选择器
通过类选择器可以选择任意元素，首先在CSS代码中创建一个类名，在对应的html元素中，通过class属性来引用这个类名，此时具有该类名的元素，就都会应用上相关的CSS属性。
语法：
类名用.开头
下方的标签用class属性来调用
class属性引用类名不用带.
3.id选择器
和类选择器类似
CSS中使用#开头表示id选择器
id选择器的值和html中某个元素的id值相同
html的元素id不必带#
id是唯一的，不能被多个标签使用（是和类选择器最大的区别）
<style> #ha { color: red; } </style> <p id="ha"> 哈哈哈哈哈哈哈哈哈哈 </p>
类比：
姓名是类选择器，可以重复
身份证号码是id选择器，是唯一的
4.通配符选择器
使用*的定义，选取所有的标签
* { color:red; }
页面所有内容都会变为红色
基础选择器小结：
| 作用 | 特点 | |
| 标签选择器 | 能选出所有相同标签 | 不能差异化选择 |
| 类选择器 | 能选出一个或多个标签 | 根据需求选择，最灵活常用 |
| id选择器 | 能选出一个标签 | 同一个id在一个HTML中只能出现一次 |
| 通配符选择器 | 选择所有标签 | 特殊情况下使用 |
2.3.2 复合选择器
复合选择器是把多种基础选择器综合运用起来
1.后代选择器
通过选择器的组合，选择某个元素中的某个后代元素
语法细则：
选择器1 选择器2 { }
1）中间必须有空格
2）选择器1和选择器2都可以是标签选择器/类选择器/id选择器
代码示例：
找ul标签里是否有class为name的元素
ul .name { color: aqua; }
2.子选择器
通过多个选择器的组合，能够选中某个元素里面的子元素。
语法：
选择器1>选择器2 { }
ul>a { color: blue; }
3.并集选择器
并列的写多个选择器，中间使用逗号赖分割
这里的并集选择器，里面可以写简单的选择器，也可以选择复合的选择器
代码示例：
ul>li { color: aquamarine; } ol>li { color: brown; }
4.伪类选择器
当遇到不同的事件时，有不同的格式反应
链接伪类选择器：
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
<style> p { font-size: large; } p:hover { color: red; } p:active { color: green; } </style> <p> 喵喵 </p>
效果预览：
复合选择器小结
| 选择器 | 作用 | 注意事项 |
| 后代选择器 | 选择后代元素 | 可以是孙子元素 |
| 子选择器 | 选择子元素 | 只能选子元素，不能选孙子元素 |
| 并集选择器 | 选择相同样式的元素 | 更好的代码重用 |
| 伪类选择器 | 选择不同的状态 | 重点掌握 hover的写法 |
2.4 常用元素属性
CSS常用元素有很多，可以参考文档
下边主要介绍CSS中最为常用的几种元素属性：
2.4.1 文本属性
常用的文本属性见下：
- color,表示字体颜色，使用RGB的方式来调整颜色（三个数值分别表示红、黄、蓝，也可以使用十六进制的数字来表示）
- font-size,表示字体的大小，常用单位为px
- font-family,表示字体格式，比如宋体，楷体等
- font-weight,表示字体粗细，可以使用数字和常用英文单词设置
- font-style,表示字体样式，如倾斜，值为italic表示设置倾斜，值为normal表示 取消倾斜，多用于取消倾斜
- text-align,表示文本对齐，left左对齐，right右对齐，center居中对齐。
- text-decoration,表示文本装饰，可以设置和取消下划线或删除线，值为none表示取消下划线和删除线，underline表示下划线，line-through表示删除线，overline上划线
代码示例：
<style> .one { color:#0000ac; /* 16进制表示rgb颜色 */ font-family: 宋体; /* 字体种类 */ font-size: 16px; /* 字体大小 */ text-decoration: underline; /* 下划线 */ } .two { color:rgb(255,0,0); font-family: 微软雅黑; font-size: 16px; text-align: center; /* 居中对齐 */ text-decoration: overline; /* 上划线 */ } .three { color: rgb(0, 255,255); font-family: 楷体; font-size: 16px; text-align: right; /* 右对齐 */ text-decoration: none; /* 什么都没有 */ } </style> <div class="one"> 这是第一段文本 </div> <div class="two"> 这是第二段文本 </div> <div class="three"> 这是第三段文本 </div>
预览效果：
2.4.2 文本格式
常用文本格式属性如下：
text-indent,表示段落缩进，单位可以使用px或者em；一个em就是当前元素的文字大小
line-height,行高指上下文本行之间的基线距离（字体大小+行间距）
代码示例：
2.4.3 背景属性
- background-color:[指定颜色];背景颜色，其用法与设置字体颜色方法相同，可以使用英文单词或者rgb，默认值为transparent（应用了父元素的背景）
- background-image:url(...);，背景图片
- background-repeat:[平铺方式];,设置背景图片的平铺效果（背景图片和背景颜色可以共存，背景图会出现在背景颜色的上方）
- background-position: x y;设置背景图片位置，参数可以是方位名词（top,left,right,bottom,center）或者精确单位（像素坐标或者百分比，左上角为原点）
- background-size:数字px或单词;，设置背景图片的大小，可以通过数字px的方式来直接设置背景的宽度和高度，还可以使用单词contain（保证背景图始终在元素之内，可能会露出一部分背景色）、cover（完全覆盖，不会让元素露出背景色）来让背景图自适应元素大小
代码示例：
2.4.4 圆角矩形
通过border-radius使边框带圆角效果
基本用法：
border-radius:length;
length是内切圆半径，数值越大，弧线越强烈。
没有经过处理的矩形边框：
使用border-radius属性后的矩形：
如果原来的元素区域是正方形，当border-radius属性的值为该区域边长的一半时（也可以以值为50%来实现相同的效果），可以生成圆形区域
2.4.5 元素的显示模式
- 块级元素：独占一行，可以设置宽度高度（属于块级元素的标签：div、h1-h6、p、ul、li、table…）
- 行内元素：不独占一行，不能设置宽度高度（属于行内元素的标签：span、a、em、i…）
- 行内块元素：不独占一行，能够设置宽度高度（属于行内块元素的标签：input、img）
在实际开发中往往通过display来把行内元素改成块级元素（因为行内元素不能设置宽度高度）。
如上图所示，对a标签的格式并没有生效，我们可以通过display来修改样式
修改生效后如下图：
2.4.6 盒子模型
其实每个HTML元素都相当于一个矩形的盒子，由下边几部分组成：
margin：外边距
padding：内边距
border：边框
content：内容
设置边框：
边框属性的值分别为粗细、颜色、样式，设置边框的粗细会改变原有元素的大小，可以通过 box-sizing 属性来使得边框不再撑大盒子。
设置内边距：
设置外边距：
当两个元素的外边距不同时，对于竖直方向元素的外边距会变为两者边距的最大值，这种现象称为外边距塌陷；对于水平方向，最终外边距是两个元素的外边距之和。
基于margin实现元素水平居中
文本的水平居中：text-align:center
文本的垂直居中：line-height==height
元素的水平居中：margin:0 auto;
元素的垂直居中：margin不能实现
2.4.7 弹性布局
默认的网页布局是从上到下的（块级元素独占一行），实际的网页不仅仅需要从上到下，也需要从左到右。
如上图所示，div默认作为块级元素，是独占一行的，为了让这些div能够在一个横行中排列，就可以使用弹性布局。给父元素设置一个属性：display:flex;
通过flex布局，就可以调整子元素排列的方式，但这些元素默认都是挤在左上角的，如果想让这些元素水平方向排列，需要有属性justify-content
start靠左排列
end靠右排列
center居中排列
space-between让元素中间有一些等分的间隔（浏览器自动计算）
space-around 让元素中间有一些等分的间隔，最左边和最右边也有间隔。
对于竖直方向，可以设置align-items属性，start顶端排列，end底端排列，center垂直居中排列
3.经典布局案例
期待效果：
代码实现：
<style> /* 改变全局默认样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 导航栏 */ .nav { width: 100%; height: 50px; background-color: rgb(60,60,60); color: white; text-align: center; line-height: 50px; font-size: 20px; } /* 中间区域 */ .container { width: 100%; height: 1000px; background-color: grey; display:flex; justify-content: center; align-items: center; } /* 左右边栏 */ .container .left,.container .right { width: 20%; height: 100%; background-color: rgb(17,107,17); font-size: 20px; line-height: 1000px; text-align: center; color: white; } /* 内容区域 */ .container .content { width: 60%; height: 100%; background-color: rgb(163,35,35); font-size: 20px; line-height: 1000px; text-align: center; color: white; } /* 页脚区域 */ .footer { width: 100%; height: 150px; background-color: rgb(60,60,60); color: white; font-size: 20px; text-align: center; line-height: 150px; } </style> <div class="nav"> 导航栏 </div> <div class="container"> <div class="left"> 左侧边栏 </div> <div class="content"> 内容区域 </div> <div class="right"> 右侧边栏 </div> </div> <div class="footer"> 页脚 </div>
效果预览：
