<pre name="code" class="html">Css 簡潔
css 選擇器
标簽選擇器
類選擇器
ID選擇器
Css 層疊樣式表 Cascade Stytle Sheet
css 就像網頁的化妝品,讓你可以随意的把相同的内容轉換成
不一樣的外觀,把就是給相似的結構以不同的樣式。
css+div 是目前最流行的前台美工技術,也是web标準推薦的。
使用樣式表css,讓p标簽進行統一變色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
p{
color:red;
}
</style>
</head>
<body>
<center>
<h1>Css樣式表</h1>
<hr>
<p>
<!--<font color="red"> 白日依山盡,</font><br>-->
白日依山盡,<br>
黃河入海流,<br>
欲窮千裡目,<br>
更上一層樓。<br>
</cenetr>
</body>
</html>
p{
color:red;
}
這樣就對所有的p标簽的問題,統一使用紅顔色。
标簽選擇器:
p{font-size:2em;}
類選擇器: .開頭
.info{background:#ff0;}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
p{
color:red;
font-size:2em;
}
li{
color:blue;
font-size:2em;
}
</style>
</head>
<body>
<center>
<h1>Css樣式表</h1>
<hr>
<p>
<!--<font color="red"> 白日依山盡,</font><br>-->
白日依山盡,<br>
黃河入海流,<br>
欲窮千裡目,<br>
更上一層樓。<br>
</p>
<!--<font color="red"> 白日依山盡,</font><br>-->
<li> 白日依山盡,</li>
<li> 黃河入海流,</li>
<li> 欲窮千裡目,</li>
<li> 更上一層樓。</li>
</cenetr>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
p{
color:red;
font-size:2em;
}
li{
color:blue;
list-style:none;
font-size:2em;
}
.first{
color:red;
}
</style>
</head>
<body>
<center>
<h1>Css樣式表</h1>
<hr>
<p>
<!--<font color="red"> 白日依山盡,</font><br>-->
白日依山盡,<br>
黃河入海流,<br>
欲窮千裡目,<br>
更上一層樓。<br>
</p>
<!--<font color="red"> 白日依山盡,</font><br>-->
<li class=first> 白日依山盡,</li>
<li> 黃河入海流,</li>
<li> 欲窮千裡目,</li>
<li> 更上一層樓。</li>
</cenetr>
</body>
</html>
ID選擇器:
#third{
color:green;
}
<!--<font color="red"> 白日依山盡,</font><br>-->
<li class=first> 白日依山盡,</li>
<li> 黃河入海流,</li>
<li id="third"> 欲窮千裡目,</li>
<li> 更上一層樓。</li>
組合選擇器:
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)