前端--CSS

番茄西紅柿發(fā)布于2019-04-23 13:25 / 1744人閱讀

摘要：一介紹是的簡(jiǎn)稱(chēng)中文稱(chēng)為層疊樣式表用來(lái)控制網(wǎng)頁(yè)數(shù)據(jù)的表現(xiàn)可以使網(wǎng)頁(yè)的表現(xiàn)與數(shù)據(jù)內(nèi)容分離，層疊樣式表定義如何顯示元素。用于控制內(nèi)容與邊框之間的距離邊框圍繞在內(nèi)邊距和內(nèi)容外的邊框。內(nèi)容盒子的內(nèi)容，顯示文本和圖像。

一.CSS介紹

CSS是Cascading Style Sheets的簡(jiǎn)稱(chēng),中文稱(chēng)為層疊樣式表,用來(lái)控制網(wǎng)頁(yè)數(shù)據(jù)的表現(xiàn),可以使網(wǎng)頁(yè)的表現(xiàn)與數(shù)據(jù)內(nèi)容分離.

CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。

當(dāng)瀏覽器讀到一個(gè)樣式表，它就會(huì)按照這個(gè)樣式表來(lái)對(duì)文檔進(jìn)行格式化（渲染）

二.CSS的四種引入方式

1.行內(nèi)式

　　行內(nèi)式是在標(biāo)記的style屬性中設(shè)定css樣式,這種方法沒(méi)有體現(xiàn)css的優(yōu)勢(shì),不推薦使用.

2.嵌入式

　　嵌入式是將css樣式集中寫(xiě)在網(wǎng)頁(yè)的標(biāo)簽對(duì)的標(biāo)簽對(duì)中.格式如下:

3.導(dǎo)入式

　　將一個(gè)獨(dú)立的.css文件引入HTML文件中,導(dǎo)入式使用css規(guī)則引入外部css文件,　　

　　注意:

　　　　導(dǎo)入式會(huì)將在整個(gè)網(wǎng)頁(yè)裝載完后再裝載css文件,因此這就導(dǎo)致了一個(gè)問(wèn)題,如果網(wǎng)頁(yè)比較大則會(huì)出現(xiàn)先顯示無(wú)樣式的網(wǎng)頁(yè),閃爍一下,再出現(xiàn)網(wǎng)頁(yè)樣式

4.鏈接式

　　也是將一個(gè).css文件引入HTML文件中　　

三.CSS選擇器(selector)

　　"選擇器" 指明了{(lán)}中的"樣式"的作用對(duì)象,也就是"樣式"作用于網(wǎng)頁(yè)中的哪兒些元素

1.基礎(chǔ)選擇器

　　*　　:　　　　通用元素選擇器,匹配任何元素*{margin:0;padding:0}

　　E　　:　　　　標(biāo)簽選擇器,匹配所有使用E標(biāo)簽的元素p{color:green}

