**CSS的基本用法
css樣式
樣式是css最小單元語法，每個樣式包括兩部分內容：選擇器和宣告，
- 選擇器（Selector）：選擇器告訴瀏覽器該樣式將作用于頁面中的哪些物件，這些物件可以是某個標簽、所有網頁物件、指定class或ID值等，瀏覽器在決議這個樣式時，根據選擇器來渲染物件顯示效果，
- 宣告（Declaration）：宣告可以有一個或無數個，這些宣告命令瀏覽器如何去渲染選擇器指定的物件，宣告必須包括兩個部分：屬性和屬性值，并用分號來標識一個宣告的結束，在一個樣式中最后一個宣告可以省略分號，所有宣告放在一對大括號里面，
- 屬性（Property）：屬性是css提供的設定好的樣式選項，屬性名是一個單詞或多個單詞組成，單詞之間通過連字符相連，
- 屬性值（Value）：屬性值是用來顯示屬性效果的引數，她包括數值和單位，或者關鍵字，
任何語言都需要注釋，HTML使用“ ”,而css使用“/注釋陳述句/”，
body{/*頁面基本屬性*/
font-size:12px;
color:#CCCCCC;
}
/*段落基本屬性*/
p{background-color:#FF00FF;}
css的應用
css樣式代碼必須保存在.css型別的文本檔案中，或者放在網頁內
- 行內樣式
行內樣式就是把css樣式直接放在代碼的行內標簽中，一般放在標簽的style屬性中，由于行內樣式直接插入標簽中，是最直接的方式，但是修改不易，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="background-color: rgb(37, 206, 228);">行內元素，控制段落1</p>
<h2 style="background-color: pink;">行內元素，h2標題</h2>
<p2 style="background-color:rgb(37, 206, 228);">行內元素，控制段落2</p2>
</body>
</html>
2個p標簽雖然內容不同，但是使用一樣的背景色，但添加2次行內屬性設定背景色，若后期修改是，需打開頁面一個個修改，而且添加這么多行內樣式，頁面面積大，還會浪費服務器寬帶和流量，
- 內嵌式
內嵌式通過將css寫在網頁源檔案的頭部，在和之間，該樣式只能在此頁使用，解決行內式多次書寫的弊端，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
p{
text-align: left;
font-size: 16px;
margin: auto;
margin-bottom: 20px;
text-indent: 2em;
}
</style>
</head>
<body>
<p>《唐人街探案3》是由萬達影視傳媒有限公司、北京壹同傳奇影視文化有限公司出品，陳思誠執導，王寶強、劉昊然領銜主演的懸疑推理喜劇片，</p>
<P>該片講述了“曼谷奪金殺人案”“紐約五行連環殺人案”后，“唐人街神探組合”唐仁，秦風被野田昊請到東京，調查一樁離奇的謀殺案的故事 ，</p>
<p>該片將于2021年2月12日在中國大陸上映 ，</p>
</body>
</html>
在這個例子中統一設定了p標簽的屬性，節約空間，減少代碼量，也方便了修改，
- 鏈接式
鏈接式通過html的標簽，將外部的樣式檔案鏈接到HTML的檔案中，這是網路上網站最常用的方式，也最實用，這個方法將HTML和css完全分離，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>《唐人街探案3》是由萬達影視傳媒有限公司、北京壹同傳奇影視文化有限公司出品，陳思誠執導，王寶強、劉昊然領銜主演的懸疑推理喜劇片，</p>
<P>該片講述了“曼谷奪金殺人案”“紐約五行連環殺人案”后，“唐人街神探組合”唐仁，秦風被野田昊請到東京，調查一樁離奇的謀殺案的故事 ，</p>
<p>該片將于2021年2月12日在中國大陸上映 ，</p>
</body>
</html>
p{
background: aliceblue;
font-size: 18px;
border-bottom: 3px dashed #18ebe0;
}
鏈接式樣式使css代碼和HTML代碼完全分離，實作結構和樣式的分開，使HTML代碼專門構建頁面結構，而css負責美化作業，
css檔案可以放在不同的html檔案中，使網站所有頁面樣式統一，同時便于管理和修改，減少代碼及維護時間，
初學程序中，我經常將行內樣式和內嵌式混合使用，不美觀也不簡潔，需要多操作，養成書寫代碼的好習慣，
總結：行內樣式最直接，但是代碼多，浪費服務器；
內嵌式解決多次書寫，但是只能在當前頁面使用；
鏈接式使用最廣泛，可以統一修改屬性值，可在多個頁面中使用，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/252695.html
標籤：其他
上一篇：js高頻面試題（高頻）