CSS基礎 | (一) CSS是什麼
阿新 • • 發佈：2018-12-15
目錄
一、css是什麼，有什麼用？
- css的中文全稱為層疊樣式表
- 樣式表，就是網站的衣服
- css其實就是應用到網頁上的樣式表
- 表中的每一個樣式說明，都可以用來描述網頁中的一個或多個元素
- 網頁元素包括文字、影象、列表、表格、視訊等
- css就是網頁元素的描述工具，比如：
(1)我們可以將網頁中的某個標題設定為紅色：
h1{color:red;}(2)調整某張圖片的大小
img{width:300px;}二、標籤四大通用屬性-id,class,title,style
- 網頁上的元素，是通過屬性來進行自我介紹
- 可視元素四大通用屬性：id，class，title和style
- id相當於身份證號，用來唯一標識網頁元素
- class相當於標籤的類屬性，用於元素分類
- title相當於元素簡介，如元素的用途
- style屬性用來描述元素的寬度、高度、顏色、輪廓等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1 id="caption" class="vip" title="網站名稱" style="font-size:36px;color:red;">PHP中文網</h1> </body> </html>
網頁顯示效果：
- css選取網頁元素大多數情況下，就是靠這幾個屬性
三、css樣式選擇符與宣告塊
- 樣式由選擇符和宣告塊組成；選擇符{宣告塊}；詳細的樣式宣告，以名值對的方式，寫在宣告塊中，並以分號隔開
- CSS首先用選擇符定位元素，然後在宣告塊設定元素的大小、顏色、背景、輪廓、透明度等
- 宣告塊中的每一條語句都是樣式說明，由屬性名和對應的值構成
- 元素通過標籤來包裝，通過屬性來描述；因此，可以通過標籤和標籤中的屬性來選擇元素；用標籤選擇元素最簡單，用屬性選擇元素可以用上一部分學到的id，class，title等
比如對網頁中的圖片設定圓形紅色邊框：
- 簡單起見本例的css程式碼，直接寫在html中；以後會單獨建立一個css檔案
- 下例中的 img標籤選擇器，可選擇頁面中有img標籤包裝的所有元素
- 宣告塊寫在一對花括號中，裡面的每一個樣式宣告，就是一個名值對，用分號隔開
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img{
border-radius: 50%;/*設定圓形輪廓*/
border: 2px solid red; /*設定影象邊框*/
}
</style>
</head>
<body>
<img src="kenan.jpg" alt="">
</body>
</html>
網頁顯示效果：
四、CSS樣式選擇符的種類與特點
- 選擇符通過元素特徵來定位，因此元素標籤和屬性以及位置都可以當作選擇符來使用
- 標籤選擇符：用標籤名稱來表示，用來描述網頁元素型別的，通常與其他選擇符組合使用，返回一組元素
p{text-align:center;} /*段落文字居中*/- ID選擇符：用#表示，用來選擇網頁中用id屬性宣告的元素，只返回一個元素
#header{background-color:#ccc} /*設定背景為灰色*/- 類選擇符：用.來表示，用來選擇使用了class屬性宣告的元素，通常返回一組相關的元素
.blue{color:blue;}- 屬性選擇符：除class，id和style以外的屬性都可以，屬性放在一對[]中，可同時指定多個屬性，還可以對屬性值進行正則查詢
[title="https://www.php.cn"]{font-size:20px;}
/*將具有該屬性的元素文字大小設定為20畫素*/- 群組選擇符：可以設定多個元素共用樣式，用逗號分隔每個選擇符
h1,h2,h3,h4,h5,h6{font-size:lighter}
/*去掉標題元素的加粗樣式*/- 後代選擇符：根據元素之間隸屬關係來選擇，多個選擇符之間，用空格分隔
section h1{color:red;}
/*將section元素下面所有h1元素文字設定為紅色*/- 子代選擇符：只選擇當前元素的直接子元素，用>表示，很複雜，裡面應用了大量偽類元素。
div>h1{color:green;}
/*將div元素下面子級h1元素文字設定為綠色*/- 偽類選擇符：偽類主要應用在特定標籤上，表示當前元素的狀態。例如：a標籤的4種狀態：未訪問，已訪問，滑鼠懸停，點選中 等
a:visited{color:gray}
/*將訪問過的連結文字顏色設定為灰色*/- 偽元素選擇符：主要有first-letter：設定段落首行的首字母樣式；first-line：設定段落首行文字的樣子。設定段落首字母下沉效果，或首行的顯示效果，適合英文。
- 通用選擇符：一次性設定所有標籤的統一樣式，用*表示，效率低，影響樣式繼承，不常用
*{font-size:12px}
/*設定網頁中文字均為12畫素*/- 同輩選擇符：不常用，通常用更高效的選擇符替代
p+a{color:pink}
/*設定p和相鄰a標籤文字為粉絲*/五、CSS程式碼應該寫在哪？
- 寫在元素標籤的style屬性中，僅對當前元素有效
- 寫在當前頁面頭部的style標籤中，僅對當前頁面的所有元素有效
- 寫入獨立的css檔案中，對所有引入該檔案的頁面都有效
比如：將h1標籤的文字變成綠色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 style="color:green;">PHP中文網</h1>
</body>
</html>
如果頁面中有多個h1標籤，且都把文字變成綠色，發現三個標籤的標籤名相同且都在一個html頁面中，可以在當前頁面頭部的style標籤中設定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h1{
color:green;
}
</style>
</head>
<body>
<h1>PHP中文網</h1>
<h1>PHP中文網</h1>
<h1>PHP中文網</h1>
</body>
</html>
如果另一個頁面，也需要把h1標籤中的文字變成綠色，此時可以將樣式寫入一個獨立的css檔案中，供所有需要的html檔案引用。
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>PHP中文網</h1>
<h1>PHP中文網</h1>
</body>
</html>
css:
h1{
color:green;
}