CSS的个人见解

技术2022-07-14 77

CSS总结

CSS是什么？

css是层叠样式表(英文全称：2113Cascading Style Sheets)是一种5261用来表现HTML（标准通用4102标记语言的一个应用）或1653XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS的作用

css的作用

• 1.实现了样式和html的代码分离。

• 2.弥补html对属性的的控制不足。

• 3.精确的控制页面的布局。

• 4.可以提高页面的执行效率。

• 5.css还有特殊的功能。

CSS的特性

•1.继承性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> CSS的继承性 </title> <style> body{ font-size:105px; color:red; } p{ font-size:25px; } </style> </head> <body> <p>HelloWord</p> </body> </html>

•2.层叠性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> CSS的层叠性 </title> <style> body{ font-size:105px; color:red; } p{ font-size:25px; } </style> </head> <body> <p>HelloWord</p> </body> </html>

CSS的基本语法

基本语法

CSS选择器

1.类选择器

<html> <head> <title> 类选择器 </title> <style> .p1{ color:red } </style> </head> <body> <p class="p1">欢迎来到我的博客</p> </body> </html>

2.id选择器

<html> <head> <title> id选择器 </title> <style> #p2{ font-size:100px;} </style> </head> <body> <p id="p2">欢迎来到我的博客</p> </body> </html>

3.标签选择器

<html> <head> <title> 标签选择器 </title> <style> p{color:red;} </style> </head> <body> <p>欢迎来到我的博客</p> <p>HelloWord</p> </body> </html>

4.包含选择器

<html> <head> <title> 包含选择器 </title> <style> ol ul li{font-size:50px; color:red} </style> </head> <body> <ol> <li>欢迎 <li>23 <ul> <li>来到博客 </ul> </ol> </body> </html>

5.伪类

1.未连接 a:link

2.已经访问链接 a:visited

3.进入链接 a:hover

4.激活（按下）状态 a:active 其中的hover 和active*可以用于其他控制

<html> <head> <title> 伪类选择器 </title> <style> a:hover{font-size:50px;} </style> </head> <body> <a href="#">超链接</a> </body> </html>

6.通配符选择器

* { } 选择所有标签

7.相邻选择器

div +p{ }

8.相邻所有选择器div ~p

div ~p{ }

选择器的优先级

优先级关系：内联样式>ID 选择器 >类选择器 = 属性选择器 = 伪类选择器 > 标签选择器= 伪元素选择器

Processed: 0.010, SQL: 9