CSS入門之樣式表與選擇器詳解
CSS用來定義HTML頁面中文字顯示樣式，還有類、層等特性，還可以對文字重疊、定位等。引入CSS到HTML中，主要是因為在傳統的HTML上控制文字顯示樣式和版面非常難，引入CSS之後，控制方式變得簡單，頁面也變得更加美觀、豐富。
所以CSS主要就是用來提供樣式，樣式一般用樣式表來描述，每一種樣式對應一種樣式表。
一 樣式表
一個樣式表的組成有三部分：選擇符、屬性、屬性值。看下面代碼中注釋：
<style>
h2 { <!--h2是選擇符，又稱選擇器，樣式表的標記-->
font-size:宋體; <!--font-size是屬性，宋體就是它的值，兩者通過:號隔開-->
}
</style>
屬性：可以指定字體，背景，布局，邊界等。
註：樣式表包含在<style>中，<style>標籤可以位於<head>標籤中，也可以與<head>標籤並列。
二 CSS選擇器
CSS常用選擇器有標記選擇器，類別選擇器，ID選擇器等。使用選擇器可以對不同HTML標記進行控制，從而實現各種效果。
1）標記選擇器
標記選擇器定義的代碼示例：
<style>
a {
font-size:9px; <!--設置字體大小-->
color:#F93; <!--設置字體顏色-->
}
</style>
標記選擇器聲明哪些標記採用對應的CSS樣式。比如上面代碼中的a選擇器，聲明頁面中所有的<a>標記的樣式風格。如果選擇器是img，則對應<img>；如果選擇器是table，則對應<table>標記。瀏覽器解析時，會自動為這些標記應用對應的標記選擇器，不需要再HTML文本編輯時顯式指定。
2）類別選擇器
標記通過class屬性來應用類別選擇器。
演示類別選擇器：（注意類別選擇器的定義形式）
<!--演示類別選擇器-->
<html>
<head>
<title>演示類別選擇器</title>
</head>
<!--一下為定義的CSS樣式-->
<style>
.one { <!--定義類名為one的類別選擇器-->
font-family:宋體; <!--設置字體-->
font-size:24px; <!--設置字體大小-->
color:yellow; <!--設置字體顏色-->
}
.two {
font-family:宋體;
font-size:16px;
color:red;
}
.three {
font-family:宋體;
font-size:12px;
color:red;
}
.four {
color:green;
}
</style>
<body>
<h2 class="one">
應用了選擇器one <!--定義了樣式後頁面會自動載入樣式-->
</h2>
<p> 正文內容1 </p>
<h2 class="two">
應用了選擇器two
</h2>
<p>正文內容2</p>
<h2 class="three four">
應用了選擇器three
</h2>
<p>正文內容3</p>
</body>
</html>
瀏覽器效果：
註：HTML標記可以應用多種類別選擇器。比如<h2 class="three four">（上述演示代碼中有）。
3）ID選擇器
HTML標記通過id屬性來應用ID選擇器，因為每一個標記的id都不同，所以一個ID選擇器只能應用一次。
ID選擇器演示代碼如下：
<!--演示ID選擇器-->
<html>
<head>
<title>演示ID選擇器</title>
</head>
<!--定義ID選擇器-->
<style>
#first {
font-size:18px;
}
#second {
font-size:24px;
}
#three {
font-size:36px;
}
</style>
<body>
<p id="first">ID選擇器</p>
<p id="second">ID選擇器</p>
<p id="three">ID選擇器</p>
</body>
</html>
瀏覽器打開文件截圖：
※Docker-Window環境下安裝，使用入門hello-world示例
TAG:程序員小新人學習 |