web前端開發學習筆記-06-css選擇器
阿新 • • 發佈：2018-12-23
原課程在這裡：https://www.icourse163.org/learn/BJFU-1003382003?tid=1003609002#/learn/announce
標籤選擇器
<style type="text/css">
body{background-color:#fff;
text-align:center;
font-size:12px;}
h1{font:"黑體";font-size:20px;}
p{color:red;font-size:16px;}
hr{width:200px;}
</style>
--------------------------------------
< 
類別選擇器
<style type="text/css">
p {font-size:12px;}
.one{font-size:18px;}
.two{font-size:24px;}
</style>
----------------------------
<body>
<p class="one">類別1</p>
<p class 
ID選擇器
<style type="text/css">
#one{font-size:12px;}
#two{font-size:24px;}
</style>
---------------------------
<body>
<p id="one">文字1</ 
巢狀宣告
<style type="text/css">
p span{
color:red;
}
</style>
<body>
<p><span>固態硬碟</span>具有傳統機械硬碟不具備的快速讀寫、質量輕、能耗低以及體積小等特點，同時其劣勢也較為明顯。</p>
</body>
集體宣告
<style type="text/css">
h1,p{text-align:center;}
</style>
------------------------------
<body>
<h1>web前端開發</h1>
<p>web前端開發</p>
</body>
全域性宣告
<style type="text/css">
*{text-align:center;}
</style>
---------------------------
<body>
<h1>web前端開發</h1>
<p>web前端開發</p>
<h2>web前端開發</h2>
</body>
混合
多個class選擇器混用，用空格分開
<div class="one yellow left">......</div>
id和class混用
<div id="my" class="one yellow left">...</div>
id選擇器不可以多個同時使用