　.info和E.info:　　class選擇器(類(lèi)選擇器),匹配所有類(lèi)屬性中包含info的元素.info{background:#ff0;}p.info{background:blue;}

　#info和E#info:　　id選擇器#info{background:#ff0;}p#info{background:#ff0;}

2.組合選擇器

　　E,F　　　多元素選擇器,同時(shí)匹配所有的E元素或者F元素,E和F之間用逗號(hào)分隔　Div,p{color:#f00;}

　　E F　　　后代元素選擇器,匹配所有屬于E元素后代的F元素,E和F之間用空格分隔　#nav li {display;inline;} li a {font-weight:bold;}

　　E>F　　　子元素選擇器,匹配所有E元素的子元素F　div > strong{color:#f00;}

　　E + F　　毗鄰元素選擇器,匹配所有緊挨著E元素之后的同級(jí)元素F　p + p {color:#f00;}

　　#l1~p　　弟弟選擇器,匹配l1后面所有的兄弟p標(biāo)簽

#嵌套規(guī)則:

　　塊級(jí)元素可以包含內(nèi)聯(lián)元素或某些塊級(jí)元素,但內(nèi)聯(lián)元素不能包含塊級(jí)元素,它只能包含其他內(nèi)聯(lián)元素.

　　塊級(jí)元素不能放在p里面,

　　有幾個(gè)特殊的塊級(jí)元素只能包含內(nèi)聯(lián)元素,不能包含塊級(jí)元素.如h1-6,p,dt

　　li內(nèi)可以包含div

　　塊級(jí)元素與塊級(jí)元素并列,內(nèi)聯(lián)元素與內(nèi)聯(lián)元素并列.錯(cuò)誤栗子(

)

3.屬性選擇器

/*用于選取帶有指定屬性的元素。*/
p[title] {
  color: red;
}
/*用于選取帶有指定屬性和值的元素。*/
p[title="213"] {
  color: green;
}
/*找到所有title屬性以hello開(kāi)頭的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title屬性以hello結(jié)尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title屬性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title屬性(有多個(gè)值或值以空格分割)中有一個(gè)值為hello的元素：*/
[title~="hello"] {
  color: green;
}

4.偽類(lèi)選擇器

　　偽類(lèi)選擇器:專(zhuān)用于控制鏈接的顯示效果,偽類(lèi)選擇器;

　　　　a:link (沒(méi)有點(diǎn)擊過(guò)得鏈接),用于定義鏈接的常規(guī)狀態(tài)

　　　　a:hover(鼠標(biāo)放在鏈接上的狀態(tài)),用于產(chǎn)生視覺(jué)效果.

　　　　a:visited(訪問(wèn)過(guò)的鏈接),用于閱讀文章,能清楚的判斷已經(jīng)訪問(wèn)過(guò)的鏈接.

　　　　a:active(在鏈接上按下鼠標(biāo)時(shí)的狀態(tài)),用于表現(xiàn)鼠標(biāo)按下去的鏈接狀態(tài).

5.選擇器優(yōu)先級(jí)

四.CSS的常用屬性

1.顏色屬性:

pppp

2.字體屬性:

　　font-size:20px/50%/larger(大的)

　　font-family:Lucida Bright

　　font-weight:lighter/bold/border/

老男孩

3.背景屬性:

　　background-color:cornflowerblue

　　background-image:url("1.jpg");

　　background-repeat;(repeat:平鋪滿(mǎn))

　　background-position:right top (20px 20px);(橫向: left center right)(縱向: top center bottom)

注意:如果講背景屬性加在body上,要記得給body加上一個(gè)height,否則結(jié)果異常,這是因?yàn)閎ody為空,無(wú)法撐起背景圖片

4.文本屬性:

　　font-size: 10px;

　　text-align:center;橫向排列

　　line-height:200px;文本行高通俗的講,文本高度加上文字上下的空白區(qū)域的高度50%,基于字體大小的百分比

　　text-indent:150px;首行縮進(jìn),50%:基于父元素(weight)的百分比

　　letter-spacing:10px;

　　word-spacing:20px;

　　direction:rtl;

　　text-transform:capitalize;

5.邊框?qū)傩?

　　border-style:solid;

　　border-color:chartreuse;

　　border-width:20px

6.列表屬性

　　ul,ol{list-style:decimal-leading-zero;

　　　　list-style:none;list-style:circle;

　　　　list-style:upper-alpha;

　　　　list-style:disc;}

7.display屬性

　　none

　　block

　　inlink

8.盒子模型:

　　margin: 用于控制元素與元素之間的距離;margin的最基本用途就是控制元素周?chē)臻g的間隔，從視覺(jué)角度上達(dá)到相互隔開(kāi)的目的。
　　padding: 用于控制內(nèi)容與邊框之間的距離；
　　Border(邊框): 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
　　Content(內(nèi)容): 盒子的內(nèi)容，顯示文本和圖像。

看圖吧：

9.float:

　　在CSS中,任何元素都可以浮動(dòng).

　　浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框,二不論它本身是何種元素

　　關(guān)于佛洞的兩個(gè)特點(diǎn):

浮動(dòng)的框可以向左或者向右,知道它的外邊緣碰到包含框或另一個(gè)浮動(dòng)的邊框?yàn)橹?
由于浮動(dòng)框的不在文檔的普通流當(dāng)中,所以文檔的普通流中的邊框變現(xiàn)的就像浮動(dòng)框不存在一樣

