CSS 简介
CSS简介
CSS(Cascading Style Sheets)是一种用于样式表的语言,可以用来描述HTML和XML等标记语言的外观和格式。CSS文件通常以 .css 文件扩展名命名,声明CSS样式后,浏览器将自动应用该样式。
CSS的格式
CSS代码包含两个主要部分:选择器和声明块。选择器指定要应用样式的元素,声明块则指定该元素的样式属性和值。下面是一个基本的CSS样式定义:
h1 {
color: red;
font-size: 32px;
text-align: center;
}
选择器指定了要应用样式规则的元素,本例中是h1。然后,声明块包含一个或多个属性-值对,指定将要应用的样式。
选择器
选择器允许开发人员选定要应用样式的HTML元素。例如,将以下样式应用于所有h1元素:
h1 {
color: red;
}
选择器可以更细化,例如只对ID为“main”的元素应用样式,使用“#”作为前缀:
#main {
background-color: blue;
}
还可以使用类选择器,以“.”作为前缀,应用于具有指定类的所有元素:
.my-class {
font-weight: bold;
}
声明块
声明块包含一个或多个属性-值对,指定将应用的样式。每个属性都有一个值,它们共同决定如何显示元素。例如:
h1 {
color: red;
font-size: 32px;
text-align: center;
}
包含三个属性-值对,指定应用红色文字,32像素字体大小,居中对齐。
继承
继承是指一个元素会继承其父元素的某些样式属性。某些属性是不可继承的,例如背景颜色(background-color)。例如,假设我们定义一个样式表,将所有段落文字定义为黑色:
p {
color: black;
}
如果我们将一个ID为“footer”的元素定义为段落的父元素,并为其制定一个红色背景:
#footer {
background-color: red;
}
则应用后将会看到带有红色背景的段落。继承使得在多个元素之间更容易维护和共享样式。
级联
“级联”指的是当两个或更多样式规则适用于同一元素时,决策将采用哪个规则。级联规则基于三个因素:顺序,优先级和特异性。
顺序指的是样式规则表现在源代码中的位置,并且后面的规则通常具有更高的优先级。优先级基于特定的选择器类型,例如ID选择器具有比普通选择器更高的优先级。特异性则基于特定规则的选择器数量和组成。
例如,考虑以下样式表:
p {
color: black;
}
#footer p {
color: red;
}
假设我们有以下HTML:
<div id="footer">
<p>Hello, world!</p>
</div>
此时“Hello, world!”将会显示红色字体,因为 ID 选择器的特定性和样式表的顺序决定了其优先级。
总结
CSS是一种强大的语言,可用于使HTML和XML网页更具表现力和功能性。它允许开发人员指定其网站的外观和格式,从而实现个性化。熟练掌握选择器、声明块、继承和级联等概念,并可帮助开发人员在编写样式时优化CSS。