網(wǎng)頁前端-CSS30-基礎(chǔ)

1、WEB DESIGN 網(wǎng)頁前端-CSS3.0 網(wǎng)頁前端開發(fā)系列課程 網(wǎng)頁前端開發(fā)系列-CSS3.0 CSS3.0選擇器 CSS的發(fā)展歷程 CSS1 作為一項(xiàng)W3C推薦，CSS1發(fā)布于 1996 年 12 月 17 日。CSS1提供有關(guān)字體、顏色、位置和 文本屬性的基本信息。1999 年 1 月 11 日，此推薦被重新修訂。 CSS2 作為一項(xiàng) W3C 推薦，CSS2發(fā)布于 1999 年 1 月 11 日。CSS2.0是一套全新的樣式表結(jié)構(gòu)， 是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一樣，CSS2.0推薦的是一套內(nèi)容和表現(xiàn) 效果分離的方式。 CSS3 被w3c推薦的產(chǎn)品，是CS

2、S技術(shù)的升級(jí)版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。這些模塊 包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局 等、動(dòng)畫特效等，這些模塊從2001年到今天都處在開發(fā)和完善之中，是下一代WEB標(biāo)準(zhǔn)。 網(wǎng)頁前端開發(fā)系列-CSS3.0 CSS3.0選擇器 后代級(jí)別選擇器 選擇器例子例子描述 :only-childp:only-child匹配屬于父元素中唯一的 元素。只有一個(gè)標(biāo)簽時(shí)。 :nth-child(n) p:nth-child(2) 匹配父元素中的第2個(gè)子 元素。n 可以是數(shù)字、關(guān) 鍵詞或公式Odd 和 even 是可用于匹配下標(biāo)是奇數(shù)或 偶數(shù)的子元素

3、的關(guān)鍵詞（第一個(gè)子元素的下標(biāo)是 1）如 果是公式，n從0開始遞增。 :nth-last-child(n)p:nth-last-child(2) 同上，從最后一個(gè)子元素開始計(jì)數(shù)。 :last-child p:last-child 選擇屬于其父元素最后一個(gè)子元素每個(gè) 元素。 :root :root 選擇文檔的根元素。 :emptyp:empty選擇沒有子元素的每個(gè) 元素（包括文本節(jié)點(diǎn)）。 同輩級(jí)別選擇器 選擇器例子例子描述 element1element2pul 選擇前面有 元素的每個(gè) 元素。 :first-of-type p:first-of-type 匹配同級(jí)兄弟元素中的第一個(gè) 元素 :las

4、t-of-typep:last-of-type匹配同級(jí)兄弟元素中的最后一個(gè) 元素 網(wǎng)頁前端開發(fā)系列-CSS3.0 CSS3.0選擇器 屬性選擇器 選擇器例子例子描述 :nth-of-type(n) p:nth-of-type(2) 匹配同類型中的第n個(gè)同級(jí)兄弟元素p，n 可以是數(shù)字、 關(guān)鍵詞或公式。Odd 和 even 是可用于匹配下標(biāo)是奇 數(shù)或偶數(shù)的子元素的關(guān)鍵詞（第一個(gè)子元素的下標(biāo)是 1 ） :nth-last-of-type(n) p:nth-last-of-type(2)同上，但是從最后一個(gè)元素開始計(jì)數(shù)。 選擇器 例子 例子描述 attribute|=value lang|=en 選擇

5、 lang 屬性值以 en 開頭的所有元 素。必須是用-連接起來的詞。 attribute$=value asrc$=.pdf 選擇其 src 屬性以 .pdf 結(jié)尾的所有 元素。 attribute=value asrc=https 選擇其 src 屬性值以 https 開頭的每個(gè) 元素。 attribute target 選擇帶有 target 屬性所有元素。 attribute=value target=_blank 選擇 target=_blank 的所有元素。 attribute=value title=flower 選擇 title 屬性包含單詞 flower 的所 有元素。用空格