　　三種取值:

　　　　left:向左浮動(dòng)

　　　　right:向右浮動(dòng)　

　　　　none:默認(rèn)值,不浮動(dòng)

　　　　參考

10.position:

　　1.static,默認(rèn)值static:無(wú)特殊定位,對(duì)象遵循正常文檔流.

　　　　top,right,bottom,left等屬性不會(huì)被應(yīng)用.說(shuō)到這里我們不得不提一下一個(gè)定義------文檔流,文檔流其實(shí)就是文檔的輸出順序,也就是我們通常看到的由左,到右,由上到下的輸出形式,在網(wǎng)頁(yè)中每個(gè)元素都是按照這個(gè)順序進(jìn)行排序和顯示的,而float和position兩個(gè)屬性可以將元素從文檔流脫離出來(lái)顯示.默認(rèn)值就是讓元素繼續(xù)按照文檔流顯示,不作出任何改變.

　　2.position:relative

　　relative:對(duì)象遵循正常文檔流,但將依據(jù)top,right,bottom,left等屬性進(jìn)行絕對(duì)定位.而基層疊通過(guò)z-index屬性定義.

　　absolute:對(duì)象脫離正常文檔流,使用top,right,bottom,left等屬性進(jìn)行絕對(duì)定位.,而其層疊通過(guò)z-index屬性定義.如果設(shè)定position:relative,就可以使用top,bottom,left和right來(lái)相對(duì)于元素在文檔中應(yīng)該出現(xiàn)的位置來(lái)移動(dòng)這個(gè)元素.(意思是元素實(shí)際上依然占據(jù)文檔中的原有位置,只是視覺(jué)上相對(duì)于它在文檔中的原有位置移動(dòng)了)當(dāng)指定position:absoult時(shí),元素就脫離了文檔(即在這個(gè)文檔中已經(jīng)不占據(jù)位置了),可以準(zhǔn)確的按照設(shè)置top,bottom,left和right來(lái)定位了.如果一個(gè)元素絕對(duì)定位后,其他參照物是以離自身最近元素是否設(shè)置了相對(duì)定位,如果有設(shè)置將以離自己最近元素定位,如果有設(shè)置將以離自己最近元素定位,如果沒(méi)有將往其祖先元素尋找相對(duì)定位元素,一直找到html位置.

　　3.positson:fixed

　　　　在理論上,被設(shè)置為fixed的元素會(huì)被定位于瀏覽器窗口的一個(gè)指定坐標(biāo),不論窗口是否滾動(dòng),它都會(huì)固定在這個(gè)位置.

　　fixed:對(duì)象脫離正常文檔流,使用top,right,bottom,left等屬性以窗口為參考點(diǎn)進(jìn)行定位,當(dāng)出現(xiàn)滾動(dòng)條時(shí),對(duì)象不會(huì)隨著滾動(dòng)條滾動(dòng).而其層疊通過(guò)z-index屬性定義.

　　注意:一個(gè)元素如果設(shè)置了position:absoulute | fixed;則該元素就不能設(shè)置float.,因?yàn)檫@是兩個(gè)不同的流,一個(gè)是浮動(dòng)流,另一個(gè)是"定位流".但是relative卻可以.因?yàn)樗舅嫉目臻g仍然占據(jù)文檔流.