2022年CSS知識(shí)點(diǎn)總結(jié)整理版_第1頁
2022年CSS知識(shí)點(diǎn)總結(jié)整理版_第2頁
2022年CSS知識(shí)點(diǎn)總結(jié)整理版_第3頁
2022年CSS知識(shí)點(diǎn)總結(jié)整理版_第4頁
2022年CSS知識(shí)點(diǎn)總結(jié)整理版_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1CSS1.1css是什么CSS指層疊樣式表(Cascading

Style

Sheets)樣式定義如何顯示

HTML元素樣式普通存儲(chǔ)在樣式表【.css文獻(xiàn)、css區(qū)域】中把樣式添加到HTML4.0中,是為理解決內(nèi)容與體現(xiàn)分離問題外部樣式表可以極大提高工作效率外部樣式表普通存儲(chǔ)在

CSS文獻(xiàn)中各種樣式定義可層疊為一1.2css作用樣式表解決了html內(nèi)容與體現(xiàn)分離使用樣式表極大提高了工作效率。1.3css書寫規(guī)則本語法Css規(guī)則重要由兩某些構(gòu)成1.選取器2.一條或多條屬性聲明選取器重要作用是為了擬定需要變化樣式HTML元素每一條聲明由一種屬性和一種值構(gòu)成,使用花括號(hào)來包圍聲明,屬性與值之間使用冒號(hào)(:)分開如圖:值單位書寫注意事項(xiàng)如果值為若干單詞,則要給值加引號(hào)各種聲明之間使用分號(hào)(;)分開css對大小寫不敏感,如果涉及到與html文檔一起使用時(shí),class與id名稱對大小寫敏感1.4導(dǎo)入css方式第一種:內(nèi)聯(lián)樣式表要使用內(nèi)聯(lián)樣式,你需要在有關(guān)標(biāo)簽內(nèi)使用樣式(style)屬性。Style屬性可以包括任何CSS屬性例如:<divstyle=”border:1pxsolidblack”>這是一種DIV</div>注意:慎用這種方式,它將內(nèi)容與顯示混合在一起,損失了樣式表優(yōu)勢。普通狀況下,這種方式只有在一種標(biāo)簽上只應(yīng)用一次樣式時(shí)才會(huì)使用第二種:內(nèi)部樣式表我們可以使用<style>標(biāo)簽在html文檔<head>中來定義樣式表。例如:這種方式,樣式只適合應(yīng)用于一種頁面第三種:外部樣式表如果想要在各種頁面使用同一種樣式表,可以使用外部樣式表來導(dǎo)入。我們可以在html頁面上使用<link>標(biāo)簽來導(dǎo)入外部樣式表。例如:瀏覽器會(huì)從mystyle.css文獻(xiàn)中讀取樣式,并對頁面上html進(jìn)行修飾。外部樣式表,應(yīng)當(dāng)以css為后綴來保存,可以使用任意文本編輯器對css文獻(xiàn)進(jìn)行編輯。第四種:@import導(dǎo)入這種方式也是外部導(dǎo)入。@import與引用外部樣式表區(qū)別【理解】1.@import這種方式只有firefox支持,而ie不支持。2.@import這種方式導(dǎo)入css,會(huì)在整個(gè)頁面加載后,才會(huì)加載樣式。如果網(wǎng)絡(luò)不好狀況下,會(huì)先看到無樣式修飾頁面,閃爍一下后,才會(huì)看到有樣式修飾頁面。而使用外部樣式表,會(huì)先裝載樣式表,這樣看到就是有樣式修飾頁面。@import不支持通過javascript修改樣式,而link支持。優(yōu)先級(jí)問題內(nèi)聯(lián)樣式表>內(nèi)部樣式表>外部樣式表:就近原則1.5CSS選取器css選取器重要是用于選取需要添加樣式html元素。對于css來說,它選取器有諸多,我們重要簡介如下幾種: id選取器id選取器使用#引入,它引用是id屬性中值。類選取器類選取器使用時(shí),需要在類名前加一種點(diǎn)號(hào)(.)項(xiàng)目中,絕大部都是用類選取器排版元素選取器這是最常用選取器,簡樸說,文檔中元素就是選取器屬性選取器如果需要選取有某個(gè)屬性元素,而無論屬性是什么,可以使用屬性選取器偽類css偽類用于向某些選取器添加特殊效果。下面我們簡介一下錨偽類。在支持css瀏覽器中,鏈接不同狀態(tài)都可以不同方式顯示這些狀態(tài)涉及:活動(dòng)狀態(tài),已被訪問狀態(tài),未被訪問狀態(tài),和鼠標(biāo)懸念狀態(tài)。層級(jí)選取器Id、元素、類、屬性選取器結(jié)合1.6CSS屬性字體Css字體屬性定義文本字體系列,大小,加粗,風(fēng)格(如斜體)和變形(如小型大寫字母)慣用屬性:font:簡寫屬性,作用是把所有針對字體屬性設(shè)立在一種聲明中?！緎tylesizefamily】font-family:定義字體系列font-size:定義字體尺寸font-style:定義字體風(fēng)格文本CSS文本屬性可定義文本外觀。通過文本屬性,您可以變化文本顏色、字符間距,對齊文本,裝飾文本,對文本進(jìn)行縮進(jìn),等等。慣用屬性color:定義文本顏色text-align:定義文本對齊方式letter-spacing:定義字符間隔背景CSS容許應(yīng)用純色作為背景,也容許使用背景圖像創(chuàng)立相稱復(fù)雜效果。CSS在這方面能力遠(yuǎn)遠(yuǎn)在HTML之上。慣用屬性:background:簡寫屬性,作用是將背景屬性設(shè)立在一種聲明中background-color:定義背景顏色background-image:定義背景圖片background-position:定義背景圖片起始位置【left,center,right】background-repeat:定義背景圖片與否及如何重復(fù)尺寸CSS尺寸(Dimension)屬性容許你控制元素高度和寬度。慣用屬性:width:設(shè)立元素寬度height:設(shè)立元素高度 列表CSS列表屬性容許你放置、變化列表項(xiàng)標(biāo)志,或者將圖像作為列表項(xiàng)標(biāo)志。慣用屬性:list-style:簡寫屬性。用于把所有用于列表屬性設(shè)立于一種聲明中。list-style-image:定義列表項(xiàng)標(biāo)志為圖象list-style-position:定義列表項(xiàng)標(biāo)志位置list-style-type:定義列表項(xiàng)標(biāo)志類型。表格CSS表格屬性可以協(xié)助您極大地改進(jìn)表格外觀慣用屬性:border-collapse:定義與否把表格邊框合并為單一邊框。border-spacing:定義分隔單元格邊框距離caption-side:定義表格標(biāo)題位置【top,bottom】輪廓輪廓(outline)是繪制于元素周邊一條線,位于邊框邊沿外圍,可起到突出元素作用。CSSoutline屬性規(guī)定元素輪廓樣式、顏色和寬度。慣用屬性:outline:在一種聲明中設(shè)立所有輪廓屬性outline-color:定義輪廓顏色outline-style:定義輪廓樣式outline-width:定義輪廓寬度定位CSS定位(Positioning)屬性容許你對元素進(jìn)行定位。定位基本思想很簡樸,它容許你定義元素框相對于其正常位置應(yīng)當(dāng)浮現(xiàn)位置,或者相對于父元素、另一種元素甚至瀏覽器窗口自身位置CSS有三種基本定位機(jī)制:普通流、浮動(dòng)和絕對定位。慣用屬性:position:把元素放置到一種靜態(tài),相對,絕對,或固定位置中。top:定義了定位元素上外邊距邊界與其包括塊上邊界之間偏移量right:定義了定位元素右外邊距邊界與其包括塊右邊界之間偏移left:定義了定位元素左外邊距邊界與其包括塊左邊界之間偏移bottom:定義了定位元素下外邊距邊界與其包括塊下邊界之間偏移。相對定位是一種非常容易掌握概念。如對一種元素進(jìn)行相對定位,它將出當(dāng)前它所在位置上。然后通過設(shè)立垂直或水平位置,讓這個(gè)元素“相對于”它起點(diǎn)進(jìn)行移動(dòng)。絕對布局分類CSS分類屬性容許你控制如何顯示元素,設(shè)立圖像顯示于另一元素中何處,相對于其正常位置來定位元素,使用絕對值來定位元素,以及元素可見度。慣用屬性clear:設(shè)立一種元素側(cè)面與否容許其他浮動(dòng)元素float:定義元素在哪個(gè)方向浮動(dòng)cursor:當(dāng)指向某元素之上時(shí)顯示指針類型display:定義與否及如何顯示元素visibility:定義元素與否可見或不可見。浮動(dòng):displayvisibilityclear1.7CSS框模型盒子模型CSS框模型(BoxModel)規(guī)定了元素框解決元素內(nèi)容、內(nèi)邊距、邊框

