HTML+CSS的文檔筆記

1、CSS簡介一、 CSS簡單介紹：a) Css cascading style sheets 層疊樣式表b) Css的主要目的：是給HTML標(biāo)記添加各種各樣的表現(xiàn)(格式、樣式)比如：文字樣式，背景，文本樣式，連接樣式c) 提示：css是給HTML標(biāo)記加的樣式；js是給HTML標(biāo)記加的行為。HTML標(biāo)記是最先出現(xiàn)的d) HTML超文本標(biāo)注語言：各種HTML標(biāo)記e) Css層疊樣式表：給HTML標(biāo)記加的樣式f) JavaScript腳本程序：給HTML標(biāo)記加的程序。h1color: red ; font-size: 14px ; 選擇器聲明聲明屬性值屬性值二、 Css語法格式a) b) 一個(gè)CSS規(guī)

2、則，由“選擇器”和“格式聲明語句”構(gòu)成c) “選擇器”：就是選擇HTML標(biāo)記，換句話說：就是給那個(gè)HTML語句加樣式d) “格式生命語句”：由構(gòu)成，中是各種格式語句。e) 一條格式語句，由“屬性名：屬性值”構(gòu)成f) 每一條格式語句，必須用英文下的分號(hào)“；”結(jié)束。g) 屬性名，就是CSS的各種屬性，這些屬性名都是固定值h) 屬性值，一個(gè)屬性名可以去不同的值，這個(gè)值不加引號(hào)。i) CSS中數(shù)字單位都是px，著個(gè)px不能省略三、 CSS選擇器a) 基本選擇器l “*”選擇器：通配符1. 描述：將匹配所有的HTML標(biāo)記，所有的標(biāo)記都會(huì)改變的2. 語法：*color：red；3. 注意：“*”盡量少用，

3、因?yàn)镮E6不支持l 標(biāo)簽選擇器1. 描述：將匹配指定的HTML標(biāo)記2. 語法：h1 color：red3. 注意：CSS標(biāo)簽選擇器，與HTML標(biāo)記一樣，但是不能加尖括號(hào)l Class選擇器（類選擇器）-類選擇器是使用頻率最高的1. 描述：給一類HTML標(biāo)記加樣式。這里所指的“一類”是：每個(gè)HTML標(biāo)記都有一個(gè)Class屬性，且Class值一樣。Class屬性是公共屬性，每個(gè)標(biāo)記都有這個(gè)屬性2. 類選擇器的名稱，必須以“.”開頭，后跟HTML標(biāo)記的class屬性的值。如：.boxcolor：red；3. HTML標(biāo)記的Class屬性的值，不能以數(shù)字開頭l ID選擇器1. 描述：個(gè)指定ID的元素添

4、加樣式。2. 注意:網(wǎng)頁中HTML標(biāo)記的ID屬性的值，必須唯一的3. 每一個(gè)HTML標(biāo)記都有一個(gè)id的公共屬性。4. 注意：id屬性一般是給Js用的，不是讓你來加樣式的，class屬性只能給CSS樣式的不能給Js用5. Id選擇器的名稱，必須以“#”開頭，后跟HTML屬性的值l 組合選擇器1. 多元素選擇器a) 描述：給多個(gè)元素加同一個(gè)樣式多個(gè)選擇器之間用“，”隔開b) 舉例：h1,p,div,bodycolor：red；l 后代元素選擇器（最常用）1. 描述：給某個(gè)標(biāo)簽的某一個(gè)后代加元素樣式。選擇器用“空格”隔開2. 舉例：div .titlecolor：redl 子元素選擇器1. 描述：給

5、某個(gè)元素的子元素添加樣式2. 舉例：div h1.title（color：red）l CSS選擇器-基本選擇器（單個(gè)選擇器）1. 通配符“*”：將匹配所有的HTML標(biāo)記，只要中存在的標(biāo)記都會(huì)生效2. 標(biāo)簽選擇器：對(duì)應(yīng)于HTML標(biāo)記，有什么樣的HTML標(biāo)記，就有什么樣的鏢旗選擇器。如：pcolor：red3. 類選擇器：給HTML標(biāo)記中，class屬性值相同的元素，添加樣式。命名必須以“.”開頭。如：.news4. Id選擇器：給HTML標(biāo)記中，具有一id屬性的元素，添加樣式。唯一性。命名以“#”開頭。如：#newsl CSS選擇器-咋和選擇器（多個(gè)選擇器）1. 多元素選擇器：同時(shí)給多個(gè)元素添加

