236
汽車大全
CSS樣式選擇器
1.css選擇器
（1）標記選擇器: 選擇器 { 屬性1：值；屬性2：值 }
用來指定確定標記的樣式
如：<style>
h1 { color：red；font-size：25px；}
</style>
（2）類別選擇器: .class（類別名稱）{ 屬性1：值；屬性2：值；}
如：<style type="text/css">
.one{color:red;font-size:18px; }
</style>
對應的：
<body>
<p >class選擇器</p>
（3）ID選擇器: #id（id選擇器） { 屬性1：值；屬性2：值； }
如：<style type="text/css">
#one{ font-weight:bold; }
#two{ font-size:30px; color:#009900; }
</style>
對應的：
<body>
<p >ID選擇器1</p>
<p >ID選擇器2</p>
</body>
2. 集體聲明
<style type="text/css">
h1, h2, h3, h4, h5, p{ color:purple; font-size:15px; }
h2.special, .special, #one{ text-decoration:underline; }
</style>
對應的：
<body>
<h1>集體聲明h1</h1>
<h2 >集體聲明h2</h2>
<h3>集體聲明h3</h3>
<h4>集體聲明h4</h4>
<h5>集體聲明h5</h5>
<p>集體聲明p1</p>
<p >集體聲明p2</p>
<p >集體聲明p3</p>
</body>
3.css的嵌套
<html>
<head>
<title>CSS選擇器的嵌套聲明</title>
<style type="text/css">
<!--
p b{ /* 嵌套聲明 */
color:maroon; /* 顏色 */
text-decoration:underline; /* 下劃線 */
}
-->
</style>
</head>
<body>
<p>嵌套使<b>用CSS</b>標記的方法</p>嵌套之外的<b>標記</b>不生效
</body>
</html>
4.css的繼承
如：
<html>
<head>
<title>父子關係</title>
<base target="_blank">
<style>
<!--
h1{
color:red; /* 顏色 */
text-decoration:underline; /* 下劃線 */
}
h1 em /* 嵌套選擇器 */
{
color:#004400; /* 顏色 */
font-size:40px; /* 字體大小 */
}
-->
</style>
</head>
<body>
<h1>祖國的首都<em>北京</em></h1>
<p>歡迎來到祖國的首都<em>北京</em>，這裏是全國<strong>政治、<a href="economic.html"><em>經濟</em></a>、文化</strong>的中心</p>
<ul>
<li>在這裏，你可以：
<ul>
<li>感受大自然的美麗</li>
<li>體驗生活的節奏</li>
<li>領略首都的激情與活力</li>
</ul>
</li>
<li>你還可以：
<ol>
<li>去八達嶺爬長城</li>
<li>去香山看紅葉</li>
<li>去王府井逛夜市</li>
</ol>
</li>
</ul>
<p>如果您有任何問題，歡迎<a href="contactus">聯係我們</a></p>
</body>
</html>效果圖：
最後更新：2017-04-02 03:42:39