第二十五天css樣式

時(shí)間：2023-08-30 01:12:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-08-30 01:12:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

第二十五天css樣式：

css樣式表

一、定義及其分類
1.what:
層疊樣式表是一種用來(lái)表現(xiàn)HTML(標(biāo)準(zhǔn)通用編輯語(yǔ)言的一個(gè)應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語(yǔ)言。
2.why:
css標(biāo)準(zhǔn)中重新定義了HTML中原來(lái)的文字顯示樣式，增加了一些新概念，如類、層等，可以對(duì)文字重疊、定位等。在css還沒(méi)有引入到頁(yè)面設(shè)計(jì)之前，傳統(tǒng)的HTML語(yǔ)言等實(shí)現(xiàn)頁(yè)面美化在設(shè)計(jì)上是十分麻煩的，例如要設(shè)計(jì)頁(yè)面中文字的樣式，如果使用傳統(tǒng)的HTML語(yǔ)句來(lái)設(shè)計(jì)頁(yè)面就不得不在每個(gè)需要設(shè)計(jì)的文字上都定義樣式。css的出現(xiàn)改變了這一傳統(tǒng)模式。
3.how:
css中包括三部分內(nèi)容:選擇符，屬性，屬性值
選擇符{屬性:屬性值;}
1.選擇符:又稱選擇器，所有HTML語(yǔ)言中的標(biāo)記都是通過(guò)不同的css選擇器進(jìn)行控制的。
2.屬性:主要包括字體屬性、文本屬性、背景屬性、布局屬性、邊界屬性、列表項(xiàng)目屬性、表格屬性等內(nèi)容。其中一些屬性只有部分瀏覽器支持，因此使css屬性的使用變得更加復(fù)雜/
3.屬性值:為某屬性的有效值。屬性與屬性值之間用":"分號(hào)隔開(kāi)。當(dāng)有多個(gè)屬性時(shí)，使用";"分隔。
舉例:
<style>
h2{
font-family:宋體;
color:red;
}
</style>
注: h2 為選擇器; font-family 為屬性; 宋體 為屬性值


css選擇器:常用的有標(biāo)記選擇器，類別選擇器，id選擇器等。
1）.標(biāo)記選擇器:(又叫元素選擇器，類型選擇器)
what:HTML頁(yè)面是由很多標(biāo)記組成的，例如圖像標(biāo)記<img>、超鏈接標(biāo)記<a>、表格標(biāo)記<table>等。而css標(biāo)記選擇器就是聲明頁(yè)面中哪些標(biāo)記采用css樣式。
how:
舉例:
<style>
a{
font-size:9px;
color:#F93;
}
<style>
2）.類別選擇器:
what: 點(diǎn)(.)+類別名稱
why:使用標(biāo)記選擇器有局限性。如果聲明標(biāo)記選擇器，那么頁(yè)面中所有該標(biāo)記內(nèi)容都會(huì)發(fā)生變化。假設(shè)頁(yè)面中有3個(gè)<h2>標(biāo)記，若想每個(gè)<h2>的顯示效果都不一樣，則可以使用類別標(biāo)記器。
how:1.類別選擇器的HTML標(biāo)記，只需使用class屬性來(lái)聲明即可。
2.在HTML標(biāo)簽中，可以應(yīng)用多種類別選擇器，這樣可以使HTML同時(shí)加載多個(gè)類別選擇器的樣式。在多種類別選擇器之間用空格進(jìn)行分割，例如:<h2 class="one two">。
注:1.瀏覽器按照html文檔順序讀取各個(gè)樣式表，后面的樣式表會(huì)覆蓋掉前面樣式表的相同屬性的樣式。
2.在 IE7 之前的版本中，不同平臺(tái)的 Internet Explorer 都不能正確地處理多類選擇器。
舉例:



運(yùn)行結(jié)果:



3）.id選擇器
what:id選擇器是通過(guò)HTML頁(yè)面中的id屬性來(lái)選擇添加樣式，與類別選擇器基本相同。
how:1."#"+id 屬性值
命名id選擇器要以"#"號(hào)開(kāi)始，后加HTML標(biāo)記中的id屬性值。
2.由于HTML頁(yè)面中不能包含兩個(gè)相同的id標(biāo)記，因此定義的id選擇器也就只能使用一次。
注:這里可能會(huì)出現(xiàn)如圖這種情況，可能很多朋友不理解。如圖:



id選擇器舉例:



運(yùn)行結(jié)果:






關(guān)系:
1.什么時(shí)候使用id選擇器，什么時(shí)候使用class選擇器?
答:根據(jù)它們的特性。W3C這樣規(guī)定的，在同一個(gè)頁(yè)面內(nèi)，不允許有相同名字的id對(duì)象出現(xiàn)，但是允許相同名字的class。這樣，一般網(wǎng)站分為頭，體，腳部分，因?yàn)榭紤]到它們?cè)谕豁?yè)面只會(huì)出現(xiàn)一次，所以用id。如果你定義一個(gè)顏色為紅色的class，在同一個(gè)頁(yè)面要使用很多次，就用class定義。另外，當(dāng)頁(yè)面中用到j(luò)s或者動(dòng)態(tài)調(diào)用對(duì)象的時(shí)候，要用到id，所以根據(jù)自己的情況運(yùn)用。
2. 三原則，優(yōu)先級(jí)等等。(過(guò)后會(huì)另寫(xiě)一章，詳細(xì)描述)


