目录
-
内部样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<style>
h1,h2 {
font-family:sans-serif;
color:gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color:maroon;
}
</style>
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<p>
<img src="images/drinks.gif" alt="Drinks">
</p>
<p>
Join us any evening for refreshing
<a href="beverages/elixir.html">elixirs</a>,
conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring Your Own Web Server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the center
of downtown Webville. If you need help finding
us, check out our
<a href="about/directions.html">detailed directions</a>.
Come join us!
</p>
</body>
</html>
-
外部样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<link type="text/css" rel="stylesheet" href="lounge.css">
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<p>
<img src="images/drinks.gif" alt="Drinks">
</p>
<p>
Join us any evening for refreshing
<a href="beverages/elixir.html">elixirs</a>,
conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring Your Own Web Server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the center
of downtown Webville. If you need help finding
us, check out our
<a href="about/directions.html">detailed directions</a>.
Come join us!
</p>
</body>
</html>
-
font-famliy继承
如果样式影响文本外观这继承，否则不继承。当子元素有特定样式时，可以覆盖继承。
-
css注释
/*css注释
p {
corlor:blue;
}
上述无效
*/-
类（class）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge Elixirs</title>
<style>
p.greentea {
color:green;
}
<!--
多个成员：
.greentea{
color:green;
}
一个元素属于多个类
<p class="class1 class2 class3"></p>
-->
</style>
</head>
<body>
<h1>Our Elixirs</h1>
<h2>Green Tea Cooler</h2>
<p class="greentea">
<img src="../images/green.jpg" alt="Green Tea Cooler">
Chock full of vitamins and minerals, this elixir
combines the healthful benefits of green tea with
a twist of chamomile blossoms and ginger root.
</p>
<h2>Raspberry Ice Concentration</h2>
<p>
<img src="../images/lightblue.jpg" alt="Raspberry Ice Concentration">
Combining raspberry juice with lemon grass,
citrus peel and rosehips, this icy drink
will make your mind feel clear and crisp.
</p>
<h2>Blueberry Bliss Elixir</h2>
<p>
<img src="../images/blue.jpg" alt="Blueberry Bliss Elixir">
Blueberries and cherry essence mixed into a base
of elderflower herb tea will put you in a relaxed
state of bliss in no time.
</p>
<h2>Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/red.jpg" alt="Cranberry Antioxidant Blast">
Wake up to the flavors of cranberry and hibiscus
in this vitamin C rich elixir.
</p>
<p>
<a href="../lounge.html">Back to the Lounge</a>
</p>
</body>
</html>
-
多个选择器选择一个元素
选择更特定的即描述最精确的，若精确程度一致，则使用最后给出的样式，即挨个整一遍。
175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
