[ CSS 前端 ] 網頁內容的修飾

一. CSS?

? 1. 概述

? 2. 基本語法

? ? ? ?(1)行內樣式表

? ? ? ?(2)內嵌樣式表

? ? ? ?(3)外部樣式表

3. 選擇器

(1)標簽選擇器:?

(2)類選擇器:?

(3)通配選擇器:?

(4)后代選擇器:

4. 基礎樣式

(1). 文本樣式

(2). 背景樣式

(3). 列表樣式

5. 偽類

? ? ?(1)定義:

? ? ?(2)偽類的語法：

6. 透明度(opacity)

7. 塊級行級標簽

? ?(1)塊標簽和行標簽:

? ?(2)改變標簽類型(display):

? ?(3)div和span標簽

一. CSS?

? ?1. 概述

? ? ? ?CSS(Cascading Style Sheets)級聯樣式表是一種樣式表語言，可以控制HTML文檔外觀和布局例如:字體、顏色、邊距、高度、寬度、背景圖像、高級定位等方面 .使用CSS可將頁面的內容與表現形式分離，HTML文檔中存放頁面內容，而定義表現形式的CSS放在一個.css文件中或HTML文檔的某一部分 ,便于管理.

? 2. 基本語法

? ? ? ?(1)行內樣式表

? ? ? ? ? ? 1) 定義: 通過標簽的style屬性來設置元素的樣式,寫在body里面

? ? ? ? ? ? 2) 格式: <標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>

? ? ? ? ? ? 3) 舉例:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><!-- 方法一:行內樣式表 --><p style="color:red;font-weight: 600;font-size: 20px;">靜夜思</p><p style="color:red;font-weight: 600;font-size: 20px;">床前明月光</p><p style="color:red;font-weight: 600;font-size: 20px;">靜疑是地上霜</p> </body>
</html>

? ? ? ?(2)內嵌樣式表

? ? ? ? ? ? 1) 定義: 將CSS代碼集中寫在HTML文檔的head頭部標簽中，并且用style標簽定義

? ? ? ? ? ? 2) 格式:?

<style type="text/css">

p { color:red; font-family:"隸書"; font-size:24px;}

</style>

? ? ? ? ? ? 3) 舉例:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>/*方法二:內嵌樣式表*/p{color:green;font-weight: 700;font-size: 20px;} </style></head><body><p>舉頭望明月</p><p>低頭思故鄉</p></body>
</html>

? ? ? ?(3)外部樣式表

? ? ? ? ? ? 1) 定義: 將所有的樣式放在一個或多個以.CSS為擴展名的外部樣式表文件中,通過link標簽將外部樣式表文件鏈接到HTML文檔中

? ? ? ? ? ? 2) 舉例:

?CSS文件:

p{color:blue;font-weight: 700;font-size: 20px;
}

?html文件:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link  href="css/index.css" rel="stylesheet"/> </head><body><p>舉頭望明月</p><p>低頭思故鄉</p><p>這是一個測試樣例這是一個測試樣例這是一個測試樣例這是一個測試樣例這是一個測試樣例這是一個測試樣例這是一個測試樣例這是一個測試樣例</p></body>
</html>

總結:?

3. 選擇器

(1)標簽選擇器:?

? ? ? 通過標簽選擇器可以選擇頁面中的所有指定標簽? ? ? ? 語法：標簽名{ }

(2)類選擇器:?

? ? ?通過標簽的class屬性值選中一組標簽? ? ?語法:? .class屬性值{ }

(3)通配選擇器:?

? ? ?可以用來選中頁面中的所有的標簽? ? ?語法:? *{ }

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>/*標簽選擇器 優先級中等*/h3{color: blue;}p{color: gray;}/*類選擇器 優先級高*/.p1{color: firebrick;}.p2{color: yellowgreen;}.p1,.p2{font-size: 30px;} /* p1,p2共同的屬性 *//*通配選擇器 能匹配所有的,優先級低*/  *{ font-style: italic; line-height: 40px;letter-spacing: 10px;}</style></head><body><h3 >靜夜思</h3><p class="p1">床前明月光</p><p class="p2">疑是地上霜</p><p>舉頭望明月</p><p>低頭思故鄉</p></body>
</html>

