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技术站

CSS教程：了解熟悉css语法

CSS教程：了解熟悉CSS语法

什么是CSS？

CSS语法的基本结构

选择器

属性和值

CSS实例

示例1

示例2

相关文章