css樣式規(guī)則的基本結(jié)構(gòu),css樣式定義的基本結(jié)構(gòu)

css的基本語法結(jié)構(gòu)及規(guī)范

一、CSS簡介

成都創(chuàng)新互聯(lián)公司長期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為阿榮企業(yè)提供專業(yè)的網(wǎng)站設(shè)計、成都做網(wǎng)站，阿榮網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

CSS(Cascading Style Sheet)層疊樣式表，它是用來美化頁面的一種語言，之前提到的W3C規(guī)范中的“樣式”。

作用：

1、美化界面。

2、頁面布局。

基本語法：

選擇器{

樣式規(guī)則

}

樣式規(guī)則：

屬性名1：屬性值1;

屬性名2：屬性值2;

屬性名3：屬性值3;

。。。

選擇器:是用來選擇標簽的，選出來以后給標簽加樣式。

從Hello World說起，

p style="background-color:#FFF;color:#000;font-size:30px;"Hello World!/p

這樣寫可以實現(xiàn)將原本的白底黑字Hello World! 改成樣式為 黑底白字的效果。但是這樣寫有一定的缺點：

缺點1：內(nèi)容、樣式、行為三者未分離，代碼糅雜，不符合W3C規(guī)范，難以維護。

缺點2：代碼冗余，不可復(fù)用。

二、如何引入CSS？

1）行內(nèi)樣式

即上述的一般形式，由于其存在的缺點，介紹下一種樣式。

2）內(nèi)嵌樣式，給p標簽加樣式，加在head標簽中

style type="text/css"

p{

background-color:#FFF;

color:#000;

font-size:30px;

}

/style

當本頁面的p標簽都需要相同的樣式時，這樣寫大大降低了代碼量，并讓其他編程人員一眼分辨出來CSS樣式。

3）鏈接樣式（鏈入式）

在head標簽中加入

link href="../css/my.css" type="text/css" rel="stylesheet"/

將CSS文件和html文件分開來放，這樣增加了代碼的重用性，但是每個瀏覽器都要單獨讀取css文件中的樣式，比較慢，如果追求速度，內(nèi)嵌樣式會更好。

4）導入樣式

style type="text/css"

@import url("路徑名");

/style

四種樣式的優(yōu)先級：

如果一個頁面中四種樣式同時存在，這四種都會對標簽起作用，但是重復(fù)樣式的屬性值，只有最后一個有效。如果內(nèi)嵌樣式和導入樣式放在一起，則內(nèi)嵌樣式起作用。

如果內(nèi)嵌樣式和導入樣式分成兩個style定義，則在CSS樣式中的最后一個style起作用。

附：css中注釋的格式，沒有單行注釋，所有的注釋均是/*注釋內(nèi)容*/

css的基本語句的結(jié)構(gòu)是

一個樣式表一般由若干樣式規(guī)則組成，每條樣式規(guī)則都可以看作是一條CSS的基本語句。

每條規(guī)則都包含一個選擇器（例如：BODY，P等）和寫在花括號里的聲明，這些聲明通常是由幾組用分號分隔的屬性和值組成。

有6種合法的選擇器類別，即：HTML標記、具有上下文關(guān)系的HTML標記、用戶定義的類、用戶定義的ID、虛類、虛元素。

1.HTML標記