?(4)后代選擇器:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 后代選擇器  */.u1 li{/* 對u1下的li進行修飾 */font-size: 20px;list-style-type: decimal;/* 設置列表項標志的類型 */list-style-position: outside;/* 設置列表項標志的位置 outside外面 inside里面 */}.u2 li{		list-style-position: outside;text-align: center;}</style></head><body><ul class="u1"><li><a href="#"> 首頁</a></li><li><a href="#"> 學校概況</a></li><li><a href="#"> 招生就業</a></li><li><a href="#"> 教育教學</a></li></ul><ul class="u2"><li><a href="#"> 首頁</a></li><li><a href="#"> 學校概況</a></li><li><a href="#"> 招生就業</a></li><li><a href="#"> 教育教學</a></li></ul></body>
</html>

4. 基礎樣式

? ? ?(1). 文本樣式

● color?字體顏色

● font-size??字體大小

● font-family??字體類型

● font-weight??字體粗細● font-style: italic??斜體文本

● text-align? 文本對齊

● text-decoration: line-through /underline /?none 文本中間劃線 / 文本底部劃線 / 文本取消劃線

● font-style: italic??斜體文本

● line-height??設置行高

● letter-spacing?可以指定字符間距

● text-indent?用來設置首行縮進

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.p1.p2{font-size: 20px;/* 字體大小 */}.p1{color: green;font-weight: 700;/* 字體粗細 */font-family: 楷體;/* 字體 *//* text-decoration: line-through;/* 橫線貫穿文本 *//* font-style: italic;  斜體字 */ text-decoration:underline;/* 文字底部橫線 *//*line-height: 40px; 行高 *//*letter-spacing: 20px; 字間距 *//* text-indent: 20px;首行縮進像素大小 */text-indent: 2em;/* em是當前文本一個字的大小,會隨著當前段落字體的大小改變而改變 */}h2{text-align: center;}a{text-decoration: none;/* 將超鏈接底部的橫線去掉 */}</style></head><body><h2>靜夜思</h2><p class="p1">列表屬性可以設置,改變列表標志,或者將推向作為列表項標志列表屬性可以設置,改變列表標志,或者將推向作為列表項標志列表屬性可以設置,改變列表標志,或者將推向作為列表項標志列表屬性可以設置,改變列表標志,或者將推向作為列表項標志列表屬性可以設置,改變列表標志,或者將推向作為列表項標志列表屬性可以設置,改變列表標志,或者將推向作為列表項標志列表屬性可以設置,改變列表標志,或者將推向作為列表項標志</p><p class="p2">列表屬性可以設置,改變列表標志,或者將推向作為列表項標志列表屬性可以設置,改變列表標志,或者將推向作為列表項標志列表屬性可以設置,改變列表標志,或者將推向作為列表項標志列表屬性可以設置,改變列表標志,或者將推向作為列表項標志列表屬性可以設置,改變列表標志,或者將推向作為列表項標志列表屬性可以設置,改變列表標志,或者將推向作為列表項標志列表屬性可以設置,改變列表標志,或者將推向作為列表項標志</p><a href="">百度</a><a href="">百度</a><a href="">百度</a>	</body>
</html>

(2). 背景樣式

● background-color? ??背景顏色

● background-image? ?背景圖片

● background-repeat? ?背景重復

?注意需要提前將圖片導入img文件夾

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style> .p1{background-color: beige;}.p2{  background-color: blue;/* 背景顏色 */background-image: url("img/2.jpg") ;/* 背景圖片 */background-repeat: repeat-y;/* 向下重復: 當圖片無法完全填充設定的寬和高時,會進行重復 *//* background-repeat: no-repeat;/* 背景是否重復 */ */background-size: cover;/* 背景大小覆蓋整個標簽區域 */width: 1800px;height: 1600px;}</style></head><body><p class="p1">hello</p><p class="p2"><img src="img/1.jpg" /></p></body>
</html>

