Web前端技術(shù)課件-3.CSS層疊樣式表基礎(chǔ)

CSS層疊樣式表基礎(chǔ)學(xué)習(xí)導(dǎo)圖3.1CSS基本概念3.1.1CSS概述CSS層疊樣式表是一種可控制網(wǎng)頁樣式并允許樣式與內(nèi)容相分離的一種技術(shù)CSS能夠?qū)W(wǎng)頁的布局、字體、顏色、背景等圖文實(shí)現(xiàn)更精確的控制CSS使得網(wǎng)頁的體積更小、下載速度更快，且可以實(shí)現(xiàn)多個頁面的自動更新3.1.2CSS基本語法CSS代碼主要由對象、屬性、屬性值三個基本部分組成。對象很重要，它指定了對哪些網(wǎng)頁元素進(jìn)行樣式設(shè)置，在CSS中對象也稱為選擇器(selector)。屬性是CSS語法中的關(guān)鍵字，它規(guī)定了格式修飾的一個方面。3.1.3在頁面中使用CSS內(nèi)聯(lián)樣式表：直接在HTML標(biāo)簽內(nèi)使用style屬性內(nèi)部樣式表：使用<style>標(biāo)簽在HTML文檔頭部定義在頁面中使用CSS外部樣式表：將CSS代碼寫入一個或多個文件后綴名為.css的文件中。當(dāng)樣式需要應(yīng)用于多個頁面時，使用<link>標(biāo)簽鏈接到樣式表（1）定義獨(dú)立的外部樣式文件（2）在頁面中通過<link>鏈接外部樣式文件3.2CSS選擇器3.2.1元素選擇器*是通配符選擇器，可以與任何元素匹配。選擇指定HTML元素(標(biāo)簽)，給選擇的元素設(shè)置樣式2.2.2類選擇器類(class)選擇器：選擇并設(shè)置一組元素的樣式3.2.3ID選擇器ID選擇器：為標(biāo)有特定id的HTML元素設(shè)置樣式3.2.4后代選擇器后代選擇器：選擇并設(shè)置元素后代的元素3.2.5子元素選擇器子元素選擇器：只選擇元素的子元素，不會擴(kuò)大到任意的后代元素3.2.6相鄰兄弟元素選擇器相鄰兄弟元素選擇器：選擇緊接在另一個元素后的元素，且二者有相同的父元素3.2.7兄弟元素選擇器兄弟元素選擇器：選擇一個元素后的元素，且二者有相同的父元素3.2.8復(fù)合選擇器復(fù)合選擇器包括交集選擇器和并集選擇器兩種類型。交集選擇器是由兩個選擇器直接連接構(gòu)成，結(jié)果是兩者各自元素范圍的交集，其中第一個選擇器必須是元素選擇器，第二個選擇器是類選擇器或ID選擇器，兩個選擇器之間必須連續(xù)寫，不能有空格。3.2.9屬性選擇器可以為擁有指定屬性的HTML元素設(shè)置樣式3.2.8復(fù)合選擇器并集選擇器：對各個基本選擇器所選擇的范圍同時選中，任何形式的基本選擇器都可以作為并集選擇器的一個組成部分，各個元素之間用逗號分隔。3.2.9屬性選擇器[title]{color:red;}

給具有title屬性的所有元素設(shè)置樣式；[title=test]{color:red;}

給具有title屬性且屬性值為test的元素設(shè)置樣式；[title~=hello]{color:red;}給包含指定值的title屬性的所有元素設(shè)置樣式，一般適用于由空格分隔的屬性值，如<h2title="helloworld">Helloworld</h2>[lang|=en]{color:red;}