6、樣式，各個(gè)選擇之間用逗號(hào)“，”分開。如：p,h1,#box2. 后代元素選擇器：給某個(gè)元素的子元素添加樣式。用空格隔開。如：#box h13. 子元素選擇器：給某個(gè)元素的子元素添加樣式。用“”隔開。如：#boxh1四、 CSS尺寸屬性a) Width：元素寬度，一定要加px單位b) Height：元素高度。五、 CSS字體屬性a) Font-size：文字大小。如：font-size：14px；b) Font-family：字體。如：font-family：微軟雅黑；c) Font-style：斜體，取值：italic。如：font-style：italic；d) Font-weight：粗體

7、，取值：bold。如：font-weight：bold；六、 CSS文本屬性a) Color：文本顏色b) Text-decoration：文本修飾線，取值：none(無)，underline（上劃線），line-through（刪除線）c) Text-align：文本水平對(duì)齊方式，取值：left，center，rightd) Line-height：行高，可以用固定值，也可以用百分比。如：line-height：24px；line-height：150%；e) Text-indent：首行縮進(jìn)。如：text-indent：28px；f) Letter-spacing：字間距。七、 CSS為類

8、選擇器：給超鏈接加的樣式（連接的不同狀態(tài)加樣式）a) 一個(gè)超鏈接，有四個(gè)狀態(tài)：l 正常狀態(tài)（：link）：鼠標(biāo)沒放上之前連接的樣式l 放上狀態(tài)（：hover）：鼠標(biāo)放到連接上時(shí)樣式l 激活狀態(tài)（：active）：按住鼠標(biāo)左鍵不松開的樣式，這個(gè)樣式特別短暫。l 訪問過的狀態(tài)（：visited）：按下鼠標(biāo)左鍵，并彈起，這時(shí)樣式的效果l 在平常工作中，會(huì)使用以下寫法，來給連接加不同的樣式：a:link，a:visitedcolor：gray；text-decoration：none；/將“正常狀態(tài)”和“訪問過的狀態(tài)”合二為一a:hovercolor：red；text-decoration：under

9、line/鼠標(biāo)放上去的效果八、 CSS列表屬性a) List-style：列表樣式，取值：none。去掉項(xiàng)目符號(hào)或編號(hào)前面的各種符號(hào)。九、 CSS邊框?qū)傩裕好總€(gè)元素都可以加邊框線a) Border-left：左邊框線。l 格式：border-left：粗細(xì) 線型 線的顏色；l 線型：none（無線），solid（實(shí)線），dashed（虛線），dotted（點(diǎn)狀線）l 舉例：border-left：5px dashed red；b) Border-right：右邊框線。c) Border-top：上邊框線。d) Border-bottom：下邊框線。e) Border：同時(shí)給四個(gè)邊框線加邊框線。

10、十、 CSS內(nèi)邊距屬性：邊框線到內(nèi)容間的距離a) 注意：平常我們所說的width和height屬性，他們指內(nèi)容的寬度和高度，不包含內(nèi)，外邊距，邊框線b) Padding-left：左內(nèi)填充距離，左邊距到內(nèi)容間的距離c) Padding-right：右內(nèi)填充距離，右邊距到內(nèi)容間的距離d) Padding-top：上內(nèi)填充距離，上邊線到內(nèi)容間的距離。e) Padding-bottom：下內(nèi)填充距離，下邊線到內(nèi)容間的距離。f) 縮寫形式l Padding：10px；/四個(gè)邊的內(nèi)填充分別為10pxl Padding：10px 20px；/上下為10px ， 左右為20pxl Padding；5px 1

11、0px 20px；/上為5px ，左右為10px ， 下為20pxl Padding：5px 10px 15px 20px/順序一定是“上右下左”十一、 CSS外邊距屬性：邊線往外的距離a) Margin-left：左邊線往外的距離b) Margin-right：右邊線往外的距離c) Margin-top：上邊線往外的距離d) Margin-bottom：下邊線往外的距離。e) 簡寫式l Margin：10px；/四個(gè)外邊距分別為10pxl Margin：10px 20px；/上下邊距為10px，左右邊距為20pxl Margin：5px 10px 20px；/上邊距的距離為5px，左右邊距的

12、距離為10px ，下邊距的距離為20pxl Margin：5px 10px 15px 20px/順序一定是“上右下左”b) CSS背景屬性l Background-color：背景顏色l Background-image：背景圖片地址。如：background-image：url（images/bg.jpg）l Background-repeat:背景平鋪方式，取值:no-repeat(不平鋪)、repeat-x(水平方向)、repeat-y(垂直方向)l Background-position：背景定位1. 格式：background-position：水平方向定位 垂直方向定位2. 用英文

