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

下載本文檔

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

文檔簡介

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

Style

Sheets)樣式定義如何顯示

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

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

和

外邊距

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

溫馨提示

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

評論

0/150

提交評論