6、連接的內(nèi)容。 attribute*=value asrc*=abc選擇其 src 屬性中包含 abc 子串的每 個(gè) 元素。 網(wǎng)頁前端開發(fā)系列-CSS3.0 CSS3.0選擇器 UI偽類選擇器 選擇器 例子 例子描述 :enabled input:enabled選擇每個(gè)啟用的 元素。 :disabledinput:disabled 選擇每個(gè)禁用的 元素 :checked input:checked選擇每個(gè)被選中的 元素。 :not(selector):not(.pi) 選擇非 元素的每個(gè)元素。可以是類 樣式或是ID選擇器，但輸寫要按CSS選 擇器輸寫方式。 :selection :selecti

7、on選擇被用戶選取的元素部分。 :target#nav:target匹配相關(guān)URL指向的E元素 網(wǎng)頁前端開發(fā)系列-CSS3.0 CSS3.0邊框?qū)傩?瀏覽器前綴 IE瀏覽器-ms- Firefox-moz- Opera-o- Chrome-webkit- Safari-webkit- CSS3.0前綴 border邊框?qū)傩?屬性描述 border-color 相關(guān)屬性： border-top-colors, border-right-colors, border-bottom-colors , border-left-colors 設(shè)置對(duì)象邊框的顏色。 使用CSS3的border-radius

8、屬性，如果你 設(shè)置了border的寬度是X px，那么你就可以在這個(gè)border上使用 X種顏色，每種顏色顯示1px的寬度。如果說你的border的寬度是 10個(gè)像素，但是只聲明了5或6種顏色，那么最后一個(gè)顏色將被添 加到剩下的寬度。必須分項(xiàng)設(shè)置。 目前只有火狐支持 網(wǎng)頁前端開發(fā)系列-CSS3.0 CSS3.0邊框?qū)傩?屬性描述 border-image border-image-source：用在邊框的圖片的路徑。 border-image-slice：圖片邊框向內(nèi)偏移。 border-image-width：圖片邊框的寬度。 border-image-outset：邊框圖像區(qū)域超出邊框的量

9、。 border-image-repeat：圖像邊框是否應(yīng)平鋪(repeated)、 鋪滿(rounded)或拉伸(stretched)。 可以同時(shí)設(shè)置四個(gè)邊，按上-右-下-左 border-radius 相關(guān)屬性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius 用于創(chuàng)建圓角。 如果任意一個(gè)值為0，則這個(gè)角是矩形，不會(huì)是圓的。 值不允許是負(fù)值。 box-shadow陰影水平偏移值（可取正負(fù)值）；陰影垂直偏移值（可取 正負(fù)值）；陰影

10、模糊值；陰影顏色 網(wǎng)頁前端開發(fā)系列-CSS3.0 CSS3.0背景屬性 屬性描述 background-originborder： 從border區(qū)域開始顯示背景。 padding： 從padding區(qū)域開始顯示背景。 content： 從content區(qū)域開始顯示背景。 background-clipborder-box： 從border區(qū)域向外裁剪背景。 padding-box： 從padding區(qū)域向外裁剪背景。 content-box： 從content區(qū)域向外裁剪背景。 no-clip： 從border區(qū)域向外裁剪背景。 background-size cover:把背景圖像擴(kuò)展至足

11、夠大，以使背景圖像完全覆蓋背 景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū) 域中。 contain:把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完 全適應(yīng)內(nèi)容區(qū)域。 設(shè)置背景圖片的大小。指定背景大小，以象素或百分比顯 示。當(dāng)指定為百分比時(shí)，大小會(huì)由所在區(qū)域的寬度、高度， 以及background-origin的位置決定。 background 多重背景圖象，可以把不同背景圖象只放到一個(gè)塊元素里。 多個(gè)圖片url之間使用逗號(hào)隔開即可；如果有多個(gè)背景圖片， 而其他屬性只有一個(gè)（例如background-repeat只有一 個(gè)），表明所有背景圖片應(yīng)用該屬性值。 background背景屬性 網(wǎng)頁

12、前端開發(fā)系列-CSS3.0 CSS3.0文本屬性 屬性描述 text-shadow 設(shè)置或檢索對(duì)象中文本的文字是否有陰影及模糊效果?？?以設(shè)定多組效果，方式是用逗號(hào)隔開。 font-face font-family: myFirstFont; src: url(Sansation_Light.ttf), 谷歌支持local(字體名稱),來優(yōu)先使用本地字體。 font-face 能夠加載服務(wù)器端的字體文件，讓客戶端顯 示客戶端所沒有安裝的字體。 在新的 font-face 規(guī)則中，您必須首先定義字體的名稱 （比如 myFirstFont），然后指向該字體文件。 如需為 HTML 元素使用字體，請(qǐng)

