一、什么是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;
}