id 选择器 #red {color:red;} #green {color:green;} <p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p> 对象选择器 h1,h2,h3,h4,h5,h6 { color: green; } body { font-family: Verdana, sans-serif; } 派生选择器 li strong { font-style: italic; font-weight: normal; } <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol>
类选择器 .center {text-align: center}
<h1 class="center"> This heading will be center-aligned </h1>
<p class="center"> This paragraph will also be center-aligned. </p>
属性选择器
[title] { color:red; }
input[type="text"] { 150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; }
input[type="button"] { 120px; margin-left:35px; display:block; font-family: Verdana, Arial; }
CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。
如何插入样式表： 外部样式表 <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
内部样式表 <head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head>
内联样式 <p style="color: sienna; margin-left: 20px"> This is a paragraph </p>