13、單詞定位：background-position：left | center | right | top | center | bottom；3. 用固定值定位：background-position：50px 50px;/背景距離容器的左邊50px，容器頂端50px4. 用百分比定位：background-position：50% 50%；/水平居中，垂直居中5. 用混合定位：background-position：left 10px；/背景靠左邊器，距離容器頂端10pxl 簡寫方式：1. Background：背景色 背景圖 是否定位 定位方式；2. 舉例：background：url（i

14、mages/bg.gif） no-repeat center center;3. 舉例：background：#ccc url(images/bg.gif) no-repeat left 10px;l CSS浮動(dòng)和清除1. Float：讓元素浮動(dòng)，取值：left（左浮動(dòng)）、right（右浮動(dòng)）2. Clear：清除浮動(dòng)，取值：left（清除左浮動(dòng)），right（清除右浮動(dòng)），both（同時(shí)清除上面的右浮動(dòng)和左浮動(dòng)）l CSS浮動(dòng)1. 浮動(dòng)的元素，將向左或向右浮動(dòng)，浮動(dòng)到包圍元素的邊上，或上一個(gè)浮動(dòng)元素的邊上為止l 浮動(dòng)元素，不再占用空間了，并且，浮動(dòng)元素的層級(jí)要高于普通元素l 浮動(dòng)元素，一定是

15、“塊元素”。不管他是什么元素。l 如果浮動(dòng)的元素，沒有指定寬度的話。浮動(dòng)后它將盡可能的變窄。因此，浮動(dòng)元素一般要定寬度和高度l 浮動(dòng)的功能：可以實(shí)現(xiàn)將多個(gè)塊元素并列排版l 如何讓包圍浮動(dòng)元素，包住元素？你就需要在浮動(dòng)元素的下邊，使用清除浮動(dòng)元素操作二、 CSS 清除浮動(dòng)a) CSS清除浮動(dòng)的功能有兩個(gè)：l 可以包圍元素從“視覺上”包圍浮動(dòng)元素l 清除之下的其它元素將恢復(fù)默認(rèn)排版l 有浮動(dòng)，就得有清除l 如果包圍元素指定了高度，那么可以不用清除浮動(dòng)b) 項(xiàng)目案例：l F:【HTML語言代碼文件2】傳智播客第五天CSS浮動(dòng)2.htmlbody,.KaiXue,ul,li,imgmargin:0px

16、;padding:0px;.KaiXueborder:1px solid #F90;width:660px;margin:20px auto;padding:10px;a:link,a:visitedfont-family:Courier New, Courier, monospace;color:#008;font-size:18px;text-decoration:none;a:hovercolor:#E00;.KaiXue imgwidth:300px;height:180px;padding:10px 14px;.KaiXue ullist-style:none;.KaiXue lif

17、loat:left;text-align:center;.KaiXue .clearclear:both; 圖像點(diǎn)擊 圖像點(diǎn)擊 圖像點(diǎn)擊 圖像點(diǎn)擊 三、 CSS繼承性a) CSS屬性繼承：外層元素的樣式會(huì)被內(nèi)層元素的樣式繼承。多個(gè)外層元素樣式最終會(huì)被疊加到內(nèi)層元素上b) 什么樣的CSS屬性能被繼承呢？l CSS文本屬性都會(huì)被繼承的：1. Color、font-size、font-family、font-style、font-weight、text-align、text-decoration、text-indent、letter-spacing、line-height提示：中的CSS屬性，會(huì)被所

18、有的子元素繼承。c) CSS的優(yōu)先級(jí)l 單個(gè)選擇器的優(yōu)先級(jí)1. 行內(nèi)樣式id選擇器class選擇器標(biāo)簽選擇器d) 多個(gè)選擇器的優(yōu)先級(jí)l 多個(gè)選擇器的優(yōu)先級(jí)，一般情況下指向越準(zhǔn)確，優(yōu)先級(jí)越高，特殊的情況下，我們需要假設(shè)一些值 如果標(biāo)簽選擇器 優(yōu)先級(jí)為1類選擇器 優(yōu)先級(jí)為10Id選擇器 優(yōu)先級(jí)為100行內(nèi)樣式 優(yōu)先級(jí)為1000e) 計(jì)算優(yōu)先級(jí).news h1color:red;優(yōu)先級(jí)：10+1=11.titlecolor:blue;優(yōu)先級(jí)：10Div .newscolor:red;優(yōu)先級(jí)：1+10+1=12H1 .titlecolor;blue;優(yōu)先級(jí)：1+10=11四、 Display屬性a)

