css总结

最新推荐文章于 2024-08-12 22:06:26 发布

2301_80839686

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量611

点赞数 16

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_80839686/article/details/136196944

版权

css选择器：

常见的CSS选择器包括：

标签选择器：选择指定标签名的元素。例如，p选择器选择所有的段落元素：
```
p {
  color: red;
}
 
```
类选择器：选择具有指定类名的元素。类选择器以"."开头，后面跟着类名。例如，.red选择所有具有red类的元素：
```
.red {
  color: red;
}
 
```
ID选择器：选择具有指定ID的元素。ID选择器以"#"开头，后面跟着ID名。例如，#myElement选择具有ID为myElement的元素：
```
#myElement {
  color: red;
}
 
```
属性选择器：选择具有指定属性的元素。属性选择器以"["开头，后面跟着属性名和可选的属性值。例如，[type="text"]选择具有type属性且属性值为"text"的元素：
```
[type="text"] {
  color: red;
}
 
```
后代选择器：
后代选择器是CSS中一种用于选择后代元素的选择器。它可以选择一个元素的所有后代元素，无论层级有多深。

后代选择器使用空格分隔两个选择器，表示选择第一个选择器元素的所有后代元素。例如，如果要选择id为的元素下的所有p元素，可以使用后代选择器:
```
#parent p {
  /* CSS样式 */
}
 
```
上面的代码会选择id为的元素下的所有后代p元素，并对其应用CSS样式。

后代选择器可以无限嵌套使用，用于选择更深层次的后代元素。例如，如果要选择id为元素下的所有p元素，可以使用多个空格进行嵌套选择:
```
#grandparent .parent p {
  /* CSS样式 */
}
 
```
此代码会选择id为的元素下的所有后代中class为的元素下的所有后代p元素，并对其应用CSS样式。

后代选择器用于选择一个元素下的所有后代元素，它可以通过空格进行多级嵌套选择。
子选择器
子选择器是CSS选择器中的一种，它可以选择指定元素的直接子元素。子选择器使用 " > " 符号来表示，将父元素和子元素分开：
```
<div class="parent">
  <p>子元素1</p>
  <p>子元素2</p>
  <span>子元素3</span>
</div>
 
```
可以使用子选择器来选择 div 元素的直接子元素 p 元素：
```
div > p {
  color: blue;
}
 
```
这将使得直接子元素 p 的文本颜色变为蓝色，而不会影响到 span 元素。

使用子选择器可以更精确地选择子元素，避免选择到不需要的元素，提高样式的可控性和可维护性。
字体属性：
字体类型（Font family）：字体类型指的是字体的样式和风格。常见的字体类型包括宋体、黑体、楷体等。不同的字体类型具有不同的外观和风格。
font-family：设置文本的字体系列，可以指定多个备选字体，用逗号分隔。
```
p {
  font-family: Arial, sans-serif;
}
 
```
font-size：设置文本的字体大小。
```
p {
  font-size: 16px;
}
 
```
font-weight：设置文本的粗细程度，可以取值normal、bold、bolder、lighter或数字。
```
p {
  font-weight: bold;
}
 
```
color：设置文本的颜色。
```
p {
  color: #ff0000;
}
 
```
text-decoration：设置文本的装饰效果，如下划线、删除线等。
```
a {
  text-decoration: underline;
}
 
```
text-align：设置文本的对齐方式，可以取值left、right、center或justify。
```
p {
  text-align: center;
}
 
```
CSS引入方式：
内联样式：将CSS样式直接写在HTML标签的style属性中

<p style="color: blue;">这是一段内联样式文本。</p>

嵌入样式：将CSS样式写在HTML文件的head标签中的<style>标签内。

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

外部样式表：将CSS样式写在一个独立的外部CSS文件中，并在HTML文件中通过<link>标签引入。

<head>
  <link rel="stylesheet" href="styles.css">
</head>

css总结：

CSS是一种用于描述网页中元素样式的标记语言。通过CSS，可以控制网页的布局、颜色、字体、背景等方面的样式，从而使网页具有更好的可读性和美观性。

2301_80839686

关注

16
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
css总结

CSS是一种用于描述网页中元素样式的标记语言。通过CSS，可以控制网页的布局、颜色、字体、背景等方面的样式，从而使网页具有更好的可读性和美观性。
复制链接

扫一扫

css总结

css选择器：

后代选择器：

子选择器

字体属性：

CSS引入方式：

内联样式：将CSS样式直接写在HTML标签的style属性中

嵌入样式：将CSS样式写在HTML文件的head标签中的<style>标签内。

外部样式表：将CSS样式写在一个独立的外部CSS文件中，并在HTML文件中通过<link>标签引入。

css总结：