web前端——css（一篇教會網頁制作）

一、基本語法

1.行內樣式表

2.內嵌樣式表

3.外部樣式表

二、選擇器

1.標簽選擇器

2.類選擇器

3.id 選擇器

4.通配選擇器

三、常見修飾

1.文本

2.背景

3.列表

4.偽類

5.透明度

6.塊級、行級、行級塊標簽

7.div 和 span

四、盒子模型（重點）

1.內容區

2.內邊距

3.邊框

4.外邊距

CSS是Cascading Style Sheets（級聯樣式表）。

CSS是一種樣式表語言，用于為HTML文檔控制外觀，定義布局。例如，
CSS涉及字體、顏色、邊距、高度、寬度、背景圖像、高級定位等方面。

可將頁面的內容與表現形式分離，頁面內容存放在HTML文檔中，而用于定義表現形式的CSS在一個.css文件中或HTML文檔的某一部分。

一、基本語法

1.行內樣式表

????????行內樣式表,又有人稱內聯樣式、行間樣式、內嵌樣式。是通過標簽的style屬性來設置元素

樣式，其基本語法格式如下：

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 分別對段落內容的字體顏色、大小、字體類型進行修飾 --><p style="color: red;font-size: 30px;font-family: 楷體;">我是一個段落</p></body>
</html>

? ? ? ? 效果如下：

2.內嵌樣式表

????????內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中，并且用style標簽定義

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 通過引用<P>標簽{}的形式，來進行具體修飾操作*/p{color: red;font-size: 30px;font-family: 楷體;}</style></head><body><p>我是一個段落</p></body>
</html>

? ? ? ? 其效果同上，這里需要注意：<head>中的<P>標簽修飾對<body>內所有<P>標簽內容都有效

3.外部樣式表

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

（其中，href中填寫引入的樣式文件）

<head>

????????<link href="newstyle.css" rel="stylesheet " type=" text /css">

????????<style type=" text /css">

????????</style>

</head>

二、選擇器

????????要使用CSS對HTML頁面中的標簽實現一對一，一對多的控制，這就需要用到CSS選擇器。

1.標簽選擇器

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

<head><meta charset="utf-8"><title></title><style>p{color: red;}</style></head>

2.類選擇器

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/*這時，只會對p1對應的<P>標簽內容進行修飾*/.p1{color: red;}</style></head><body><p class="p1">我是一個段落</p><p class="p2">我也是一個段落</p></body>
</html>

3.id 選擇器

? ? ? ? 語法：#id屬性值 {}????????通過標簽的id屬性值選中唯一的一個標簽

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/*這時，只會對p2對應的<P>標簽進行修飾*/#p2{color: aqua;}</style></head><body><p class="p1">我是一個段落</p><p id="p2">我也是一個段落</p></body>
</html>

4.通配選擇器

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{color: red;}</style></head><body><p class="p1">我是一個段落</p><p class="p2">我也是一個段落</p></body>
</html>

三、常見修飾

? ? ? ? 接下來介紹的是一些網頁設計中非常基礎的修飾語法，這里就不過多做代碼演示，感興趣可以自行操作。（以下操作都是在<style>標簽里面進行）

1.文本

● color ：字體顏色

● font-size ：字體大小

● font-family ：字體

● text-align ：文本對齊

● text-decoration:line-through ：定義穿過文本下的一條線

● text-decoration:underline ：定義文本下的一條線

● text-decoration:none ：定義標準的文本

● font-style: italic; 斜體文本

● font-weight: 字體粗細

● line-height: 設置行高

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

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

2.背景

● background-color 背景顏色

● background-image 背景圖片

● background-repeat 背景重復

● background-size 背景尺寸

● background- position 背景位置

3.列表

● CSS 列表屬性可以放置、改變列表項標志，或者將圖像作為列表項標志。

● list-style-image 將圖象設置為列表項標志。

● list-style-position 設置列表中列表項標志的位置。

● list-style-type 設置列表項標志的類型。

● list-style 簡寫屬性。

4.偽類

????????CSS偽類專門用來表示標簽的一種的特殊的狀態，當我們需要為處在這些特殊狀態的標簽設置樣式時，就可以使用偽類。

語法樣式：

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

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

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

? ? ? ? 這里我們做一個簡單的演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.p1:hover{color: red;}</style></head><body><p class="p1">我是一個段落</p></body>
</html>

當鼠標沒接觸到<P>標簽時：? ? ? ? ? ? ? ? ? ? ?鼠標移入時：

5.透明度

????????opacity 屬性設置標簽的不透明級別值為1。

?????????規定不透明度：從 0.0 （完全透明）到 1.0（完全不透明）。

? ? ? ? 語法：opacity：;? ? ? ? 冒號后面填寫0-1之間的數字即可

6.塊級、行級、行級塊標簽

● 什么是塊級標簽？

????????塊級標簽：無論內容多少都會獨自占據一行的。

????????例如<p>、<h1>、<ul>、<ol>、<hr/>等。

● 什么是行級標簽？