和

外邊距

方式。元素框最內(nèi)某些是實(shí)際內(nèi)容,直接包圍內(nèi)容是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素背景。內(nèi)邊距邊沿是邊框。邊框以外是外邊距,外邊距默認(rèn)是透明,因而不會(huì)遮擋其后任何元素 邊框元素邊框(border)是環(huán)繞元素內(nèi)容和內(nèi)邊距一條或多條線。CSSborder屬性容許你規(guī)定元素邊框樣式、寬度和顏色。慣用屬性:border:簡寫屬性,用于把針對于四個(gè)邊屬性設(shè)立在一種聲明。border-color:簡寫屬性,定義元素邊框中可見某些顏色,或?yàn)樗膫€(gè)邊分別設(shè)立顏色。border-style:用于定義所有邊框樣式,或者單獨(dú)為各邊設(shè)立邊框樣式。border-width:簡寫屬性,用于為元素所有邊框設(shè)立寬度,或則單獨(dú)地為各邊邊框設(shè)立寬度border-top:簡寫屬性,用于把上邊框所有屬性設(shè)立到一種聲明中border-right:簡寫屬性,用于把右邊框所有屬性設(shè)立到一種聲明中border-bottom:簡寫屬性,用于把下邊框所有屬性設(shè)立到一種聲明中border-left:簡寫屬性,用于把左邊框所有屬性設(shè)立到一種聲明中。外邊距環(huán)繞在元素邊框空白區(qū)域是外邊距。設(shè)立外邊距會(huì)在元素外創(chuàng)立額外“空白”。設(shè)立外邊距最簡樸辦法就是使用margin屬性,這個(gè)屬性接受任何長度單位、百分?jǐn)?shù)值甚至負(fù)值。慣用屬性:margin:簡寫屬性,在一種聲明中設(shè)立所有外邊距屬性margin-top:定義元素上外邊距margin-right:定義元素右外邊距margin-bottom:定義元素下外邊距margin-left定義元素左外邊距注意:在使用margin來定義所有外邊距時(shí),可以使用值復(fù)制。如果缺少左外邊距值,則使用右外邊距值。如果缺少下外邊距值,則使用上外邊距值。如果缺少右外邊距值,則使用上外邊距值。內(nèi)

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論