例如：H1{text-align:center;font-family:楷體-gb2312}，H1,H2,H3{color:#ff0000}

2.具有上下文關(guān)系的HTML標記

例如：H1 B{color:red}，這表示只有位于標記元素內(nèi)的 標記符說明的內(nèi)容顯示為紅色，其它標記符所說明的元素不具有該屬性。這種上下文關(guān)系可以多層嵌套。

3.用戶定義的類

要想將一個類包括到樣式定義中，可將一個句點和一個類名添加到選擇器后，即：選擇器.類名{屬性：值；……}

可以使用任何名稱命名類，例如：若想在網(wǎng)頁使用 ，并使每處文本具有不同的顏色，則可進行如下定義：H2.colo-red{color:red}H2.color-blue{color:blue}

然后在網(wǎng)頁中需要使用CLASS屬性的地方引用這些類，例如：第一章 HTML，第二章 CSS技術(shù)〈/H2〉如果使用了 標記符，但未使用CLASS屬性，則不會應(yīng)用所定義的樣式。

特別地，還可以定義應(yīng)用于所有標記符的類，此時，直接用句點后跟類名即可，例如：.red{color:red}然后在所有需要引用該類的標記符中使用CLASS屬性。

4.用戶定義的ID

所謂ID，就是相當于HTML文檔中的樣式的“身份證”，以保證其在一個HTML文檔中具有唯一可用的值。這給使用JAVAScript等腳本編寫語言的 應(yīng)用帶來了方便。要將一個ID包括在樣式定義中，需要“#”號作為ID名稱的前綴，格式如下：#ID名字{屬性:值}

定義了ID樣式后，則可通過在標記符內(nèi)使用ID屬性來引用該樣式。例如：有定義#red{color:red},則可在若干不同標記符中使用。

5.虛類和虛元素

虛類也稱偽類（Peeudo-class）,它可以區(qū)別開不同種類的元素。虛元素（Pseudo-element）指元素的一部分，如段落的第一個字母和首行效果（first-letter和first-line）。

虛類和虛元素只可以用在CSS的選擇器中，而不能出現(xiàn)在HTML的源代碼中，即不能用CLASS或ID來調(diào)用。它們只能在特定條件下被瀏覽器所識別。

偽類中最常見的就是錨偽類。錨偽類可以指定標記符以不同方式顯示鏈接，即訪問過的（visited）、未訪問過的（link）、激活的（active）和鼠標指向的（hover）幾種鏈接狀態(tài)。例如可以使用下列方式更改超鏈接的顯示方式：A:link {text-decoration:none;color:#800000}，A:visited {text-decoration:none;color:#800000}，A:active {text-decortion:none}，A:hover {text-decoration:underline;color:blue}

CSS樣式規(guī)則由什么組成

CSS

層疊樣式表簡寫為CSS，是英語Cascading Style Sheets的縮寫。它是W3C定義和維護的標準，一種用來為結(jié)構(gòu)化文檔（如HTML文檔或XML應(yīng)用）添加樣式（字體、間距和顏色等）的計算機語言。

概述

一個網(wǎng)頁的讀者和作者都可以使用CSS來決定文件的顏色、字體、排版等顯示特性。CSS最主要的目的是將文件的結(jié)構(gòu)（用HTML或其它相關(guān)的語言寫的）與文件的顯示（CSS）分隔開來。這個分隔有許多好處：

文件的可讀性被加強

文件的結(jié)構(gòu)更加靈活

作者和讀者可以自己決定文件的顯示

文件的結(jié)構(gòu)簡化了。

CSS還可以使用其它的顯示方式，比如聲音（假如瀏覽器有閱讀功能的話）或給盲人用的感受裝置。此外CSS還可以與XHTML、XML或其它結(jié)構(gòu)文件一起使用，唯一條件是顯示這種文件的瀏覽器裝備了接受CSS的功能。

HTML文件中的每一個class或id都可以有自己的顯示特征，而且每一個沒有id特性的HTML結(jié)構(gòu)也可以有自己的顯示特征。這些結(jié)構(gòu)有的是HTML自己需要的，有的是專門為CSS設(shè)置的。

CSS信息可以來自：

作者樣式

作者可以在他的HTML文件中確定一個外來的、獨立的CSS文件

作者可以將CSS信息包含在HTML文件內(nèi)

作者可以在一個HTML指令內(nèi)結(jié)合CSS指令，這樣做一般是為了在一個特殊情況下將總體的CSS指令抵消掉

讀者樣式

讀者可以在他的瀏覽器內(nèi)設(shè)立一個地區(qū)性的CSS文件。這個CSS文件可以用在所有的HTML文件上。假如作者的CSS文件與讀者的相沖突，那么讀者可以確定他想使用哪個

瀏覽器的樣式

假如外部沒有特別指定一個樣式的話，一般瀏覽器自己有一個內(nèi)在的樣式

使用CSS的優(yōu)點有：

一個整個網(wǎng)站或其中一部分網(wǎng)頁的顯示信息被集中在一個地方，要改變它們很方便

不同的讀者可以有不同的樣式，比如有的讀者需要字體比較大

HTML文件本身的范圍變小了，它的結(jié)構(gòu)簡單了，它不需要包含顯示的信息

樣式規(guī)則

CSS的語法很簡單，它使用一組英語詞來表示不同的樣式和特征。

一個式樣表由一組規(guī)則組成。每個規(guī)則由一個“選擇器”（selector）和一個定義部分組成。每個定義部分包含一組由半角分號（;）分離的定義。這組定義放在一對大括號（{ }）之間。每個定義由一個特性，一個半角冒號（:）和一個值組成。

選擇器（Selector）

通常為文件中的元素（element），如html中的body，p，strong等標簽，多個選擇器可以半角逗號（,）隔開。

屬性（property）

CSS1、CSS2、CSS3規(guī)定了許多的屬性，目的在控制選擇器的樣式。

值（value）

指屬性接受的設(shè)定值，可由各種關(guān)鍵字（keyword）組成，多個關(guān)鍵字時大都以空格隔開。

要針對沒有標簽定義范圍進行樣式設(shè)定時，可利用div與span標簽

網(wǎng)頁題目：css樣式規(guī)則的基本結(jié)構(gòu),css樣式定義的基本結(jié)構(gòu)
本文網(wǎng)址：http://muchs.cn/article2/phepic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計、網(wǎng)站收錄、移動網(wǎng)站建設(shè)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護公司