1. CSS简介

层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。

CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。其中HTML负责确定网页中有哪些内容，CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。CSS可以零散地直接添加在要应用样式的网页元素上，也可以集中化内置于网页、链接式引入网页以及导入式引入网页。

CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前，几乎所有的HTML文件内都包含文件显示的信息，比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等等都必须一一在HTML文件内列出，有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来，简化HTML文件，这些信息被放在一个辅助的，用CSS语言写的文件中。HTML文件中只包含结构和内容的信息，CSS文件中只包含样式的信息。

2. CSS 内容

CSS由多组“规则”组成。每个规则由“选择器”（selector）、“属性”（property）和“值”（value）组成：

  • 选择器（Selector）：多个选择器可以半角逗号（,）隔开。
  • 属性（property）：CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。
  • 值（value）：指属性接受的设置值，多个关键字时大都以空格隔开。

属性和值之间用半角冒号（:）隔开，属性和值合称为“特性”。多个特性间用“;”隔开，最后用“{ }”括起来。

示例：

<style type="text/css">

body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}

p.no2 {background-color: gray; padding: 20px;}

</style>

效果：

层叠样式表less 层叠样式表简称_CSS


选择器

（1）基本选择器

  • 标签选择器（h1，p等）——elementname
  • 类别选择器（class）——.elementname
  • ID选择器（ID）——#elementname
  • 万用选择器——* ns|* *|*
  • 属性选择器（也翻译为“通配符选择器”）——[attribute]

（2）属性选择器

属性选择器允许用户自定义属性名称，而不仅仅限于id，class属性。

例子：

p{
    font-size: 110%;
    font-family: garamond, sans-serif;
}
h2{
    color: red;
    background: white;
}
.highlight{
    color: red;
    background: yellow;
    font-weight: bold;
}

这个例子有三个选择器：p，h2和.highlight。

3. 示例

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
    <style type="text/css">
    body{
        background:#fff;
        color:#777;
    }
    h1{
        font:bold italic sans-serif;
        color:green;
    }
    </style>
</head>
<body>
    <h1>這個句子用綠色、粗體和斜體字顯示</h1>
    <p>普通字。</p>
    <h1 style="color:red; background:green;">
    這個句子用大的、紅色斜體字在綠色背景上顯示，通用的h1樣式在這裡被取代了。
    </h1>
    <h1 style="color: green;"><strong><em>這個句子用綠色、粗體和斜體字顯示</em></strong></h1>
</body>
</html>

参考：

  1. wiki CSS