CSS簡(jiǎn)介
- CSS Cascading Style Sheets 層疊樣式表。
- CSS的主要目的：是給HTML標(biāo)記添加各種各樣的表現(xiàn)(格式名斟、樣式)脑慧。比如：文字樣式、背景砰盐、文本樣式闷袒、鏈接樣式。
CSS語(yǔ)法格式
- 一個(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ì)使用以下寫法卓囚，來(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)容間的距離赴捞。
縮寫形式
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)寫式
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)填充、外邊距亿眠。
- 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)寫方式
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è)塊元素并列排版亿扁。
-
如何讓包圍元素捺典，包住浮動(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ì)覆蓋前面的
