CSS: Cascading Style Sheets,层叠样式表
1. 有4种将样式表加入到HTML文档中的方法: 内联,嵌入,外部,输入。
<meta http-equiv="content-style-type" content="text/css">
<head>
<style type="text/css" media="screen, projection">
p {font-size: 30pt; color:red;text-decroration:underline}
</style>
</head>
<link rel="stylesheet" href="my.css" type="text/css" media="screen">
</head>
<head>
<style type="text/css" media="screen, projection">
@import url(my.css);
p {font-size: 30pt; color:red;text-decroration:underline}
</style>
</head>
如有重复的定义,以最后一次的样式为准。
2. 样式规则的选择器(selector):HTML selector, class selector, ID selector,以及其他的关联,组合,伪元素选择器。
1) HTML selector 适用于HTML的标签,如p, div, td等,如果在css中将某个html标签定义成了selector,那所有这个html标签都要按照样式所定义的语句来显示。
2) class selector可对于同一种标签内的不同类别进行分开的样式控制。
<html>
<head>
<style type="text/css" media="screen, projection">
p.first{background:yellow}
p.second{background:red}
.common{background:green}
</style>
</head>
<body>
<p class="first"> This is a CSS test.</p>
<p class="second"> This is second line.</p>
<p class="common"> THis is a common.</p>
<h1 class="common">hello</h1>
</body>
</html>
3) ID selector用来对特定的HTML元素进行样式控制,因为一个网页文件中只能有一个元素使用某一个ID属性值。
<style>
#blue{color:blue}
</style>
<body>
<span ID="blue">blue text here</span>
</body>
关联选择器
p em{background: yellow}
组合选择器
h1, h2, h3{color: red}
伪元素选择器
a:link {color:red}
a:hover {background:black}
p:first-line {font-variant:small-caps; font-weight:bold}