一.CSS是什么
层叠样式表（Cascading Style Sheets）
CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离
比如上图这样的二.一个logo大小和"百度一下"按钮的颜色，都是通过CSS实现的
即：
- css是控制页面的展示效果。
- html是决定页面的布局和结构，比如：页面中每一部分哪个在上面，哪个在下面，至于长什么样子是css来实现的。
举例说明：
那么如果使用了css呢？
图1
注意在图1中：使用的<style>标签大部分情况下是在<head>标签中写！（当然body标签或者是head与body标签之间，即14行15行之间也可以写），然后我们要控制哪个标签元素的展示效果呢？是p标签，所以在style里面使用到p，代码写完之后，效果展示如下：
注意：
- 在图1中，p标签之后是有个大括号。
- 其次是每一句话末尾是有个英文分号！
如果再加上一条p标签和h1标签（下图绿色框部分）
则展示效果：因为选择器没有选中h1对应的标签，所以h1不是所设置的样式：
第9行的p就是选择器，第10和第11行就是 声明决定修改啥
图2
二.css引入方式
2.1内部样式表
什么是内部样式表？就是将css嵌套到html页面中（通过style标签来嵌套）
如第一部分讲的那样
优点：这样做能够让样式和页面结构分离
缺点：分离的还不够彻底，尤其是css内容多的时候
所以就得通过另外一种引入方式：外部引入方式
2.2行内样式表
用法举例，例1：
之前样式：
浏览器中显现结果是：
图2所示！
使用"行内样式表"之后：
例2：
现在我在16行设置了p的行内样式，但是9~12行也是设置了p的内部样式，两者出现了冲突，那......?
我们看到了行内样式设置的文字变成了绿色，说明：
行内样式的优先级比内部样式的优先级高！
2.3外部引入
什么意思？它是将css写到文件里，再在html当中引入该文件！
这里先创建一个css文件，注意后缀得以css结尾：
然后先写html文件中的内容：（如11行所示）
然后再去刚刚创建好的css文件中写选择器：（因为现在我们要对上面这样一个文案的字体颜色进行更改）
图3
然后写好13行的内容和图3的css后，就写第10行，通过link将css文件引入，其中rel后面写的stylesheet表示是个样式表，href后面写的代表是什么文件
浏览器中：
所以 这样一种方式就是将css和html万全隔离！
三.css选择器标签选择器
3.1基础选择器
即：单个选择器构成的
（1）标签选择器
像之前一样，如下图所示：
浏览器中：
但是如果：
如果像11行和12行这样多写2行的p标签的语句，那么样式颜色就都会一样，如下图：
如果想不一样，那就得使用到 类选择器
（2）类选择器
假如说我现在列举我的3个爱好：
查看展示效果：
那么我现在有个需求，就是让这3个爱好展示的效果都不一样！那就需要用到类选择器：
方法操作：就是比如上图的9~11行的标签中分别指定类名，通过使用class：
如上图中所示的勾画的绿线不分，这里就是在p标签中使用class设置了类名为eat，接下来再在另一个css结尾（即demo03.css）的文件中写如下代码：
那么在html文件中还要加上第8行：
那如果是 多个类名呢？如下图所示
如上图中的红色和黄色的这2个类名
最终结果：
其实在类选择器里是可以进行一个样式的叠加：
（3）id选择器
那么id选择七该怎么写呢？是以#开头，后面的双引号内紧跟着id的值
图4
（4）通配符选择器
使用*号，再使用background-color可以设置整个页面的颜色
通配符选择器在实际应用开发中用来针对页面中所有的元素默认样式进行消除，主要用来消除边距
还是使用到图4：
图4
图5
图5中画红框部分就是使用了 通配符选择器
浏览器中：
3.2复合选择器（选学）
即：把多种基础选择器综合运用起来
++写复合选择器，首先要引入内部样式表++
（1）后代选择器
直接使用内部样式表来写：内部样式中有父节点ol和子节点li，然后大括号里是样式声明
还有一种方法:
上图的第11行，也是使用到了 父级 子级 {样式声明}
当然！不一定非得只能是父级和子级，也可以是爷孙级：
（2）伪类选择器
它是用来定义元素状态的
举例说明：
图5
比如图5中红框所示部分的超链接，点击某个选项之前是黑色的，点击之后就会变成蓝色（例如点击"新闻"后会变蓝），那么这种情况是通过伪类选择器来实现的
举例说明：
此时浏览器中是上图这样的样式
那么现在有要求了：我们要求：
（1）浏览器中此超联机默认显示黑色（下图8~10行）
（2）当鼠标悬停到上面的时候，此时展示红色（下图11~13行）
（3）当鼠标按下去但是鼠标没有弹起来，此时展示绿色（下图14~16行）
展示效果：
悬停时：
点击 鼠标未弹出时：
当然伪类选择器不只适用于这个标签，还有其他比如：
浏览器中显示：
疑问：那图5中超链接文字下面都没有下划线，那为什么咱们这里有下划线？那就得通过下面有关于"字体"的学习内容中会讲到！（即本篇内容5.3部分）
四.前端编程中常用元素属性
4.1字体属性
4.1.1字体设置
4.1.1.1字体样式的设置
浏览器中：
总结：font-size是设置字体大小，font-family是设置字体样式
如果不使用内部样式表，也可以新建一个css结尾的文件：
首先在html文件中：
在css文件（即上图中的demo05.css）中：
4.1.1.2字体大小的设置
这不用讲了吧，之前的知识点中都讲过，假设举例子： font-size:80px 就是设置字体大小为80像素
4.1.2字体颜色
图6
首先第1种不需要再讲了，之前也都用过。
第2种是通过16进制表示颜色：
当中的 前两位ff代表 红色像素点，这个数字越大，红色越深；中间的两个0，代表是 绿色像素点，最后两位0代表的是蓝色像素点。
其次是像图6中的这个第2种 #ff0000，因为是两位两位看嘛，分别是ff 00 00，所以是可以所写成f00 ，当然如果是#ff00f0 ,两位两位看是 ff 00 f0，那就不能缩写成 f 0 f0，这种写法错误，除非是3组都是分别一样，才可以缩写。
第3种与第2种其实一样：
rgb分别表示是 red green blue ，括号里的255转换成16进制就是ff。
十六进制设置字体的颜色：
上图中的第13行的写法也是正确的，只不过按照14行缩写的形式来写代码了
浏览器中：
4.1.3字体粗细和字体样式
4.1.3.1字体粗细
设置字体粗细用的是font-weight，同时它也是有对应的一个属性值：
属性值可以是英文，也可以是数字，只不过注意数字为400时代表的是默认值（注意上图中画红框的位置）数字越大，代表字体越粗
举例说明：
先不设置大小：
长这样：
下面开始设置大小：
如果我想让它更粗：
如果我想让它更细：
4.1.3.2字体样式
举例说明：第2种倾斜：
还有一种：第3种切斜：
这么一对比，好像是没什么区别，区别不大
五.文本（对齐缩进装饰行高）
5.1文本对齐
使用 text-align:[值] ，这里的值可以是center：居中对齐，left：左对齐，right：右对齐
5.2缩进
使用text-indent:[值]
注意点：
- 单位可以使用px和em，使用em作为单位更好，1个em就是当前元素的文字大小
- 缩进可以是负数的，表示往左边缩进（会导致文字冒出去了）
浏览器中显示：
那么现在我想：1.让红色框所选内容真正做到靠左靠右和居中 2.让黄色框之前缩进2个空格内容
如下：
5.3文本装饰
使用text-decoration:[值]
举例：假设这里就设置下划线：
5.4文本行高
使用line-height:[值]
注意：
- 行高=上边距+下边距+字体大小
- 上下边距是相等的，如果字体大小是16px，行高是40px，则说明上下边距都是12px
六.编写一个新闻页面
总结下来我们是要做一个这样的新闻页面：
在此期间，我们需要++通过"内部样式表"将css引入进来！！++
图1（上面2张假设合二为一为一整张图）
浏览器中：
根据图1总结：
- 这里我是将标题，发布日期，分割线写在一个大的div里面（28~32行）
- 正文和图片放到一个div里面
- 落款放到一个div里面