CSS簡(jiǎn)介

• CSS Cascading Style Sheets 層疊樣式表。
• CSS的主要目的：是給HTML標(biāo)記添加各種各樣的表現(xiàn)(格式、樣式)。比如：文字樣式、背景、文本樣式、鏈接樣式。

CSS語(yǔ)法格式

Snip20160410_7.png

• 一個(gè)CSS規(guī)則，由“選擇器”和“格式聲明語(yǔ)句”構(gòu)成。
• “選擇器”：就是選擇HTML標(biāo)記，換句話說(shuō)：就是給哪個(gè)HTML標(biāo)記加樣式。
• “格式聲明語(yǔ)句”：由{}構(gòu)成，{}中是各種格式語(yǔ)句。
• 一條格式語(yǔ)句，由“屬性名:屬性值”構(gòu)成。
• 每一條格式語(yǔ)句，必須用英文下的分號(hào)“;”結(jié)束。
• 屬性名，就是CSS中的各種屬性，這些屬性名都是固定的。
• 屬性值，一個(gè)屬性名可以取不同的值，這個(gè)值不加引號(hào)。
• CSS中的數(shù)字單位都是px，這個(gè)px不能省略。

CSS選擇器

1.基本選擇器

（1）“*”選擇器：通配符

• 描述：將匹配所有的HTML標(biāo)記，所有的標(biāo)記都會(huì)改變的。
• 語(yǔ)法：*{ color:red; }
• 注意：“*”盡量少用，因?yàn)镮E6不支持。

(2)標(biāo)簽選擇器

• 描述：將匹配指定的HTML標(biāo)記。
• 語(yǔ)法：h1{ color:red; }
• 注意：CSS標(biāo)簽選擇器，與HTML標(biāo)記的名稱一樣，但不能加尖括號(hào)。

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

• 描述：給一類HTML標(biāo)記加樣式。這里所指的“一類”是：每個(gè)HTML標(biāo)記都有一個(gè)class屬性，且class的值一樣。class屬性是公共屬性，每個(gè)HTML標(biāo)記都有。
• 類選擇器的名稱，必須以“.”開(kāi)頭，后限HTML標(biāo)記的class屬性的值。
• 語(yǔ)法：如.box{ color:red; }
• HTML標(biāo)記的class屬性的值，不能以數(shù)字開(kāi)頭。

（4）id選擇器

• 描述：給指定id的元素添加樣式。
• id選擇器的名稱，必須以****“#”****開(kāi)頭，后跟****HTML****標(biāo)記的****id****屬性的值。
• 語(yǔ)法：如#boxId{ color:red; }
• 注意：
  • 網(wǎng)頁(yè)中HTML標(biāo)記的id屬性的值，必須是唯一的。
  • id屬性一般是給JS使用的，不是讓你來(lái)加樣式的。class屬性只能給CSS用，不能給JS用的。

2.組合選擇器

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

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

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

3.CSS偽類選擇器：給超鏈接加的樣式(鏈接的不同狀態(tài)加樣式)

