CSS的基本语法

发布于浏览量 98 by

CSS用于定义HTML页面元素的样式，基本语法如下：

这样一个完整的CSS代码块称为规则集，规则集中各部分释义如下：

选择器（Selector）

HTML元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是p元素）。要给不同元素添加样式只需要更改选择器就行了。

声明（Declaration）

一个单独的规则，如color: red;用来指定元素中的文本颜色属性。

属性（Properties）

指定需要改变的HTML元素属性（本例中color就是<p>元素的文本颜色属性）。

属性的值（Property value）

在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了red之外还有很多属性值可以用于color）。

语法部分要注意：

  • 每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
  • 在每个声明里要用冒号（:）将属性与属性值分隔开。
  • 在每个规则集里要用分号（;）将各个声明分隔开。

有三种方式可以引用CSS样式：

第一种是使用外部样式，步骤如下：

1. 首先新建一个styles文件夹，在其中新建一个style.css文件，然后在这个style.css文件上定义元素样式，例如：

p {
    color: red;
    width: 500px;
    border: 1px solid black;
}

2. 编辑HTML页面，然后将下面一行粘贴到文档头（也就是<head>和</head>标签之间）。

<link href="styles/style.css" rel="stylesheet">

其中href属性指定了目标文件（样式表）的路径，rel属性指定了目标文件和当前文档的关系。

注意：必须定义rel="stylesheet"，否则样式表不会生效。

之后保存并刷新页面，就可以看到页面上段落文本的颜色变成了红色，段落的宽度变成了500px，且段落有实线边框，边框宽度为1px，颜色为黑色。

第二种是使用内部样式，在<head>元素内创建一个<style>元素，并在<style>内定义样式：

<head>
    <style>
        p {
            color: red;     
            width: 500px;     
            border: 1px solid black; 
        }
    </style>
</head>

第三种是使用内联样式（行内样式），直接把元素的样式定义在元素内部：

<p style="color: red; width: 500px; border: 1px solid black;">Hello, World!</p>

注意：内联样式只能定义单个<p>元素，而前面讲到的外部引用和内部引用是定义页面上的所有<p>元素。

以上三种方式都可以定义元素样式，如果同时应用了多种定义方式，且定义的样式属性存在重合，则采用“就近原则”生效，即：内联>内部>外部样式。

比如外部样式表定义<p>元素的颜色为red，内部的<style>定义<p>元素的颜色为yellow，内联样式定义<p>元素的颜色为blue，则最终<p>元素内的文本颜色是blue；

如果删除<p>的内联样式，则最终<p>元素内的文本颜色为yellow。