CSS 术语词典:注释、属性、选择器等核心概念解析
注释
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 技能。
更多建议: