CSS 术语词典:注释、属性、选择器等核心概念解析

2025-04-09 14:46 更新

注释

CSS 中的注释用斜杠和星号表示。

示例

/* 这是一个单行注释 */
/* 这是一个
多行注释 */

属性

定义

属性在选择器内定义,通过指定一个属性和一个值来设置。属性和值之间用冒号分隔,每个属性用分号分隔。

语法

selector { property: value; }

示例

h1 { color: blue; }

阅读更多

定义多个属性

每个 CSS 规则可以包含多个属性。每个属性都适用于选择器所选的元素。

示例

h1 {
  font-size: 24px;
  font-weight: bold;
  border: 1px solid black;
  color: pink;
}

内边距(Padding)

内边距是内容和边框(元素边缘)之间的间距。我们可以通过 CSS 调整这个值,使边框更靠近或远离内容。这里,id 为 'box' 的 div 将在四周获得 10 像素的内边距。

示例

#box { padding: 10px; }

阅读更多

外边距(Margin)

外边距是元素周围的空白。外边距越大,元素与其他元素之间的间距就越大。我们可以通过调整外边距使 HTML 元素更靠近或远离彼此。这里,id 为 'box' 的 div 将在上下获得 10 像素的外边距,在左右获得 5 像素的外边距。

示例

#box { margin: 10px 5px 10px 5px; }

阅读更多

字体族(font-family)

字体族属性设置 HTML 元素文本的字体。

语法

p { font-family: Arial, Helvetica, sans-serif; }

阅读更多

选择器

选择器用于在 CSS 中选择要样式的 HTML 部分。你可以使用多种方法来选择元素。

语法

selector { rules; rules; rules; }

阅读更多

类名选择器

你还可以通过类名选择 HTML 元素。与 ID 选择器不同,类选择器选择所有具有匹配类的元素。

示例

a.link { font-size: 12px; }

示例

.jumbo { text-size: 1000px; }

元素选择器

你可以通过简单地使用元素的名称来选择 HTML 元素。

示例

body { background-color: #333; }

示例

h1 { color: blue; }

示例

a { text-decoration: none; }

ID 选择器

ID 选择器用于选择页面上的单个元素。如“标识”一词所示,ID 选择器只选择第一个具有匹配 ID 的元素。

示例

#thatThingINeededToStyle {
  color: blue;
  font-size: 24px;
}

示例

a#codecademy { color: purple; }

阅读更多

属性选择器

HTML 元素也可以通过其属性进行选择。

示例

a[href="http://codecademy.com" rel="external nofollow" target="_blank" ] { color: purple; }

示例

input[type="text"] { width: 100px; }

示例

input[required] { border: 1px red solid; }

阅读更多

子选择器

你还可以通过使用父子嵌套来精确选择元素。通过使用“大于”符号(>),你可以只选择元素的直接子元素,向下只选择一层。

示例

ul > li { display: inline-block; }

示例

ul a { text-decoration: none; }

示例

ul + span { display: inline; }

示例

a ~ h1 { color: blue; }

阅读更多

通用选择器

通用选择器(*)可以用来选择特定范围内的所有元素。请注意,通用选择器是最耗费性能的选择器,应谨慎使用。

示例

* { background-color: blue; }

示例

body * { color: red; }

示例

div > * { color: red; }

阅读更多

伪类选择器

伪类选择器可以用来根据某些规则缩小选择范围。

示例

li:first-child { color: red; }
li:last-child { color: red; }

示例

a:hover { text-decoration: underline; }
a:active { font-weight: bold; }

阅读更多


编程狮相关课程推荐

如果你想深入学习 CSS,可以查看编程狮上的 CSS 入门课程,这些课程涵盖了 CSS 的基础知识到高级技巧,帮助你全面提升 CSS 技能。


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号