????????行級標簽：只占自身大小的標簽，不會占一行。

????????例如<font>、<b>、<i>、<a>等。

● 什么是行級塊標簽？

????????例如 <input/> <img>等

那么我們能否對不同級別標簽進行轉換呢？答案是肯定的！

通過display樣式可以修改標簽的類型。
可選值：
????????block ：設置標簽為塊標簽
????????inline ：設置標簽為行級標簽
????????inline-block ：設置標簽為行級塊標簽
????????none ：隱藏標簽（標簽將在頁面中完全消失）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.p1{display: inline;}</style></head><body><p class="p1">我是一個段落</p></body>
</html>

沒進行display修改前：（可以清晰的觀察到，獨占一行）

進行修飾后：（只占自身大小）

7.div 和 span

div 標簽：

????????div是塊級標簽，可以放置任何標簽。

????????div沒有任何附加功能，給了什么屬性就能變成什么樣。

????????div主要的作用是被用來布局網頁。

span 標簽：

????????span是行級標簽

????????span 沒有任何附加功能，給了什么屬性就能變成什么樣。

????????span標簽被用來選中文檔中的文字。

四、盒子模型（重點）

????????CSS處理網頁時，它認為每個標簽都包含在一個不可見的盒子里。

????????如果把所有的標簽都想象成盒子，那么我們對網頁的布局就相當于是擺放盒子。

????????我們只需要將相應的盒子擺放到網頁中相應的位置即可完成網頁的布局。

其基本樣式如圖：

1.內容區

● 內容區指的是盒子中放置內容的區域，也就是標簽中的文本內容，子標

簽都是存在于內容區中的。

● 通過 width 和 height 兩個屬性可以設置內容區的大小而不是整個盒子的大

小。

● 如果沒有為標簽設置內邊距和邊框，則內容區大小默認和盒子大小是一

致的。

● width 和 height 屬性適用于塊標簽。

????????這一是個普通的盒子內容區大小：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.main_box{width: 200px;height: 200px;}</style></head><body><div class="main_box">我是一個盒子<br />你們好</div></body>
</html>

????????我們可以看到，通過對盒子width 和 height 屬性的修改，改變了盒子內容區大小（藍色區域），而非整個盒子大小：

2.內邊距

????????通過padding屬性進行操作，設置標簽的內邊距

● 內邊距指的就是標簽內容區與邊框以內的空間。

● 內邊距會影響整個盒子的大小。

padding-left:10px;? ? ? ? 有 10個像素的左邊距

padding-right:10px;? ? ? ? 有10個像素的右邊距

padding:10px 20px 30px 40px? ? ?上、右、下、左四個方向分別有10、20、30、40個像素的邊距

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.main_box{width: 200px;height: 200px;padding-left: 10px;}</style></head><body><div class="main_box">我是一個盒子<br />你們好</div></body>
</html>

3.邊框

????????可以在標簽周圍創建邊框，邊框是標簽可見框的最外部。

? ? ? ? 格式：border:1px red solid;（分別指邊框的寬度、顏色、樣式）

????????也可以使用 border-top/left/right/bottom 分別指定上左右下四個方向的邊框。

（1）邊框樣式

dotted （點線）?dashed （虛線）?solid （實線）?double （雙線）groove （槽線）

（2）邊框圓角

border-radius：5px 設置四個角為圓角邊框（px大小可自擬）

border-top-left-radius設置左上為圓角邊框

4.外邊距

????????外邊距是標簽邊框與周圍標簽相距的空間。使用margin屬性可以設置外邊距。用法和padding

類似，同樣也提供了四個方向的。

margin-top/right/bottom/left （上、右、下、左）

margin的值可以為負值。

margin的值還可以auto（自動），設置外邊距為最大值，當將左右外邊距設置為auto時，瀏覽器會將左右外邊距設置為相等.

垂直設置為auto時值為0，所以水平居中也可以簡寫為margin:0 auto。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.main_box{width: 200px;height: 200px;margin: 0px auto;/*水平居中操作*/}</style></head><body><div class="main_box">我是一個盒子<br />你們好</div></body>
</html>

? ? ? ? 如圖，盒子被居中放置：?

注：瀏覽器為了在頁面中沒有樣式時，也可以有一個比較好的顯示效果，所以為很多的標簽都設

置了一些默認的margin和padding，而它的這些默認樣式，正常情況下我們是不需要使用的。

所以我們往往在編寫樣式之前需要將瀏覽器中的默認的margin和padding統統的去掉。如下操作：

*{

????????margin: 0;

????????padding: 0;

}

? ? ? ? 以上就是web前端有關css樣式表語言的內容了，通過這篇文章，相信一些前端小白就已經可以自行編寫一些小網頁了！當然，最后的盒子模型部分還牽扯到了一些有關文檔流，以及解決多個盒子排列時引發的一些異常情況要用到的定位方法，由于篇幅原因，這里不過多贅述。詳情請移步至我的下一篇博客，會對此部分內容進行詳細說明！