CSS基础

顺晟科技

2022-09-13 12:11:06

172

CSS 语法

CSS 规则集（rule-set）由选择器和声明块组成：

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

多条 CSS 声明用分号分隔，声明块用花括号括起来。

代码

<!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> <style> p { color: red; font-size: 18px; } </style> </head> <body> <p>有点意思</p> </body> </html> 结果

CSS 选择器

选择器分为基础选择器和复合选择器两大类

1.标签选择器

标签选择器根据标签名称来选择 HTML 元素。

代码

<!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> <style> p { color: gold; } </style> </head> <body> <p>111</p> <p>222</p> <p>333</p> <p>444</p> </body> </html> 结果

类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

代码

<!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> <style> .red { color: red; } .font21 { font-size: 21px; } </style> </head> <body> <p>111</p> <ul> <li class="red font21">332</li> <li>332</li> </ul> </body> </html>

结果

id选择器（只能用一次）

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

代码

#pink { color: pink; }

CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。（将body里的属性全改）

代码

* { color: red; font-size: 21px; }

上一篇：CSS-过滤器(过滤器)属性下一篇：CSS级联上下文和级联顺序

网站建设

Css

CSS基础

CSS 语法

CSS 选择器

CSS 通用选择器