<香港科技大学html+css+js课堂笔记>week1--CSS部分
1.style:
格式：
<!DOCTYPE html>
<html>
<head>
<style>
. . . style rules for this web page go here . . .
</style>
</head>
<body>
. . . elements which use the style rules go here . . .
</body>
</html>
例子：
eg1(方法1):
<!DOCTYPE html>
<html>
<head>
<title>Demonstration of Linking to a Style File</title>
<link href="html_example_css_file.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>My first heading</h1>
<p>My first paragraph</p>
<h1>My second heading</h1>
<p>My second paragraph</p>
</body>
</html>
eg2（方法2）:
<html>
<head>
<style>
h1 {color:purple}
p {color:blue}
</style>
</head>
<body>
<h1>My first heading</h1>
<p>My first paragraph</p>
<h1>My second heading</h1>
<p>My second paragraph</p>
</body>
</html>
eg3（方法3）:
<html>
<head>
<style>
#rainbowColors {background: grey}
#red {background: red}
#orange {background: orange}
#yellow {background: yellow}
#green {background: green}
#blue {background: blue}
#indigo {background: indigo}
#violet {background: violet}
</style>
</head>
<body>
<ul id="rainbowColors">
<li id="red">Red</li>
<li id="orange">Orange</li>
<li id="yellow">Yellow</li>
<li id="green">Green</li>
<li id="blue">Blue</li>
<li id="indigo">Indigo</li>
<li id="violet">Violet</li>
</ul>
</body>
</html>
eg4(方法4)：using class
<html>
<head>
<style>
.zappy {color:purple; background:yellow}
.wow {color:blue; background:lightgrey}
</style>
</head>
<body>
<h1 class="zappy">My first heading</h1>
<p class="wow">My first paragraph</p>
<h1 class="wow">My second heading</h1>
<p class="zappy">My second paragraph</p>
</body>
</html>
eg5: using multiple class
<html>
<head>
<style>
.zappy {color:blue}
.spicy {color:red}
.wow {background:lime}
.lol {background:lightgrey}
</style>
</head>
<body>
<p class="zappy wow">My first paragraph</p>
<p class="zappy lol">My second paragraph</p>
<p class="spicy wow">My third paragraph</p>
<p class="spicy lol">My fourth paragraph</p>
</body>
</html>
2.more style:
eg1:
<html>
<head>
<style>
li {background:yellow}
</style>
</head>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li style="background:purple">Three</li>
<li>Four</li>
</ul>
</body>
</html>
eg2:
<html>
<head>
<style>
ul li {background:yellow}
</style>
</head>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
</body>
</html>
eg3:
<html>
<head>
<style>
a:link {background:yellow}
a:visited {background:pink}
a:hover {background:lightgreen}
a:active {background:purple}
li:empty {background:brown}
</style>
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="http://www.cnn.com">CNN</a>
<a href="http://www.twitter.com">Twitter</a>
<a href="http://www.facebook.com">Facebook</a>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li></li>
</ol>
</body>
</html>