二、HTML中引入css的四種方式及其比較(行內(nèi)樣式，內(nèi)嵌式，鏈接式，導(dǎo)入式)
1.行內(nèi)樣式:
行內(nèi)樣式是比較直接的一種樣式，直接定義在HTML標(biāo)記之內(nèi)，通過(guò)style屬性來(lái)實(shí)現(xiàn)。(這種方式初學(xué)者容易接受，但是靈活性不強(qiáng))
舉例:



運(yùn)行結(jié)果:




2.內(nèi)嵌式:
內(nèi)嵌式樣式表就是在頁(yè)面中使用<style></style>標(biāo)記將css樣式包含在頁(yè)面中。它沒(méi)有行內(nèi)標(biāo)記樣式標(biāo)記表現(xiàn)的直接，但是能夠使頁(yè)面更加規(guī)整。
舉例:



運(yùn)行結(jié)果:



3.鏈接式:
鏈接外部css樣式表是最常用的一種引用方式，它通過(guò)將css樣式定義在一個(gè)單獨(dú)的文件中，然后在HTML中通過(guò)<link>標(biāo)記引用，是一種最為有效的使用css樣式的方式。
<link>標(biāo)記的語(yǔ)法結(jié)構(gòu)如下:
<link rel='stylesheet' href='path' type='text/css'>
參數(shù)說(shuō)明:
rel:定義外部文檔和調(diào)用文檔間的關(guān)系。
href:css文檔的絕對(duì)或相對(duì)路徑。
type:指的是外部文件的MIME類型。(多用途互聯(lián)網(wǎng)郵件擴(kuò)展類型。是設(shè)定某種擴(kuò)展名的文件用一種應(yīng)用程序來(lái)打開(kāi)的方式類型，當(dāng)該擴(kuò)展名文件被訪問(wèn)的時(shí)候，瀏覽器會(huì)自動(dòng)使用指定應(yīng)用程序來(lái)打開(kāi)。多用于指定一些客戶端自定義的文件名，以及一些媒體文件打開(kāi)方式。)
舉例:






運(yùn)行結(jié)果:




4.導(dǎo)入樣式(不建議使用)
導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，在HTML初始化時(shí)，會(huì)被導(dǎo)入到HTML或者CSS文件中，成為文件的一部分，類似第二種內(nèi)嵌樣式。
@import在html中使用，如下：
<style type="text/css">
@import url(style.css);
</style>
@import在CSS文件中引用CSS使用，如下：
@import "css.css";

四種方法比較:
1.行內(nèi)樣式:比較容易令初學(xué)者接收，但是靈活性不強(qiáng)。并且會(huì)導(dǎo)致HTML頁(yè)面不干凈，文件體積大，不利于蜘蛛爬行，后期維護(hù)也不方便。
2.內(nèi)嵌式:與行內(nèi)樣式相比，內(nèi)嵌式樣式更加便于維護(hù)。但是每個(gè)網(wǎng)站都不可能由一個(gè)網(wǎng)頁(yè)構(gòu)成，而每個(gè)頁(yè)面中相同的HTML標(biāo)記又都要求有相同的樣式，此時(shí)使用內(nèi)嵌式樣式顯得笨重。而鏈接式樣式表即可解決這一問(wèn)題。
3.實(shí)現(xiàn)了頁(yè)面框架代碼與表現(xiàn)CSS代碼的完全分離，使得前期制作和后期維護(hù)都十分方便
四種css引入的優(yōu)先級(jí):
1.就近原則
2.理論上：行內(nèi)>內(nèi)嵌>鏈接>導(dǎo)入
3.實(shí)際上：內(nèi)嵌、鏈接、導(dǎo)入在同一個(gè)文件頭部，誰(shuí)離相應(yīng)的代碼近，誰(shuí)的優(yōu)先級(jí)高

轉(zhuǎn)發(fā)學(xué)習(xí)者111