CSS快速起步

CSS是一组规则，其中每条规则制定了网页中的元素及其样式:

css_demo.html 使用外部css

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="drink">Mocha Caffe Latte</h1>
    <p>Espressso, steamed milk and chocolate syrup, just the way you like it.</p>
</body>
</html>

指定网页元素及其样式 styles.css

/*通过类属性匹配来设置样式属性*/
h1.drink {
    text-align: center;
    color: brown;
}

p {
    font-family: sans-serif;
}

可以看到:

css_demo.html 引用外部 styles.css : <link rel="stylesheet" href="styles.css">
styles.css 配置的 h1.drink 是对象 <h1 class="drink"></h1> 配置为棕色； p 对象设置字体 sans-serif

显示效果如下:

../../../_images/css_demo.png — 采用 styles.css 后页面显示效果

说明

每个样式规则为一个或多个HTML元素指定一个或多个格式化信息，语法结构如下:

样式表语法

selector {
    property: value;
    property: value;
}

selector (选择符) : 浏览器会在整个页面中查找选择符匹配的元素
property (属性) : 也就是样式，如颜色、字体、对齐方式等等
value (值) : 样式值，对于颜色，这个值可以是浅蓝色或淡绿色等等
在CSS中，注释和HTML不同，使用的是 C 注释风格 /* 注释内容 */

备注

除了上述通过独立引用 styles.css 文件来使用样式，还可以直接把样式信息嵌入到元素中(使用 style 属性:

使用 style 属性

<h1 style="color: green">Inline Styles are Sloppy Styles</h1>

或者将全部样式嵌入到 <style> 元素中，这个 <style> 元素放在页面的 <head> 部分

CSS快速起步

说明

参考