CSS
网页三部分：
- HTML：网页的骨架，只是结构设计 （结构）
- CSS：才是样式来源，有了css样式网页才能进行像素级还原，美化网页 （表现）
- JavaScript：动态脚本，控制页面上的动态效果，点击事件等等 （行为）
CSS的基本概念
CSS Cascading Style Sheets (层叠样式表），主要用于控制网页上的样式的实现，一般css样式不能单独使用，它作用在HTML标签上，控制标签上的显示效果。
层叠：css样式可以在很多地方设置，首先检查代码中是否有css样式代码，会把内联样式、内部样式、外部样式都层叠到一起，最终形成一套样式，如果没有css样式代码，会作用浏览器默认的样式。多个地方的样式都层叠到一起，最终渲染一套样式页面上。相同属性css样式样式最终作用一个，不同的css属性直接作用。
样式表：指的是css样式代码。
网页的样式的来源
- 注意：所有HTML标签本身是没有样式
浏览器默认的样式
p标签，h标签，a标签等等浏览器默认在显示的时候给它们添加样式。标签本身没有样式，来自浏览器默认的样式
通常情况下，浏览器都会为元素设置一些默认样式
通常编写网页时必须去除浏览器的默认样式（pc端的页面）
list-style:none;去除项目符号text-decoration: none;去除下划线重置样式表：专门用来对浏览器的样式进行重置
reset.css直接去除了浏览器的默认样式normalize.css对默认样式进行了统一
浏览器用户自定义的样式
- 浏览器提供给用户可以更改默认的样式，通过浏览器的设置可以更改字体、字号等等
内联样式
通过标签上style属性，在属性上书写对应的css样式代码
语法：
<p style="css属性名1: css属性值1; css属性名2: css属性值2;"> </p>注意：每一个标签都有style属性
好处：
- 哪儿需要在哪儿添加
缺点：
- 多个标签作用相同的样式时，需要重复书写代码 代码复用程度不高
- 只对一个标签生效，样式发生改变时，要一个一个修改，非常不方便
内部样式
通过在head标签中添加style标签，在style标签中通过选择器来书写css样式代码
语法：
<head> <style> 选择器{ css属性名1:css属性值1； css属性名2:css属性值2； } </style> </head>好处：
- 结构和样式分离
- HTML结构清晰明了，有利于代码维护
- 可以批量设置标签的样式
缺点：
- 结构代码和样式代码没有完成分离，还在一个文件
- 只作用于本html文件，其他html文件不能引用
外部样式（外联样式）
先创建一个后缀名
.css的文件，在文件中通过选择器去书写css代码，再在head标签中通过link标签引入对应的css文件语法：
<link rel="stylesheet" href="链接需要引入的css文件的文件路径">好处：
- 结构和样式完全分离
- 一处改处处改，可以批量操作标签的样式
- 以后我们可以压缩css文件，减少文件体积，优化网页
- 代码复用程度较高，可以对多个网页进行公共样式的修改
注意：内联、内部、外部样式同时作用在一个标签上时，优先级（权重）：内联的权重最大，在相同选择器时，内部和外部采用就近原则（离标签越近优先作用）
**拓展：link和@import的区别
link和@import都可以引入css文件，只是服务对象不同，link为整个网页服务，@import为css服务
语法：
b<!-- 第一种，通过link标签引入css文件 --> <link rel="stylesheet" href="css文件路径"> <!-- 第二种，通过@import引入css文件，是css的语法 --> <style> @import url(文件路径); </style>区别：
link是一种标签，@import是css语法，是一种语法
link不仅仅可以引入的css文件，还可以引入其他文件，@import只能css文件
加载时间：link加载css文件，随着页面的加载而加载，@import等等页面加载完成之后再加载文件
兼容性：link的兼容性比@import好一些
通过JavaScript操作样式的时候，link引入的样式可以被操作，@import引入样式不能被js操作
网页中的单位
像素
百分比： 可将属性值设置为相对于其父元素属性的百分比
设置百分比，可以使子元素跟随父元素改变而改变
em
是相对于父元素的字体大小来计算的
1 em= 1font-size
em会根据字体大小的改变而改变
rem
- rem是相对于根元素
html元素的字体大小来计算 - 应用：可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制
颜色：
RGB
在Css中可直接使用颜色名来设置颜色
red green blue
每种颜色的取值在（0-255）之间
语法：rgb(红色，绿色，蓝色)
rgba
rgba就是在rgb的基础上增加了一个a表示不透明度
1 不透明 0 完全透明 .5 半透明
十六进制的rgb值
语法：#红色 绿色 蓝色
颜色浓度通过 00-ff
若颜色两位两位重复可以进行简写
#aabbcc -> #abc
网页优化方案
- 合理使用图片可以优化网页
- 使用雪碧图，通过减少服务器的请求，优化网页
- 使用外部css文件，将其压缩，可以优化网页
- 1px 的渐变背景平铺可以优化网页
- 使用字体图标可以优化网页
- 使用link引入css文件也可以网页
