CSS
-
概念：（cascading style sheets）层叠样式表，添加网页样式，用于美化网页
- 层叠：
- 样式表：样式规则代码，就是指css当中的css代码
样式来源：
一个网页的样式来源分为三个部分
1.浏览器默认赋予给标签的样式，官方规定的样式
2.浏览器提供给用户的样式自定义
3.开发者编写的样式代码
-
内联样式：在指定标签上添加
style属性进行样式编写-
1.只能作用给指定标签相应样式,不能进行样式复用
-
2.html代码结构和css代码混合在一起,不便于后期管理
-
3.优先级较高
-
代码：
<div class="header" style="css属性名1: css属性值1;css属性名2: css属性值2;....">头部</div>
-
-
内部样式：在
head标签中书写<style></style>标签，在style内部书写样式代码-
选择器：在页面中找到满足条件的标签作用样式代码
-
标签选择器：通过标签名找到页面中满足条件的标签
-
class选择器(类选择器)：通过类名找到页面中满足条件的标签，
.class名 -
id选择器：通过id名找到页面中满足条件的标签，
#id名1.标签选择器div{ width: 200px; height: 200px; color: red;} 2.类选择器.header{ width: 200px; height: 200px; color: red;} 3.id选择器#box1{ width: 200px; height: 200px; color: green;}- 注意：在一个标签上可以作用多个类名，类名和类名之间使用空格隔开
-
特点：
- html代码和css代码在同一个文件中
- 可以同时控制多个标签作用相同样式
-
-
-
外部样式：新建
.css文件书写样式代码，在需要作用样式的html文件的头部使用link标签引入css文件作用样式-
代码
<head> <link rel="stylesheets" href="引入的css文件地址"></head>-
路径：
-
绝对路径：网络地址或者以磁盘符开头的地址
-
相对路径：
./：表示当前目录下../：表示返回上一层目录
-
-
-
优点：
- 讲html代码和css代码进行文件分离，后期维护更加方便
- 一个css文件可以被多个html页面引入，通过link标签引入
- 可以专门对css文件进行压缩，减少文件体积，优化网页
-
分析浏览器中样式来源
element.style：标签的内联样式xxx.html：内部样式xxx.css：外部样式user agent ....：浏览器默认样式
优先级
- 出现相同样式代码属性设置，最终页面效果优先作用哪一条样式代码
- 就近原则：谁离标签越近，优先作用于谁(内联>内部~外部)