給帶有包含指定值的lang屬性的所有元素設(shè)置樣式，一般適用于由連字符分隔的屬性值，如<plang="en-us">Hi!</p>。3.2.10偽類選擇器偽類：同一個標(biāo)簽，根據(jù)其不同的狀態(tài)，有不同的樣式,用冒號表示。靜態(tài)偽類:僅用于超鏈接的樣式，如:link，:visited動態(tài)偽類，是所有元素都適用的樣式，如:hover,:active,:focus等a:link{color:red;}/*超鏈接點(diǎn)擊之前是紅色*/a:visited{color:green;}/*超鏈接點(diǎn)擊之后是綠色*/a:hover{color:green;}/*鼠標(biāo)懸停，放到標(biāo)簽上的時候*/a:active{color:black;}/*鼠標(biāo)點(diǎn)擊鏈接，但是不松手的時候*/偽類選擇器分為兩類：靜態(tài)偽類、動態(tài)偽類3.2.10偽類選擇器/*輸入元素獲取焦點(diǎn)時：*/input:focus{color:white;background-color:#6a6a6a;}/*鼠標(biāo)放在元素上時顯示藍(lán)色*/label:hover{color:blue;}/*點(diǎn)擊元素鼠標(biāo)沒有松開時顯示紅色*/label:active{color:red;}3.2.11偽元素選擇器h1:before可以在元素內(nèi)容前面插入新內(nèi)容h1:after可以在元素內(nèi)容之后插入新內(nèi)容偽元素是原本不在DOM中的元素，這個元素是新創(chuàng)建的元素。3.3CSS常用屬性3.3.1字體屬性字體屬性用來定義文本所使用的字體系列、大小、粗細(xì)、樣式等3.3.2文本屬性文本屬性可定義文本的外觀、進(jìn)行段落排版。通過文本屬性，可以改變文本的字符間距、對齊方式、修飾方式、文本縮進(jìn)等。3.3.2文本屬性3.3.3顏色和背景屬性3.3.3顏色和背景屬性background-repeat屬性用來設(shè)置是否及如何重復(fù)背景圖像，默認(rèn)屬性值為repeat。3.3.3顏色和背景屬性background-position屬性設(shè)置背景圖像的起始位置，其取值有三種形式：background-position:xposypos|x%y%|xy第一種取值形式為xposypos，表示使用預(yù)定義關(guān)鍵字定位，其中水平方向可取值left|center|right，垂直方向可選top|center|bottom。第二種取值形式為x%y%，分別表示水平位置和垂直位置的百分比，其中左上角是0%0%，右下角是100%100%。第三種取值形式為xy，分別表示水平位置和垂直位置的像素值，其中左上角是00。3.3.3顏色和背景屬性background-attachment:設(shè)置背景圖像是否固定或隨頁面的其余部分滾動3.3.4列表屬性在CSS中，使用list-style設(shè)置列表樣式。可以設(shè)置的屬性包括：3.3.4列表屬性3.3.5表格屬性可以設(shè)置的屬性包括：3.3.5表格屬性3.4CSS盒子模型3.4.1盒子組成所有頁面元素都可以看成是一個盒子，占據(jù)著一定的頁面空間盒子模型由內(nèi)容(content)、邊框(border)、內(nèi)邊距(padding)、外邊距(margin)4個部分組成盒子的寬度=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界3.4.1盒子組成3.4.2盒子邊框?qū)傩詁order是盒子邊框，形成盒子的邊界，一般用于分離元素border的屬性主要有三個：顏色(color)、寬度(width)、樣式(style)3.4.2盒子邊框?qū)傩越o不同邊框設(shè)置不同的屬性值只設(shè)置一條邊框的某一屬性3.4.3盒子內(nèi)邊距屬性padding是盒子的內(nèi)邊距，即邊框和內(nèi)容之間的空白區(qū)域設(shè)置1個屬性值表示上下左右4個內(nèi)邊距的值；設(shè)置2個屬性值表示上下內(nèi)邊距和左右內(nèi)邊距的值；設(shè)置3個屬性值，前者表示上邊距屬性值，中間表示左右內(nèi)邊距屬性值，后者表示下內(nèi)邊距值；設(shè)置4個屬性值，表示上、右、下、左內(nèi)邊距的值，呈順時針方向3.4.3盒子內(nèi)邊距屬性可以使用padding-top,padding-right,padding-bottom,padding-left單獨(dú)設(shè)置某一方向的內(nèi)邊距3.4.4盒子外邊距屬性margin是盒子的外邊距，即頁面上元素和元素之間的距離3.5CSS元素布局與定位3.5.1標(biāo)準(zhǔn)文檔流標(biāo)準(zhǔn)文檔流是指不使用與布局和定位相關(guān)CSS規(guī)則時，頁面元素默認(rèn)的排列規(guī)則。頁面元素分為兩類：塊級元素(block)：左右撐滿占據(jù)一行，和同級兄弟元素依次垂直排列，如div,li元素等行內(nèi)元素(inline)：相鄰元素之間橫向排列，到文檔右端自動換行，如span,a元素等3.5.2元素在標(biāo)準(zhǔn)流中的定位span1span2margin-rightmargin-left行內(nèi)元素的水平間距是由這兩個元素所在盒子的外邊距之和決定的。3.5.2元素在標(biāo)準(zhǔn)流中的定位div1div2Max(margin-bottom,margin-top)兩個塊級元素之間的垂直距離不是第1個元素的margin-bottom加第2個元素的margin-top，而是兩者之中較大者3.5.2元素在標(biāo)準(zhǔn)流中的定位當(dāng)一個元素包含另一個元素時，就形成父子關(guān)系，其中子元素的margin將以父塊的內(nèi)容為參考。外層的虛線邊框是父div的內(nèi)容區(qū)域，可以看出，子元素的margin以及其它部分都是從父元素的內(nèi)容區(qū)域開始計(jì)算的。3.5.2元素在標(biāo)準(zhǔn)流中的定位3.5.2元素在標(biāo)準(zhǔn)流中的定位margin為負(fù)值時，元素之間的定位。當(dāng)元素的margin設(shè)為負(fù)值時，會使元素所在的盒子向反方向移動，可能導(dǎo)致兩個元素的重疊，產(chǎn)生一個元素覆蓋在另一個元素上面的效果。3.5.3元素的定位屬性元素通過position屬性實(shí)現(xiàn)定位，分為靜態(tài)定位（static）、相對定位（relative）、絕對定位（absolute）和固定定位（fixed）四種定位方式。relative:元素的位置將相對其原本的標(biāo)準(zhǔn)位置偏移指定的距離3.5.3元素的定位屬性absolute：元素可以放在頁面上的任意位置，位置相對于最近已定位的父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>3.5.3元素的定位屬性fixed：元素位置相對于瀏覽器窗口是固定位置，拖動滾動條時，元素位置不會發(fā)生變化3.5.4元素的浮動屬性在標(biāo)準(zhǔn)流中，一個塊級元素在水平方向會自動伸展，直到包含它的父級元素的邊界；在垂直方向上與兄弟元素依次排列，不能并排。3.5.4元素的浮動屬性如果將float屬性設(shè)置為left或right，那么元素就會向其父級元素的左側(cè)或右側(cè)靠緊，同時盒子的寬度不再伸展，將根據(jù)盒子中內(nèi)容寬度決定其寬度。標(biāo)準(zhǔn)流div1float:leftdiv2float:leftdiv3float:left3.5.4元素的浮動屬性右浮動效果標(biāo)準(zhǔn)流div1float:rightdiv2float:right3.5.4元素的浮動屬性清除浮動效果clear:left|right|both|nonenone為默認(rèn)值，允許元素兩邊都可以有浮動對象，left不允許左邊有浮動對象，right不允許右邊有浮動對象，both不允許有浮動對象。頁面中有兩個元素div1、div2，它們都設(shè)置為左浮動。如果希望div2能排列在div1下邊，就像div1沒有浮動，div2左浮動那樣，只要在div2中使用clear:left;指定div2元素左邊不允許出現(xiàn)浮動元素，這樣div2就會移到下一行。3.5.5元素的顯示屬性元素的顯示可以通過display屬性進(jìn)行設(shè)置，利用display屬性可以實(shí)現(xiàn)塊級元素和行內(nèi)元素的相互轉(zhuǎn)換。3.5.5元素的顯示屬性設(shè)置display:inline可以將任意的塊級元素轉(zhuǎn)換為行內(nèi)元素，設(shè)置該屬性值后，元素將擁有行內(nèi)元素的特性?？梢耘c其他行內(nèi)元素共享一行，不會獨(dú)占一行；不能更改元素的height和width屬性值，大小由內(nèi)容撐開；可以使用padding屬性，設(shè)置上下左右值都有效，而使用margin屬性時，僅left和right屬性會產(chǎn)生邊距效果，設(shè)置top和bottom屬性沒有任何效果。3.5.5元素的顯示屬性設(shè)置display:block可以將任意的行內(nèi)元素轉(zhuǎn)換為塊級元素，元素將擁有塊級元素的特性。即元素將獨(dú)占一行，在不設(shè)置自己的寬度的情況下，塊級元素會默認(rèn)填滿父級元素的寬度；能夠改變元素的height和width值；可以設(shè)置padding、margin的各個屬性值，top、left、bottom、right都能夠產(chǎn)生邊距效果。3.5.5元素的顯示屬性在設(shè)計(jì)水平導(dǎo)航欄效果時，通常希望多個導(dǎo)航鏈接項(xiàng)處于同一行，即呈現(xiàn)行內(nèi)元素的特征。同時，還希望設(shè)置各個導(dǎo)航鏈接項(xiàng)的寬度和高度，即同時兼有塊級元素的特征。此時，可以設(shè)置display屬性值為inline-block，該屬性值結(jié)合了inline與block的一些特點(diǎn)，使得塊級元素不再獨(dú)占一行。在