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 {
    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 后页面显示效果

参考