css基本知识整理
1.什么是css？
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还2.可以配合各种脚本语言动态地对网页各元素进行格式化。
2.语法
1.属性的设置
- 属性名和属性值之间使用冒号分隔
- 多对属性之间使用分号分隔
- 最后一对属性可以不加分号
2.注释
①写法 ： /* 注释内容 */
②作用 ： 增加代码的可读性，便于后期代码的维护和管理
③注意 ： css中的注释也不能嵌套使用
3.速记写法
属性的简写形式，可以提升开发效率，减少代码使用
eg：内边距
- padding：10px； //表示上下左右的内边距都为10px
- padding：10px 20px； //上下为10px的内边距，左右为20px的内边距
- padding：10px 20px 30px； //上为10px的内边距，左右为20px的内边距，下为30px的内边距
- padding：10px 20px 30px 40px； // 上为10px，右为20px，下为30px，左为40px的内边距
eg：外边距 （简写方式同上）
- margin：10px auto； //auto设置给块级元素的时候，元素可以在父级元素中自动居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> div{ width: 100px; height: 100px; border: 1px solid red; margin: 50px auto; } </style> <body> <div>div1</div> </body> </html>
eg：border
border：1px solid red；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> div{ width: 100px; height: 100px; border: 1px solid red; } </style> <body> <div>div1</div> </body> </html>
3.css如何作用到HTML上？
1.行内样式
- 写在标签内部的style属性上（只能作用于一个元素，一般不推荐使用）
2.内嵌式/内部样式表
- 在head内部使用style标签设置
- 将css规则写到<style>标签内，在不能直接更改css文件情况下，这种方式有效，但是一般不推荐使用，修改起来不方便
3.外部样式表（后期建议使用）
- 当前html文件外部，创建一个css文件-->以.css为文件后缀名
- 1.link标签（优先加载html）
- 2.@import属性（优先加载css）
优先级：（对于同一个div）
- 行内样式>内嵌式=外部引入 （行内特性值为1000）
- 结论：就近原则（原因：下层的会将上层的覆盖掉）
- 哪一个样式距离html元素更近，谁的优先级更高
DOM树
- DOM （Document Object Model）是一个树形结构，在HTML中的每个元素，属性，甚至于文本都可以被转换为DOM中的一个节点。每个节点在节点树中都有对应的关系 点（比如父节点，兄弟节点）。
4.选择器
（1）标签选择器：通过标签名选择一类元素
div{}
span{}
p{}
- eg：
（2）id选择器
- ID选择器以"#"开头，后面紧跟一个ID名，在一个文档中，ID值不能重复，因此在选择文档中唯一元素的时候该选择器比较有用。
- 通过id属性选择一个元素
- eg：#one：选择id='one' 的属性名
（3）类选择器
- 类选择以点"."开头，后面紧跟一个类名。类名不允许有空格，与元素中class属性的值保持一致。一个元素可以有多个class的值，每个值通过空格分割开。类名相同的元素属于一类元素。
- class：通过class属性选择一类元素
- eg：.one：选择 class='one'的属性名
（4）普遍选择器 （常配合其他标签使用）
- * : 选择所有
- eg：*div{}：选择所有的div
（5）后代选择器
- 空格：选择当前元素的所有后代元素（包含孙子元素）
- >：选择当前元素的直接子元素
（6）兄弟选择器
- +： 选择当前元素之后的一个兄弟元素
- ~： 选择当前元素之后的所有兄弟元素
（7）组合选择器
- eg：div#one （选择所有div标签，并且div标签中id为one的元素）
（8）多选择器（多个选择器组合使用，使用“,”进行分割 ）
- eg： div，p，span，# one，.one{ }
（9）属性选择器 [ ]
- 根据元素的属性选择一类元素
- [ id ]： 选择具有id属性的一类元素
- [id='one']：选择具有id属性的一类元素并且id属性值唯一为one的元素
- [class~='one']：选择具有class属性并且属性值之一为one的元素
- [class^='o']：选择具有class属性，并且属性值以o开头的元素
- [class$='o']：选择具有class属性，并且属性值以o结尾的元素
- [class*='o']：选择具有class属性，并且属性值中包含o字符的元素
（10）伪类选择器
- ：伪类名称
- ：first-child 选中作为别人第一个孩子的元素
- ：last-child 选中作为别人最后一个孩子的元素
- ：nth-child（num（2、3...）/odd(选择所有奇数孩子)/even选择所有偶数孩子）
- :only-child 选中独生子元素
- :first-of-type： 选中作为别人每种类型中的第一个孩子的元素
- p:first-of-type{background-color: sandybrown;} // p标签中所有某某类型中的第一个
- ：last-of-type 选中作为别人每种类型中的最后一个孩子的元素
- a：
- ：link 未点击状态
- ：hover 悬停状态
- ：active 鼠标按下状态
- ：visited 点击之后的状态
（11）伪元素选择器
- : :first-letter 选中第一个文本字符
- : :first-line 选中第一行文本
- : :before 选中之前的不存在的节点，可配合content属性进行内容填充
- content：''/url()
- : :after 选中之后的不存在的节点，可配合content属性进行内容填充
- : :selection 选中用户在选择的时候的文本
- input::-moz-selection{color: blueviolet;}
- 前缀，内嵌于浏览器内核
- input::-moz-selection{color: blueviolet;}
选择器的优先级：
- ！important； // 不计入优先级的计算，优先级最高 （不建议经常使用）
- 特性值的计算：
- 特性值越高，优先级越高；
- 特性值相同，谁靠下选择谁 （谁更靠近html，谁的优先级更高）
- 写在style属性内部：特性值记为1000
- id选择器：100
- 类选择器、伪类、属性选择器：10
- 标签选择器、伪元素选择器：1
-
<!DOCTYPE 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>Document</title> </head> <style> div{ width: 200px; height: 200px; background-color: blue !important; /* background-color: blueviolet; */ } </style> <body> <div class="one" id="one" style="background-color: rgb(43, 226, 150);"></div> </body> </html>
扫一扫
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
