HTML學習 -- (三)CSS

CSS簡介

• CSS Cascading Style Sheets 層疊樣式表。
• CSS的主要目的：是給HTML標記新增各種各樣的表現(格式、樣式)。比如：文字樣式、背景、文字樣式、連結樣式。

CSS語法格式

• 一個CSS規則，由“選擇器”和“格式宣告語句”構成。
• “選擇器”：就是選擇HTML標記，換句話說：就是給哪個HTML標記加樣式。
• “格式宣告語句”：由{}構成，{}中是各種格式語句。
• 一條格式語句，由“屬性名:屬性值”構成。
• 每一條格式語句，必須用英文下的分號“;”結束。
• 屬性名，就是CSS中的各種屬性，這些屬性名都是固定的。
• 屬性值，一個屬性名可以取不同的值，這個值不加引號。
• CSS中的數字單位都是px，這個px不能省略。

CSS選擇器

1.基本選擇器

（1）“*”選擇器：萬用字元

• 描述：將匹配所有的HTML標記，所有的標記都會改變的。
• 語法：*{ color:red; }
• 注意：“*”儘量少用，因為IE6不支援。

(2)標籤選擇器

• 描述：將匹配指定的HTML標記。
• 語法：h1{ color:red; }
• 注意：CSS標籤選擇器，與HTML標記的名稱一樣，但不能加尖括號。

（****3****）****class****選擇器(****類選擇器****)——類選擇器是使用頻率最高的

• 描述：給一類HTML標記加樣式。這裡所指的“一類”是：每個HTML標記都有一個class屬性，且class的值一樣。class屬性是公共屬性，每個HTML標記都有。
• 類選擇器的名稱，必須以“.”開頭，後限HTML標記的class屬性的值。
• 語法：如.box{ color:red; }
• HTML標記的class屬性的值，不能以數字開頭。

（4）id選擇器

• 描述：給指定id的元素新增樣式。
• id選擇器的名稱，必須以****“#”****開頭，後跟****HTML****標記的****id****屬性的值。
• 語法：如#boxId{ color:red; }
• 注意：
  • 網頁中HTML標記的id屬性的值，必須是唯一的。
  • id屬性一般是給JS使用的，不是讓你來加樣式的。class屬性只能給CSS用，不能給JS用的。

2.組合選擇器

（1）多元素選擇器
描述：給多個元素加同一個樣式，多個選擇器之間用逗號“,”隔開。
舉例：h1,p,div,body{color:red;}

（2）後代元素選擇器(最常用)
描述：給某個標籤的某一個後代元素加樣式。選擇器之間用“空格”隔開。
舉例：div .title{ color:red;}

（3）子元素選擇器
描述：給某個元素的子元素新增樣式。
舉例：div > h1.title{color:red;}

3.CSS偽類選擇器：給超連結加的樣式(連結的不同狀態加樣式)