一個(gè)超鏈接，有四個(gè)狀態(tài)：
正常狀態(tài)(:link)：鼠標(biāo)沒(méi)放上之前鏈接的樣式。
放上狀態(tài)(:hover)：鼠標(biāo)放到鏈接上時(shí)的樣式。
激活狀態(tài)(:active)：按住鼠標(biāo)左鍵不松開(kāi)的樣式，這個(gè)狀態(tài)特殊短暫。
訪問(wèn)過(guò)的狀態(tài)(:visited)：按下鼠標(biāo)左鍵，并彈起，這時(shí)的樣式效果。
**在平常工作中，會(huì)使用以下寫(xiě)法，來(lái)給鏈接加不同的樣式：a:link, a:visited{ color:#444; text-decoration:none; } 將“正常狀態(tài)”和“訪問(wèn)過(guò)的狀態(tài)”合二為一。
a:hover{ color:#990000; text-decoration:underline; } “鼠標(biāo)放上”單做一種效果

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(無(wú))、underline(下劃線)、overline(上劃線)、line-through(刪除線)
text-align：文本水平對(duì)齊方式，取值：left、center、right
line-height：行高，可以用固定值，也可以用百分比。如：line-height:24px;   line-height:150%;
text-indent：首行縮進(jìn)。如：text-indent:28px;
letter-spacing：字間距。

• CSS列表屬性

• list-style：列表樣式，取值：none。去掉項(xiàng)目符號(hào)或編號(hào)前面的各種符號(hào)。
  格式：ul,li{list-style:none;}/*去除前面的符號(hào)*/

• CSS邊框?qū)傩裕好總€(gè)元素都可以加邊框線

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

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

padding-left：左內(nèi)填充距離，左邊線到內(nèi)容間的距離。
padding-right：右內(nèi)填充距離，右邊線到內(nèi)容間的距離。
padding-top：上內(nèi)填充距離，上邊線到內(nèi)容間的距離。
padding-bottom：下內(nèi)填充距離，下邊線到內(nèi)容間的距離。
縮寫(xiě)形式
padding:10px;   //四個(gè)邊的內(nèi)填充分別為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：下邊線往外的距離。
簡(jiǎn)寫(xiě)式
margin:10px;   //四個(gè)外邊距分別為10px
margin:10px 20px  //上下外邊距10px，左右外邊距20px
margin:5px 10px 15px;  //上外邊距5px，左右外邊距10px，下外邊距15px
margin:5px 10px 15px 20px;  //順序一定是“上右下左”

我們可以把網(wǎng)頁(yè)中的每個(gè)元素，都看成是一個(gè)盒子，
盒子的特征：內(nèi)容的寬度或高度、邊框線、內(nèi)填充、外邊距。

Snip20160410_9.png

• 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
簡(jiǎn)寫(xiě)方式
background：背景色  背景圖  平鋪方式  定位方式；
舉例：background:url(images/bg.gif) no-repeat center center;
舉例：background: #ccc url(images/bg.gif) no-repeat left 10px;

• display屬性

功能：規(guī)則網(wǎng)頁(yè)元素如何顯示的問(wèn)題。
取值：none(隱藏)、block(以塊元素顯示)、inline(以行內(nèi)元素顯示)
block：可以實(shí)現(xiàn)將行內(nèi)元素轉(zhuǎn)成塊元素。
inline：可以實(shí)現(xiàn)將塊元素轉(zhuǎn)成行內(nèi)元素。

• overflow屬性

overflow：當(dāng)內(nèi)容溢出時(shí)，溢出的內(nèi)容該如何顯示。取值：visible(可見(jiàn))、hidden(隱藏)、scroll(出現(xiàn)滾動(dòng)條)、auto(自動(dòng))

• cursor光標(biāo)類型

cursor：網(wǎng)頁(yè)中光標(biāo)的類型，取值：text(文本)help(幫助)、wait(等待)、pointer(手形)等

• CSS浮動(dòng)和清除

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

• 1、CSS浮動(dòng)
• 浮動(dòng)的元素，將向左或向右浮動(dòng)，浮動(dòng)到包圍元素的邊上，或上一個(gè)浮動(dòng)元素的邊上為止。
• 浮動(dòng)的元素，不再占空間了，并且，浮動(dòng)元素的層級(jí)要高于普通元素。
• 浮動(dòng)的元素，一定是“塊元素”。不管它原來(lái)是什么元素。
• 如果浮動(dòng)的元素，沒(méi)有指定寬度的話，浮動(dòng)后它將盡可能的變窄。因此，浮動(dòng)元素一般要定寬和高。
• 一行的多個(gè)元素，要浮動(dòng)一起浮動(dòng)。

浮動(dòng)的功能：可以實(shí)現(xiàn)將多個(gè)塊元素并列排版。

Snip20160410_10.png

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

  Snip20160410_12.png

• 2.CSS清除浮動(dòng)

• 有浮動(dòng)，就得有清除。

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

• CSS定位

position：元素定位方式，取值static、fixed、relative、absolute
static：靜態(tài)定位(默認(rèn)狀態(tài)、不定位)。
Fixed：固定定位。
Relative：相對(duì)定位。
Absolute：絕對(duì)定位。

定位方式，要與定位屬性配合使用

定位坐標(biāo)：指定定位的元素，偏移目標(biāo)元素多遠(yuǎn)的距離。
left：定位元素，距離目標(biāo)元素左邊的距離。
top：定位元素，距離目標(biāo)元素上邊的距離。
right：定位元素，距離目標(biāo)元素右邊的距離。
bottom：定位元素，距離目標(biāo)元素下邊的距離。

1、固定定位，position:fixed

• 固定定位，是相對(duì)于瀏覽器窗口來(lái)進(jìn)行的定位。
• 固定定位，不占空間，層級(jí)要高于普通元素。它不會(huì)隨著網(wǎng)頁(yè)的滾動(dòng)而滾動(dòng)。
• 如果不指定定位坐標(biāo)的話，固定定位元素的位置在原地不動(dòng)。
• 固定定位元素，一定是“塊元素”，不管原來(lái)它是什么元素。

2、相對(duì)定位，position:relative;

• 相對(duì)定位，是相對(duì)于“原來(lái)的自己”進(jìn)行定位。
• 相對(duì)定位，依然占空間，層級(jí)高于普通元素。
• 如果不指定定位坐標(biāo)的話，相對(duì)定位元素的位置在原地不動(dòng)。
• 相對(duì)定位，原來(lái)是行內(nèi)元素，定位后還是行內(nèi)元素；原來(lái)是塊元素，定位后還是塊元素。

3、絕對(duì)定位，position:absolute

• 相對(duì)于祖先定位元素(相對(duì)定位，絕對(duì)定位)，來(lái)進(jìn)行的定位。
• 如果它的父元素沒(méi)有進(jìn)行任何定位的話，再往上找定位元素。
• 如果一直找到<body>都沒(méi)有找到定位元素的話，那就相對(duì)于<body>來(lái)進(jìn)行定位。
• 絕對(duì)定位元素，不占空間，層級(jí)要高于普通元素。
• 如果不指定定位坐標(biāo)的話，絕對(duì)定位元素的位置在原地不動(dòng)。
• 絕對(duì)定位元素，是一個(gè)“塊元素”。

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

CSS繼承性

• CSS屬性繼承：外層元素的樣式，會(huì)被內(nèi)層元素進(jìn)行繼承。多個(gè)外層元素的樣式，最終都會(huì)“疊加”到內(nèi)層元素上。

• 什么樣的CSS屬性能被繼承呢？

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

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

CSS優(yōu)先級(jí)

• 單個(gè)選擇器的優(yōu)先級(jí)

行內(nèi)樣式 > id選擇器 > class選擇器 > 標(biāo)簽選擇器

• 多個(gè)選擇器的優(yōu)先級(jí)
  多個(gè)選擇器的優(yōu)先級(jí)，一般情況下，指向越準(zhǔn)確，優(yōu)先級(jí)越高。
  特殊情況下，我們需要假設(shè)一些值：結(jié)果越大，優(yōu)先級(jí)越高

  標(biāo)簽選擇器      優(yōu)先級(jí)為1
  類選擇器        優(yōu)先級(jí)為10
  Id選擇器        優(yōu)先級(jí)為100
  行內(nèi)樣式        優(yōu)先級(jí)為1000

計(jì)算以下優(yōu)先級(jí)

 .news h1{color:red;}     優(yōu)先級(jí)：10 + 1 = 11
.title{color:blue;}        優(yōu)先級(jí)：10
div.news h1{color:red;}   優(yōu)先級(jí)：1 + 10 + 1 = 12
h1.title{color:blue;}      優(yōu)先級(jí)：1 + 10 = 11

提醒：如果同時(shí)操作一個(gè)選擇器，且優(yōu)先級(jí)結(jié)果相同，那么會(huì)按照先后順序，后面的會(huì)覆蓋前面的