第三章 CSS
3.1 CSS的几种设置
3.1.1 内联样式表
3.1.2 嵌入样式表
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css" media="screen, projection">
<!--
P
{
FONT-SIZE:20pt;COLOR:blue;FONT-FAMILY:宋体;LIST-STYLE-TYPE:circle;TEXT-DECORATION:underline；
}
-->
</style>
</head>
<body>
<p>sdfsdf</p>
</body>
</html>
3.1.3 外部样式表i
StyleSheet.css
P
{
FONT-SIZE:20pt;
COLOR:blue;
FONT-FAMILY:宋体;
LIST-STYLE-TYPE:circle;
TEXT-DECORATION:underline;
}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<link rel="stylesheet" href="StyleSheet.css" type="text/css" media="screen" />
</head>
<body>
<p>This is a css test.</p>
</body>
</html>
3.1.4 输入样式表
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css" media="screen" >
<!--
@import url(http://www.it315.org/style.css);
@import url(/stylesheets/style.css);
P{ background-color:yellow;color:black;}
-->
</style>
</head>
<body>
<p>This is a css test.</p>
</body>
</html>
3.2 样式规则的选择器
3.2.1 HEML selector
就是HEML标签
3.2.2 class selector
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css">
<!--
p.stop{color:red;}
p.warning{color:yellow;}
p.normal{color:green;}
-->
</style>
</head>
<body>
<p class="stop">paragraph1</p>
<p class="warning">paragraph2</p>
<p class="normal">paragraph3</p>
</body>
</html>
3.3.3 ID selector
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css">
<!--
#yellowone{color:red;}
-->
</style>
</head>
<body>
<span id="yellowone">text here</span>
</body>
</html>
3.3.4 关联选择器
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>文本标签的综合例子</title>
<style type="text/css">
<!--
p i{backgrond-color:yellow;color:red;}
-->
</style>
</head>
<body>
<p><i>斜体字文本</i></p>
</body>
</html>
3.3.5 组合选择器
<head>
<title>无标题页</title>
<style type="text/css">
<!--
h1,h2,h3,h4,h5,h6{background-color:yellow;color:red;}
-->
</style>
</head>
<body>
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
</body>
</html>
3.3.6 伪元素选择器
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css">
<!--
A:link {color:red;}
A.active {color:red;font-size:125%;}
A.visited {color:red;font-size:80%;}
A.first-line {font-variant:small-caps;font-weight:bold;}
A.first-letter {font-size:300%;float:left}
-->
</style>
</head>
<body>
<p>
<a href="HTMLPage.htm">第一页</a>
</p>
</body>
</html>