一個超連結，有四個狀態：
正常狀態(:link)：滑鼠沒放上之前連結的樣式。
放上狀態(:hover)：滑鼠放到連結上時的樣式。
啟用狀態(:active)：按住滑鼠左鍵不鬆開的樣式，這個狀態特殊短暫。
訪問過的狀態(:visited)：按下滑鼠左鍵，並彈起，這時的樣式效果。
**在平常工作中，會使用以下寫法，來給連結加不同的樣式：a:link, a:visited{ color:#444; text-decoration:none; } 將“正常狀態”和“訪問過的狀態”合二為一。
a:hover{ color:#990000; text-decoration:underline; } “滑鼠放上”單做一種效果

CSS屬性

• CSS尺寸屬性

width：元素寬度，一定要加px單位。
height：元素高度。

• CSS字型屬性

font-size：文字大小。如：font-size:14px;
font-family：字型。如：font-family:微軟雅黑;
font-style：斜體，取值：italic。如：font-style:italic;
font-weight：粗體，取值：bold。如：font-weight:bold;```
- **CSS文字屬性**

color：文字顏色
text-decoration：文字修飾線，取值：none(無)、underline(下劃線)、overline(上劃線)、line-through(刪除線)
text-align：文字水平對齊方式，取值：left、center、right
line-height：行高，可以用固定值，也可以用百分比。如：line-height:24px; line-height:150%;
text-indent：首行縮排。如：text-indent:28px;
letter-spacing：字間距。```

• CSS列表屬性

• list-style：列表樣式，取值：none。去掉專案符號或編號前面的各種符號。
  格式：ul,li{list-style:none;}/*去除前面的符號*/

• CSS邊框屬性：每個元素都可以加邊框線

border-left：左邊框線。
格式：border-left：粗細  線型  線的顏色;
線型：none(無線)、solid(實線)、dashed(虛線)、dotted(點狀線)
舉例：border-left：5px  dashed  red;
border-right：右邊框線。
border-top：上邊框線。
border-bottom：下邊框線。
border：同時給四個邊加邊框線。

• CSS內邊距屬性：邊框線到內容間的距離
  注意：平常我們所說的width和height屬性，它們指內容的寬度和高度，不含內、外邊距、邊框線。

padding-left：左內填充距離，左邊線到內容間的距離。
padding-right：右內填充距離，右邊線到內容間的距離。
padding-top：上內填充距離，上邊線到內容間的距離。
padding-bottom：下內填充距離，下邊線到內容間的距離。
縮寫形式
padding:10px;   //四個邊的內填充分別為10px
padding:10px 20px;  //上下為10px，左右為20px
padding:5px 10px 20px;  //上為5px，左右為10px，下為20px
padding:5px 10px 15px 20px;  //順序一定是“上右下左”```

- **CSS外邊距屬性：邊線往外的距離**

margin-left：左邊線往外的距離。
margin-right：右邊線往外的距離
margin-top：上邊線往外的距離。
margin-bottom：下邊線往外的距離。
簡寫式
margin:10px; //四個外邊距分別為10px
margin:10px 20px //上下外邊距10px，左右外邊距20px
margin:5px 10px 15px; //上外邊距5px，左右外邊距10px，下外邊距15px
margin:5px 10px 15px 20px; //順序一定是“上右下左”```

我們可以把網頁中的每個元素，都看成是一個盒子，
盒子的特徵：內容的寬度或高度、邊框線、內填充、外邊距。

• CSS背景屬性

background-color：背景顏色。
background-image：背景圖片地址。如：background-image:url(images/bg.gif)
background-repeat：背景平鋪方式，取值：no-repeat(不平鋪)、repeat-x(水平方向)、repeat-y(垂直方向)
background-position：背景定位。格式：background-position:水平方向定位 垂直方向定位；
用英文單詞定位：background-position: left|center|right  top|center|bottom;
用固定值定位：background-position: 50px  50px; //背景距離容器的左邊50px，容器頂端50px
用百分比定位：background-position: 50%  50%;  //水平居中，垂直居中
用混合定位：background-position: left  10px;   //背景靠左邊齊，距離容器頂端10px
簡寫方式
background：背景色  背景圖  平鋪方式  定位方式；
舉例：background:url(images/bg.gif) no-repeat center center;
舉例：background: #ccc url(images/bg.gif) no-repeat left 10px;```

- **display屬性**

功能：規則網頁元素如何顯示的問題。
取值：none(隱藏)、block(以塊元素顯示)、inline(以行內元素顯示)
block：可以實現將行內元素轉成塊元素。
inline：可以實現將塊元素轉成行內元素。```

• overflow屬性

overflow：當內容溢位時，溢位的內容該如何顯示。取值：visible(可見)、hidden(隱藏)、scroll(出現滾動條)、auto(自動)

• cursor游標型別

cursor：網頁中游標的型別，取值：text(文字)help(幫助)、wait(等待)、pointer(手形)等```
- **CSS浮動和清除**

float：讓元素浮動，取值：left(左浮動)、right(右浮動)
clear：清除浮動，取值：left(清除左浮動)、right(清除右浮動)、both(同時清除上面的左浮動和右浮動)```

• 1、CSS浮動
• 浮動的元素，將向左或向右浮動，浮動到包圍元素的邊上，或上一個浮動元素的邊上為止。
• 浮動的元素，不再佔空間了，並且，浮動元素的層級要高於普通元素。
• 浮動的元素，一定是“塊元素”。不管它原來是什麼元素。
• 如果浮動的元素，沒有指定寬度的話，浮動後它將儘可能的變窄。因此，浮動元素一般要定寬和高。
• 一行的多個元素，要浮動一起浮動。

浮動的功能：可以實現將多個塊元素並列排版。

• 如何讓包圍元素，包住浮動元素？
  需要在浮動元素的下邊，使用清除浮動操作。
  

  

  Snip20160410_12.png

• 2.CSS清除浮動

• 有浮動，就得有清除。

• 如果包圍元素指定了高度了，那麼可以不使用清除功能。

• CSS定位

position：元素定位方式，取值static、fixed、relative、absolute
static：靜態定位(預設狀態、不定位)。
Fixed：固定定位。
Relative：相對定位。
Absolute：絕對定位。```
**定位方式，要與定位屬性配合使用**

定位座標：指定定位的元素，偏移目標元素多遠的距離。
left：定位元素，距離目標元素左邊的距離。
top：定位元素，距離目標元素上邊的距離。
right：定位元素，距離目標元素右邊的距離。
bottom：定位元素，距離目標元素下邊的距離。```

1、固定定位，position:fixed

• 固定定位，是相對於瀏覽器視窗來進行的定位。
• 固定定位，不佔空間，層級要高於普通元素。它不會隨著網頁的滾動而滾動。
• 如果不指定定位座標的話，固定定位元素的位置在原地不動。
• 固定定位元素，一定是“塊元素”，不管原來它是什麼元素。

2、相對定位，position:relative;

• 相對定位，是相對於“原來的自己”進行定位。
• 相對定位，依然佔空間，層級高於普通元素。
• 如果不指定定位座標的話，相對定位元素的位置在原地不動。
• 相對定位，原來是行內元素，定位後還是行內元素；原來是塊元素，定位後還是塊元素。

3、絕對定位，position:absolute

• 相對於祖先定位元素(相對定位，絕對定位)，來進行的定位。
• 如果它的父元素沒有進行任何定位的話，再往上找定位元素。
• 如果一直找到<body>都沒有找到定位元素的話，那就相對於<body>來進行定位。
• 絕對定位元素，不佔空間，層級要高於普通元素。
• 如果不指定定位座標的話，絕對定位元素的位置在原地不動。
• 絕對定位元素，是一個“塊元素”。

提示：相對定位和絕對定位，一般情況下是配合使用。

CSS繼承性

• CSS屬性繼承：外層元素的樣式，會被內層元素進行繼承。多個外層元素的樣式，最終都會“疊加”到內層元素上。

• 什麼樣的CSS屬效能被繼承呢？

CSS文字屬性都會被繼承的：
  color、 font-size、font-family、font-style、 font-weight
  text-align、text-decoration、text-indent、letter-spacing、line-height

提示：<body>中的CSS屬性，會被所有的子元素繼承

CSS優先順序

• 單個選擇器的優先順序

行內樣式 > id選擇器 > class選擇器 > 標籤選擇器

• 多個選擇器的優先順序
  多個選擇器的優先順序，一般情況下，指向越準確，優先順序越高。
  特殊情況下，我們需要假設一些值：結果越大，優先順序越高

  標籤選擇器      優先順序為1
  類選擇器        優先順序為10
  Id選擇器        優先順序為100
  行內樣式        優先順序為1000

計算以下優先順序

 .news h1{color:red;}     優先順序：10 + 1 = 11
.title{color:blue;}        優先順序：10
div.news h1{color:red;}   優先順序：1 + 10 + 1 = 12
h1.title{color:blue;}      優先順序：1 + 10 = 11

提醒：如果同時操作一個選擇器，且優先順序結果相同，那麼會按照先後順序，後面的會覆蓋前面的