19、功能:規(guī)則網(wǎng)頁元素是如何顯示的問題b) 取值：none(隱藏)、block(以塊元素顯示)、inline(以行內(nèi)元素顯示)l Block：可以實(shí)現(xiàn)將行內(nèi)元素轉(zhuǎn)換成塊元素l Inline：可以將塊元素轉(zhuǎn)換成行內(nèi)元素五、 Overflow屬性：當(dāng)內(nèi)容溢出時(shí)，該如何顯示a) Overflow：當(dāng)內(nèi)容溢出時(shí)，溢出的內(nèi)容該如何顯示。取值：visible(可見)、hidden(隱藏)、scroll(出現(xiàn)滾動(dòng)條)、auto(內(nèi)容超出自動(dòng)出現(xiàn)滾動(dòng)條)六、 Cursor光標(biāo)的類型a) Cursor：網(wǎng)頁中光標(biāo)的類型，取值：text（文本光標(biāo)）、help（幫助光標(biāo)）、wait（等待光標(biāo)）、pointer（手型）等

20、。七、 CSS定位a) Position：元素定位方式，取值：static、fixed、relative、absolutel Static：靜態(tài)定位（默認(rèn)、不定位）l Fixed：固定定位l Relative：相對(duì)定位l Absolute：絕對(duì)定位l 定位方式，要與定位屬性配合使用l 定位坐標(biāo)：指定定位的元素，偏離目標(biāo)元素多遠(yuǎn)的距離，取值：l Left：定位元素，距離目標(biāo)元素左邊的距離l Top：定位元素，距離目標(biāo)元素上邊的距離l Right：定位元素，距離目標(biāo)元素右邊的距離l Bottom：定位元素，距離目標(biāo)元素下邊的距離b) 固定定位，position：fixedl 固定定位，是相對(duì)于瀏覽

21、器窗口來進(jìn)行的定位偏移l 固定定位，不占空間，層級(jí)高于普通元素l 固定定位，如果不指定定位坐標(biāo)的話，固定定位元素位置在原地不動(dòng)了c) 相對(duì)定位，position：relativel 相對(duì)定位，是相對(duì)于“原來的自己”進(jìn)行定位l 相對(duì)定位，依然占據(jù)空間，層級(jí)高于普通元素l 如果不指定定位定位坐標(biāo)的話。相對(duì)定位元素的位置在原地不動(dòng)l 相對(duì)元素，原來是行內(nèi)元素，定位還是行內(nèi)元素，原來是塊元素，定位后還是塊元素提示：相對(duì)于定位和絕對(duì)定位，一般情況下是配合使用d) 絕對(duì)定位，position：absolutel 相對(duì)于祖先定位元素（相對(duì)定位，決定定位），來進(jìn)行的定位。1. 如果它的父元素沒有進(jìn)行任何定位的

22、話，在往上找定位l 決定定位元素，不占空間，層級(jí)要高于普通元素l 如果不指定定位坐標(biāo)的話，絕對(duì)定位元素的位置在原地不動(dòng)l 絕對(duì)元素，一定是“塊元素”八、 HTML引入CSS的方法a) 嵌入式l 通過標(biāo)記，來引入css樣式l 語法格式：l 提示：中的CSS樣式，只能給當(dāng)前網(wǎng)頁來使用l 同一個(gè)網(wǎng)頁，標(biāo)記可以多次出現(xiàn)b) 2萬聯(lián)式l 通過標(biāo)記，來引一個(gè)外部的CSS文件（.CSS），這樣可以實(shí)現(xiàn)公共的CSS代碼，被多個(gè)網(wǎng)頁使用l l 標(biāo)記的常用屬性1. Rel：也就是引入的是什么類型的文件。取值：stylesheet2. Type：內(nèi)容類型3. Href：引入的css文件地址提示：標(biāo)記放在標(biāo)記中同一個(gè)

23、網(wǎng)頁，可以使用多個(gè)來鏈入多個(gè)外部文件。九、 行內(nèi)式（主要用于JS控制元素的樣式）a) 每一個(gè)HTML標(biāo)記，都有一些公共的屬性：class、id、title、style。b) HTML標(biāo)記中的style屬性的值，與CSS中的一模一樣提示：行內(nèi)樣式中，CSS代碼不能寫的過多；行內(nèi)樣式中，多個(gè)CSS屬性不能換行，也就是一行寫完，行內(nèi)樣式優(yōu)先級(jí)是最高，比ID選擇器還要高十、 CSS表格屬性a) Border-collapse：表格邊框合并，取值：collapseb) 十一、 盒子模型a) 我們可以把每一個(gè)HTML標(biāo)記，都看成一個(gè)“盒子”b) 這個(gè)“盒子”有哪些特征：內(nèi)容的高度或?qū)挾取⑦吙蚓€、內(nèi)填充、外邊距。c) “盒子”的總寬度：內(nèi)容的寬度+邊框的寬度*2+左填充*2+左外邊距*2外邊距合并問題IE瀏