关于CSS样式的添加

最新推荐文章于 2026-01-08 23:43:28 发布

原创最新推荐文章于 2026-01-08 23:43:28 发布 · 392 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了CSS的基本概念，包括选择器（元素、ID、类、属性和伪类）、盒子模型的组成部分（内边距、边框和外边距），以及如何使用CSS控制元素的尺寸、颜色和布局，如body元素的居中和img元素的块级化处理。

1.CSS 是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。

2.比如代码：

p {
  color: red;
}

①除了选择器部分，每个规则集都应该包含在成对的大括号里（{}）。

②在每个声明里要用冒号（:）将属性与属性值分隔开。

③在每个规则集里要用分号（;）将各个声明分隔开。

4.不同类型的选择器：

元素选择器（也称作标签或类型选择器）	所有指定类型的 HTML 元素	`p` 选择 `<p>`
ID 选择器	具有特定 ID 的元素。单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID	`#my-id` 选择 `<p id="my-id">` 或 `<a id="my-id">`
类选择器	具有特定类的元素。单一页面中，一个类可以有多个实例	`.my-class` 选择 `<p class="my-class">` 和 `<a class="my-class">`
属性选择器	拥有特定属性的元素	`img[src]` 选择 `<img src="myimage.png">` 但不是 `<img>`
伪类选择器	特定状态下的特定元素（比如鼠标指针悬停于链接之上）	`a:hover` 选择仅在鼠标指针悬停在链接上时的 `<a>` 元素

5.CSS 布局主要是基于盒子模型。在你的页面上占用空间的每个盒子都有类似的属性：

比如：

body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

6.图像居中

img {
  display: block;
  margin: 0 auto;
}

<body> 元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是行级元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用 display: block 给予其块级行为。