13、通過 font-family 屬性來 引用字體的名稱 (myFirstFont) Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字體。 Internet Explorer 9+ 支持新的 font-face 規(guī)則，但是 僅支持 .eot 類型的字體 (Embedded OpenType)。 text文本屬性 網(wǎng)頁前端開發(fā)系列-CSS3.0 CSS3.0顏色屬性 屬性描述 HSL colors Hue(色調(diào))。 0(或360)表示紅色，120表示綠色，240表 示藍(lán)色，當(dāng)然可

14、取其他數(shù)值來確定其它顏色； Saturation(飽和度)。 取值為0%到100%之間的值； Lightness(亮度)。 取值為0%到100%之間的值； HSLA colorsHue(色調(diào))。 0(或360)表示紅色，120表示綠色，240表示 藍(lán)色，當(dāng)然可取其他數(shù)值來確定其它顏色； Saturation(飽 和度)。 取值為0%到100%之間的值； Lightness(亮度)。 取值為0%到100%之間的值； alpha(透明度)。 取值在0到1之間； RGBAR：紅色值。正整數(shù) | 百分?jǐn)?shù) G：綠色值。正整數(shù) | 百分?jǐn)?shù) B：藍(lán)色值。正整數(shù) | 百分?jǐn)?shù) A：透明度。取值01之間 colo

15、r顏色屬性 網(wǎng)頁前端開發(fā)系列-CSS3.0 CSS3.0顏色屬性 線性漸變 顏色從頂部向底部漸變（Top Bottom） background-image:linear-gradient(to top,orange,green); 顏色從底部向頂部漸變（bottomtop） background-image:linear-gradient(to bottom,orange,green); 顏色從左向右漸變（leftright） background-image:linear-gradient(to left,orange,green); 顏色從右向左漸變（rightleft） backgrou

16、nd-image:linear-gradient(to right,orange,green); 從右下角向左上角 background-image:linear-gradient(to top left,orange,green); 從左下角到右上角線性漸變 background-image:linear-gradient(to top right,orange,green); 網(wǎng)頁前端開發(fā)系列-CSS3.0 CSS3.0顏色屬性 從右上角到左下角線性漸變 background-image:linear-gradient(to bottom left,orange,green); 從左上角向

17、右下角線性漸變 background-image:linear-gradient(to bottom right,orange,green); 使用百分比定義多漸變： background-image:-webkit-linear-gradient( to left, rgba(255,0,0,0) 0%, rgba(255,0,0,0.8) 20%, rgba(255,0,0,1) 40%, rgba(255,0,0,1) 90%, ); 網(wǎng)頁前端開發(fā)系列-CSS3.0 CSS3.0顏色屬性 徑向漸變 基本用法 background-image: radial-gradient(hsla(1

18、20,70%,60%,.9),hsla(360,60%,60%,.9); 圓形漸變 background-image: radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9); 橢圓漸變 background-image: radial- gradient(ellipse,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9); 使用關(guān)鍵字漸變（圓心位置都在“200px,150px”處，主要半徑為50px，次要半徑為150px） background-image: radial-gradien

19、t(50px 150px at 200px 150px,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9); top：設(shè)置徑向圓心點(diǎn)在容器的頂邊中心點(diǎn)處，與at 50% 0%效果等效。 right：設(shè)置徑向漸變圓心點(diǎn)在容器右邊中心點(diǎn)處，與at 100% 50%的效果等同 網(wǎng)頁前端開發(fā)系列-CSS3.0 CSS3.0顏色屬性 bottom：設(shè)置徑向漸變圓心點(diǎn)在容器底邊中心點(diǎn)處，剛好與“top”關(guān)鍵詞位置相反，與at 50% 100% left：設(shè)置徑向漸變圓心點(diǎn)在容器左邊中心點(diǎn)處，剛好與“right”關(guān)鍵詞位置相反，與at 0% 50%效果等同。 top left

