CSS教程：了解熟悉CSS语法
什么是CSS？
CSS（Cascading Style Sheets）是用于描述文档展示样式的语言。它可以用来为HTML、XML（包括SVG和XHTML）等文档添加样式。CSS使得我们可以将样式从内容中抽离出来，让HTML页面结构更简洁明了，同时也可以实现各种各样的视觉效果。
CSS语法的基本结构
CSS语言采用选择器（Selector）和声明块（Declaration Block）的方式来规定样式，其中选择器用于定位HTML元素，声明块则是一组属性-值（Property-Value）对。CSS语言里，每一个声明块需要用大括号{}括起来。
选择器
选择器用于选择HTML文档中需要设置样式的元素。常用的选择器有：
- 标签选择器
根据HTML标签名选择元素，如p选择所有段落元素。
- 类选择器
使用.class或tag1.tag2来选择元素，前者选择所有具有该class属性的元素，后者选中既有tag1标签又有tag2标签的所有元素，如.red选择所有class属性值为red的元素，div.para选择所有属于div标签并且class属性值为para的元素。
- ID选择器
使用#id来选择元素，选中ID为id的元素，唯一性保证，如#header选择ID为header的元素。
- 相邻兄弟选择器
使用+来选择与前一个元素相邻的元素，如p + a选择紧接在段落后面的同一级的锚点元素。
- 伪类选择器
使用冒号:来选择元素的特殊状态或行为，如:hover选择元素被鼠标悬停状态下的情形。
属性和值
CSS中的属性和值用于描述元素的样式。属性和值需写在大括号内，并且必须使用分号;作为分隔符，如：
p {
color: red;
font-size: 16px;
}
这个样式声明为所有的段落元素设置了颜色为红色，字号为16像素的字体。这些属性可以被定义在类选择器、ID选择器、标签选择器等所有的选择器中。
CSS实例
示例1
下面是一个使用了类选择器的样式实例，将所有属于类alert的元素的背景颜色设置成黄色：
<!DOCTYPE html>
<html>
<head>
<title>CSS样式实例1</title>
<style>
.alert {
background-color: yellow;
}
</style>
</head>
<body>
<div class="alert">
这是一个警告！
</div>
<p>这是一个段落</p>
</body>
</html>
示例2
下面是一个组合使用类选择器和相邻兄弟选择器的样式实例，将所有属于类para的段落元素之后的锚点元素前面加上一条下划线：
<!DOCTYPE html>
<html>
<head>
<title>CSS样式实例2</title>
<style>
.para + a {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<p class="para">这是一个段落</p>
<a href="#">链接1</a>
<a href="#">链接2</a>
<p>这是另一个段落</p>
<a href="#">链接3</a>
<p class="para">这是第二个段落</p>
<a href="#">链接4</a>
</body>
</html>
这个示例里，只有第一个段落后的锚点元素会被样式设置，因为只有它们是紧挨着的。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS教程：了解熟悉css语法 - Python技术站
微信扫一扫 
支付宝扫一扫 