css入门教程（一）css的创立与选择符

一、什么是css，如何创建css

css是层叠样式表，是w3c拟定的标准样式语言，有三种方式创建css：

• 外部样式表<link rel="stylesheet" type="text/css" href="mystyle.css" />
• 内部样式表<style type="text/css"> hr {color: sienna;}</style>
• 内联样式<p style="color: sienna; margin-left: 20px">sth</p>

内联样式的优先级大于内部样式，内部样式的优先级大于外部样式表

二、css的语法规则

selector{property:value; property:value}

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

其中selector是选择符。在例子中就是h3。

三、选择符

1.类选择符

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

2.子类选择符

第一种是该类元素子类的实例，第二种是所有元素子类的实例

td.fancy {
	color: #f60;
	background: #666;
	}

<td class="fancy">

.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>

3.嵌套选择符

li strong {
    font-style: italic;
    font-weight: normal;
  }

<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>

4.id选择符

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

5.伪类与伪元素选择符

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

6.选择符分组

h1,h2,h3,h4,h5,h6 {
  color: green;
  }