一、CSS基本語(yǔ)法
在前面兩節(jié)我們主要講解了HTML標(biāo)簽，本節(jié)開(kāi)始講解CSS的基本概念。
CSS(層疊樣式表)控制著網(wǎng)頁(yè)的樣式，例如我們之前編寫的HTML文件，文字的顏色都是默認(rèn)的黑色，如果希望將文字設(shè)置成其他顏色，就需要CSS了，可以在HTML文件中填寫如下代碼，即可把一個(gè)h1標(biāo)簽的文字設(shè)置成紅色;
1<body>2<style>3/* CSS注釋：用來(lái)備注一些代碼講解，不會(huì)被當(dāng)做代碼執(zhí)行。 */4? ? h1{5? ? ? ? color:red;6}7</style>8<h1>我是一個(gè)標(biāo)題</h1>9</body>
我們?cè)賮?lái)總結(jié)一下CSS的語(yǔ)法結(jié)構(gòu)。
1<style>2/* selector：選擇器，用來(lái)找到需要被設(shè)置樣式的元素。 */3/* property:屬性名稱 */4/* value:屬性值 */5? ? selector{6? ? ? ? property:value;7}8</style>
在第一個(gè)CSS案例中，h1是一個(gè)選擇器，可以找到HTML文件中所有的h1標(biāo)簽，花括號(hào)中的color是屬性名稱，它決定我們可以修改元素的哪個(gè)樣式，red就是屬性值，它決定我們?cè)O(shè)置的樣式到底是什么。
了解了基本語(yǔ)法之后，我們來(lái)編寫一個(gè)有樣式的html文件，將h1標(biāo)簽中的文字設(shè)置成紅色，完整代碼如下所示。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Document</title> 6<style> 7? ? ? ? h1{ 8? ? ? ? ? ? color:red; 9}10</style>11</head>12<body>13<h1>hello css</h1>14</body>15</html>
二、CSS選擇器
上面我們已經(jīng)介紹了，選擇器用來(lái)找到需要被設(shè)置樣式的元素，下面我們介紹常用的幾種選擇器。
元素選擇器
類選擇器
id選擇器
通配符選擇器
元素選擇器：h1,div,img等等
元素選擇器是直接通過(guò)標(biāo)簽的名字找到指定元素。例如下面的例子，可以將所有h1標(biāo)簽字體顏色設(shè)置為紅色，將所有img標(biāo)簽的寬度設(shè)置為200像素，高度為100像素。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Document</title> 6<style> 7? ? ? ? h1{ 8? ? ? ? ? ? color:red; 9}10? ? ? ? img{11? ? ? ? ? ? width:200px;12? ? ? ? ? ? height:100px;13}14</style>15</head>16<body>17<h1>這是一個(gè)標(biāo)題標(biāo)簽</h1>18<img src="" alt="">19</body>20</html>
類選擇器
類選擇器是通過(guò)html元素的class屬性找到元素。選擇器的語(yǔ)法是在class屬性名前添加一個(gè)【.】。如下面的案例所示。此案例將所有class值為info的元素背景色設(shè)置為藍(lán)色。
1.info{2? ? background-color:blue;3? ? width:200px;4? ? height:100px;5}
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Document</title> 6<style> 7? ? ? ? .info{ 8? ? ? ? ? ? background-color:blue; 9? ? ? ? ? ? width:200px;10? ? ? ? ? ? height:100px;11}12</style>1314</head>15<body>16<div class="info"></div>17</body>18</html>
id選擇器
id選擇器是通過(guò)html元素的id屬性找到元素。選擇器的語(yǔ)法是在id屬性名前面添加一個(gè)【#】。如下面的案例所示。此案例將所有id值為info的元素背景色設(shè)置為藍(lán)色。
在學(xué)習(xí)id選擇器的時(shí)候，大家可能會(huì)糾結(jié)一個(gè)問(wèn)題，“什么時(shí)候用id選擇器，什么時(shí)候用class選擇器？”這個(gè)問(wèn)題不同的公司有不同的標(biāo)準(zhǔn)，在本套電子書中，建議所有代碼都使用class選擇器，id選擇器只做了解即可。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Document</title> 6<style> 7? ? ? ? #info{ 8? ? ? ? ? ? width:200px; 9? ? ? ? ? ? height:100px;10? ? ? ? ? ? background-color:blue;11}12</style>13</head>14<body>15<div id="info"></div>16</body>17</html>
通配符選擇器
通配符選擇器可以找到html元素中的所有元素，代碼如下所示，此案例可以將所有元素的外邊距和內(nèi)邊距都設(shè)置為0px。關(guān)于margin和padding兩個(gè)屬性，我們會(huì)在【第06節(jié)：盒子模型】中繼續(xù)講解。
1* {2? ? margin:0px;3? ? padding:0px;4}
通過(guò)我們此前的學(xué)習(xí)，已經(jīng)了解到，html元素本身是自帶樣式的，例如標(biāo)題和段落字體默認(rèn)為黑色。還有一些元素是自帶邊距的，我們?cè)谌腴T階段，可以用上面的代碼將所有元素的外邊距和內(nèi)邊距設(shè)置為0，作為一個(gè)元素邊距初始化的過(guò)程，然后再為元素設(shè)置我們希望的邊距，這樣可以屏蔽元素自帶邊距樣式的干擾。
當(dāng)我們熟悉元素邊距之后，在根據(jù)需求設(shè)置元素的邊距。
三、CSS常用屬性
CSS定義了大量的屬性，學(xué)習(xí)的過(guò)程中，我們不必去記住每一個(gè)CSS屬性。這里列舉出學(xué)習(xí)初期常用的CSS屬性，后續(xù)我們還會(huì)不斷學(xué)習(xí)網(wǎng)頁(yè)重構(gòu)中常用的CSS屬性。
px是CSS中的單位，用來(lái)表示像素長(zhǎng)度，1px就是一像素。CSS中的其他單位將在后續(xù)章節(jié)介紹。
1/* class選擇器，找到class值為box的元素 */ 2.box{ 3? ? border:1px solid red; /*1像素的實(shí)線紅色邊框*/ 4? ? width:500px;? /*設(shè)置寬度為500像素*/ 5? ? height:300px;? /*設(shè)置高度為300像素*/ 6? ? text-align:center;? ? /*文字水平居中*/ 7? ? line-height: 300px;? /*文字行高設(shè)置為300像素（與父級(jí)高度相同），可以實(shí)現(xiàn)文字垂直居中的效果*/ 8? ? background-color: yellow;? /*設(shè)置背景色為黃色*/ 9? ? font-size: 16px;? /*設(shè)置文字尺寸*/10? ? color:red:/*設(shè)置文字的顏色*/11}
了解了常用的樣式之后，我們來(lái)看一個(gè)實(shí)際案例：
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>Document</title> 6<style> 7? ? ? ? .box{ 8? ? ? ? ? ? border:1px solid red; 9? ? ? ? ? ? width:500px;10? ? ? ? ? ? height:300px;11? ? ? ? ? ? text-align:center;12? ? ? ? ? ? line-height: 300px;13? ? ? ? ? ? background-color: yellow;14? ? ? ? ? ? font-size: 16px;15? ? ? ? ? ? color:red:16}17</style>18</head>19<body>20<div class="box">21<p>這是一個(gè)p標(biāo)簽</p>22</div>23</body>24</html>
四、特殊說(shuō)明
通過(guò)上面的學(xué)習(xí)，我們發(fā)現(xiàn)為一個(gè)元素設(shè)置樣式又多種方法，可以使用id選擇器，類選擇器，甚至是元素選擇器。為了讓我們的頁(yè)面樣式更統(tǒng)一化，建議所有的樣式都使用類選擇器，元素選擇器可以配合下一節(jié)講解的層級(jí)選擇器一起使用，五特殊情況絕對(duì)不要單獨(dú)使用元素選擇器。
還有，在為class屬性命名是，一定要有語(yǔ)義，例如菜單可以用menu，容器可以用container，切忌不要使用box1，box2，或者a,b,c等無(wú)意義的命名方式。
五、課后練習(xí)
按要求完成網(wǎng)頁(yè)：
設(shè)置一個(gè)寬度為980px的div容器，邊框?yàn)樗{(lán)色1px;
容器內(nèi)部顯示一篇文章，文章有標(biāo)題，圖片和段落文字和列表。
標(biāo)題字體16px，居中顯示。
標(biāo)題下方顯示作者信息和文章發(fā)布日期，字體顏色為#aaaaaa，字體大小為12px
除上述文字外，所有字體顏色為黑色，字體大小為14px;
圖片再段落間顯示，寬度為300px，高度為200px。
列表為無(wú)序列表
至少包含3個(gè)段落文字。