20、：設(shè)置徑向漸變圓心點(diǎn)在容器的左角頂點(diǎn)處，與關(guān)鍵詞“l(fā)et top”和at 0 0效果等同。 top right：設(shè)置徑向漸變圓心點(diǎn)在容器右角頂點(diǎn)處，與“right top”關(guān)鍵詞與at 100% 0效 果等同。 bottom right：設(shè)置徑向漸變的圓心點(diǎn)在容器右下角頂點(diǎn)處，與關(guān)鍵詞“right bottom”和 at 100% 100%效果等同 bottom left：設(shè)置徑向漸變圓心在容器左下角頂點(diǎn)處，與關(guān)鍵詞“l(fā)eft bottom”和 at 0% 100%效果等同。 center：設(shè)置徑向漸變中心位置在容器的中心點(diǎn)，相當(dāng)于at 50 50。 網(wǎng)頁前端開發(fā)系列-CSS3.0 CSS3.

21、0用戶界面屬性 用戶界面屬性 屬性描述 columns：寬度 | 欄目數(shù) column-count:auto | 整數(shù) column-width： | auto 可以同時(shí)定義多欄的數(shù)目和每欄寬度。 需要添加前綴 column-gap :normal | 定義兩欄之間的間距距離。 需要添加前綴 column-rule: | | column-rule-width：寬度 column-rule-style： 樣式 column-rule-color:顏色 定義每欄之間邊框的寬度,樣式和顏色。 需要添加前綴 box-sizing： content-box | border-box | inherit

22、改變?nèi)萜鞯暮心Ｐ徒M成方式。 content-box: 此值維持css2.1盒模型的組成模式， border|padding|content element width=border+padding+content border-box: 此值改變css2.1盒模型組成模式， content|border|padding element width=content 需要添加前綴 resize ： none | both | horizontal | vertical | inherit使元素的區(qū)域可縮放，調(diào)節(jié)元素尺寸大小。適用于任意獲 得overflow條件的容器。 網(wǎng)頁前端開發(fā)系列-CSS3.

23、0 CSS3.0用戶界面屬性 屬性描述 outline：outline-color | outline-style | outline- width | outline-offset | inherit outline-width： thin | medium | thick | outline-style：none | dotted | dashed | solid | double | groove | ridge | inset | outset outline-offset： | inherit 最好單獨(dú)輸寫 outline-width： | inherit outline （輪廓）是

24、給元素周圍繪制輪廓外邊框，通過設(shè) 置一個(gè)數(shù)值使邊框邊緣的外圍偏移，可起到突出元素的作 用。 輪廓線不會(huì)占據(jù)空間，也不一定是矩形。 網(wǎng)頁前端開發(fā)系列-CSS3.0 CSS3.0基礎(chǔ)盒模式屬性 屬性描述 overflow-x：visible | auto | hidden | scroll 檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定寬度時(shí)如何管理內(nèi)容。 overflow-y ： visible | auto | hidden | scroll 檢索或設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度時(shí)如何管理內(nèi)容。 基礎(chǔ)盒模式 網(wǎng)頁前端開發(fā)系列-CSS3.0 CSS3.02D轉(zhuǎn)換屬性 2D轉(zhuǎn)換屬性 屬性 描述 transfor

25、m 向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。 transform-origin 允許你改變被轉(zhuǎn)換元素的位置。 可以使用數(shù)值、百分比、或是 left center right top center bottom 函數(shù) 描述 translate(x,y) 定義 2D 轉(zhuǎn)換，沿著 X 和 Y 軸移動(dòng)元素。 translateX(n) 定義 2D 轉(zhuǎn)換，沿著 X 軸移動(dòng)元素。 translateY(n) 定義 2D 轉(zhuǎn)換，沿著 Y 軸移動(dòng)元素。 scale(x,y) 定義 2D 縮放轉(zhuǎn)換，改變?cè)氐膶挾群透叨取?scaleX(n) 定義 2D 縮放轉(zhuǎn)換，改變?cè)氐膶挾取?scaleY(n) 定義 2D 縮放轉(zhuǎn)換，改變?cè)氐母叨取?rotate(angle) deg:角度 rad:弧度定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。 skew(x-angle,y-angle) deg:角度 rad:弧度定義 2D 傾斜轉(zhuǎn)換，沿著 X 和 Y 軸。 skewX(an