暑期学习日记9:CSS

土肥圆波太郎

已于 2022-07-17 22:08:31 修改

阅读量129

点赞数

文章标签：学习

于 2022-07-16 22:49:42 首次发布

本文链接：https://blog.csdn.net/weixin_48485475/article/details/125826362

版权

1.什么是CSS？

CSS 指的是层叠样式表* (Cascading Style Sheets)，描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素，CSS 节省了大量工作。它可以同时控制多张网页的布局，外部样式表存储在 CSS 文件中。

2.css的语法。

CSS 规则集（rule-set）由选择器和声明块组成：选择器指向需要设置样式的 HTML 元素。声明块包含一条或多条用分号分隔的声明。每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。多条 CSS 声明用分号分隔，声明块用花括号括起来。

3.CSS选择器

(1)元素选择器根据元素名称来选择 HTML 元素。如下面的语句将<h1>元素居中并设置为红色文本：

h1 {
  color: red;
  text-align: center;
}

（2）id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素。要选择具有特定 id 的元素，需要写一个井号（＃），后跟该元素的 id。如下面的语句将id=“id1”的元素居中并设置为红色文本：

#id1 {
  text-align: center;
  color: red;
}

(3)类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，需要写一个句点（.）字符，后面跟类名。如下面的语句将class=“class1”的元素居中并设置为红色文本：

.class1 {
  text-align: center;
  color: red;
}

(4)可以指定只有特定类的的 HTML 元素会受影响。如下面语句将class=”class1”的<h1>元素居中并设置为红色文本：

h1.class1 {
  text-align: center;
  color: red;
}

(5)可以指定一个元素受多个类影响，如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
.class1 {
  text-align: center;
  color: red;
}
.class2 {
  font-size: 50px;
}
	</style>
</head>

<body>
	<h1>这段文字不受影响</h1>
	<h1 class="class1 class2">这段文字受两个类选择器影响</h1>
</body>
</html>

显示效果为：