CSS基础
<p>放在<div>里面
内联式样式表
直接对html写样式
<p style="font-size:50px; color:red">example</p>
嵌入式样式表
<head>
<style type="text/css">
<!--
p {font-size:50px; color:red}
//-->
</style>
</head>
<body>
<p>example</p>
</body>
外部样式表
style/test.css
p {font-size:50px; color:red}
test.html
<head>
<link rel="stylesheet" type="text/css" href="style/test.css">
</head>
<body>
<p>example</p>
</body>
输入式样式表
style/demo.css
div {color:yellow;font-size:4cm;}
style/test.css
@import url(demo.css);
test.html
<head>
<link rel="stylesheet" type="text/css" href="style/test.css">
</head>
<body>
<div>example</div>
</body>
样式规则的选择器: {}前面的标签
html selector: p {font-size:50px; color:red}
class selector: 在同一个页面,类是可以重复的
<head>
<style type="text/css">
<!--
p.one {color:red; font-size:1cm; background: green}
p.two {color:yellow; font-size:2cm; background: blue}
.three {color:blue; font-size:3cm; background: yellow}
.four {color:grey; font-size:4cm; background: red}
//-->
</style>
</head>
<body>
<p class="one">example 1</p>
<p class="two">example 2</p>
<div class="three">example 3</div>
<p class="four">example 4</p>
<a class="four">example 4</a>
</body>
id selector: 在同一个页面,id是不能重复(通常用于配合javascript操作)
<head>
<style type="text/css">
<!--
#one {color:red; font-size:1cm; background: green}
#two {color:yellow; font-size:2cm; background: blue}
#three {color:blue; font-size:3cm; background: yellow}
#four {color:grey; font-size:4cm; background: red}
//-->
</style>
</head>
<body>
<p id="one">example 1</p>
<p id="two">example 2</p>
<div id="three">example 3</div>
<p id="four">example 4</p>
--<a class="four">example 4</a> XX,id在同一页面不能重复.
</body>
关联选择器(中间空格隔开):
标签嵌套
center p em{font-size:50px; color:red}
<center><p><em>example,em标签需要在p标签里面,p标签需要在center标签里面</em></p></center>
类嵌套
.one .two em{font-size:50px; color:red}
<center class="one"><p class="two"><em>example,em标签需要在p标签里面,p标签需要在center标签里面</em></p></center>
组合选择器(中间用逗号隔开):
p,div,a,hl,.one,#two{font-size:50px; color:red}
<p>example</p><div>example</div><em class="one">example</em>
伪元素选择器(冒号隔开):
a:link{font-size:1cm; color:red}
a:hover{font-size:2cm; color:green}
a:visited{font-size:3cm; color:yellow}
<a href="#">example</a>
a.one:link{font-size:1cm; color:red}
a.two:hover{font-size:2cm; color:green}
a.three:visited{font-size:3cm; color:yellow}
<a class="one" href="#">example 1</a>
<a class="two" href="#">example 2</a>
<a class="three" href="#">example 3</a>