?(3). 列表樣式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 后代選擇器  */.u1 li{/* 對u1下的li進行修飾 */font-size: 20px;list-style-type: decimal;/* 設置列表項標志的類型 *//* 	list-style-image:url("img/2.jpg") ; /* 將圖象設置為列表項標志*/ */list-style-position: outside;/* 設置列表項標志的位置 outside外面 inside里面 *//* 簡寫方式 值數量 位置不受限制 *//* list-style: outside url("") none; */}.u2 li{/* font-size: 20px;list-style-type: none; *//* list-style-image:url("img/1.jpg") ; *//* list-style-position: inside; */list-style-position: outside;text-align: center;}</style></head><body><ul class="u1"><li><a href="#"> 首頁</a></li><li><a href="#"> 學校概況</a></li><li><a href="#"> 招生就業</a></li><li><a href="#"> 教育教學</a></li></ul><ul class="u2"><li><a href="#"> 首頁</a></li><li><a href="#"> 學校概況</a></li><li><a href="#"> 招生就業</a></li><li><a href="#"> 教育教學</a></li></ul></body>
</html>

5. 偽類

? ? ?(1)定義:

? ? ?偽類用來表示標簽的特殊狀態, 例如當鼠標移動或點擊時,當前文本字體發生改變

? ? ?(2)偽類的語法：

? ? ? ? ?:hover 表示鼠標移入的狀態

? ? ? ? ?:active表示的是被點擊的狀態

? ? ? ? ?:focus 向擁有鍵盤輸入焦點的標簽添加樣式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 默認樣式 */.p1{color: aqua;}/*鼠標移動到標簽時,自動切換到此樣式  */.p1:hover{color: green;}a{color:blue;text-decoration: none;}a:hover{color: red;font-size: 20px;text-decoration: underline;}/*鼠標點擊后切換到此樣式表  */a:active{color: green;/* 與鼠標放在上面的小狗不同*/}.t1:hover{background-color: antiquewhite;color: white;}.t1:active{color: red;background-color: plum;}/* 當輸入標簽獲得鼠標焦點時,自動切換此樣式 */input:focus{background-color: aquamarine;}</style></head><body ><p class="p1">這是一個段落</p><a href="">百度</a><a href="">百度</a><a href="">百度</a><hr /><input class="t1" type="button" value="保 存" /><hr /><input type="text" /><br /><input type="text" /><br /><input type="text" /><br /></body>
</html>

6. 透明度(opacity)

? ? ?opacity: 透明度0-1之間 , 0是完全透明 1是不透明

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style></style></head><body ><img src="img/1.jpg" style="opacity:0.3 ;" /><!-- 透明度 0-1之間 0是完全透明 1是不透明 --></body>
</html>

7. 塊級行級標簽

? ?(1)塊標簽和行標簽:

? ? ?塊標簽:無論內容有多少都會占一行,可以設置寬高? ?例如: p h1 ol ul hr

? ? ?行標簽:只占內容自身大小,不能設置寬高,即使設置了,也不能生效? ?例如: 超鏈接<a> ?加粗<b>

? ?(2)改變標簽類型(display):

? ? ? ?block : 塊標簽
? ? ? ?inline : 行標簽
? ? ?? none :?標簽整個消失

? ?(3)div和span標簽

? ? ? ? div標簽: 塊級標簽,沒有默認樣式,里面可以放任何標簽,是純凈版的塊級標簽,用于布局網頁
? ? ? ? span標簽: 行級標簽,沒有默認樣式,主要用來選中要修飾的文本內容,用于添加其他標簽樣式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h3 style="=width: 300px; display: none;">3級標簽</h3><b>aaaa</b><a href="" style="width: 100px; display: block;background-color: antiquewhite; text-align: center;">百度</a><!-- div標簽是塊級標簽,標簽沒有任何的默認樣式,里面可以放任何標簽,是一個純凈版的塊級標簽--><div style="background-color: antiquewhite; width: 300px;">aaa<div>bbb</div><p>cccc</p></div><!-- span是一個行標簽,沒有任何默認樣式 主要用來選中要修飾的文本內容,方便添加樣式 --><p><span style="color: aquamarine;">騰訊</span>百度百度</p></body>
</html>