您現在的位置是:電腦技術吧?>? 編程技術 ??>??css語法例子,css的基本語法結構??>??正文詳情

css語法例子,css的基本語法結構

喻璇子2019-11-18 08:30:36 人圍觀
簡介css selector 語法一。基本語法CSS的定義由三部分組成:selector、properties和value基本格式如下:selector{property:value}(selecss讓字一個一個出來

1.  基本語法CSS的定義是由三個部分構成:選擇符(selector),屬性(properties)和屬性的取值(value)。

基本格式如下: selector {property: value} (選擇符 {屬性:值}) 選擇符是可以是多種形式,一般是你要定義樣式的HTML標記,例如BODY、P、TABLE,你可以通過此方法定義它的屬性和值,屬性和值要用冒號隔開: body {color: black} 選擇符body是指頁面主體部分,color是控制文字顏色的屬性,black是顏色的值,此例的效果是使頁面中的文字為黑色。

如果屬性的值是多個單詞組成,必須在值上加引號,比如字體的名稱經常是幾個單詞的組合: p {font-family: sans serif} (定義段落字體為sans serif)如果需要對一個選擇符指定多個屬性時,我們使用分號將所有的屬性和值分開: p {text-align: center; color: red} (段落居中排列;并且段落中的文字為紅色)為了使你定義的樣式表方便閱讀,你可以采用分行的書寫格式: p { text-align: center; color: black; font-family: arial } (段落排列居中,段落中文字為黑色,字體是arial)2.  選擇符組你可以把相同屬性和值的選擇符組合起來書寫,用逗號將選擇符分開,這樣可以減少樣式重復定義: h1, h2, h3, h4, h5, h6 { color: green } (這個組里包括所有的標題元素,每個標題元素的文字都為綠色) p, table{ font-size: 9pt } (段落和表格里的文字尺寸為9號字) 效果完全等效于: p { font-size: 9pt } table { font-size: 9pt }3.  類選擇符用類選擇符你能夠把相同的元素分類定義不同的樣式,定義類選擇符時,在自定類的名稱前面加一個點號。

假如你想要兩個不同的段落,一個段落向右對齊,一個段落居中,你可以先定義兩個類: p.right {text-align: right} p.center {text-align: center} 然后用不在不同的段落里,只要在HTML標記里加入你定義的class參數: p class=right 這個段落向右對齊的 /p p class=center 這個段落是居中排列的 /p 注意:類的名稱可以是任意英文單詞或以英文開頭與數字的組合,一般以其功能和效果簡要命名。

類選擇符還有一種用法,在選擇符中省略HTML標記名,這樣可以把幾個不同的元素定義成相同的樣式: .center {text-align: center} (定義.center的類選擇符為文字居中排列) 這樣的類可以被應用到任何元素上。

下面我們使h1元素(標題1)和p元素(段落)都歸為center類,這使兩個元素的樣式都跟隨.center這個類選擇符: h1 class=center 這個標題是居中排列的 /h1 p class=center 這個段落也是居中排列的 /p 注意:這種省略HTML標記的類選擇符是我們經后最常用的CSS方法,使用這種方法,我們可以很方便的在任意元素上套用預先定義好的類樣式。

4.  ID選擇符在HTML頁面中ID參數指定了某個單一元素,ID選擇符是用來對這個單一元素定義單獨的樣式。

ID選擇符的應用和類選擇符類似,只要把CLASS換成ID即可。

將上例中類用ID替代: p id=intro 這個段落向右對齊 /p 定義ID選擇符要在ID名稱前加上一個#號。

和類選擇符相同,定義ID選擇符的屬性也有兩種方法。

下面這個例子,ID屬性將匹配所有id=intro的元素: #intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } (字體尺寸為默認尺寸的110%;粗體;藍色;背景顏色透明) 下面這個例子,ID屬性只匹配id=intro的段落元素: p#intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } 注意:ID選擇符局限性很大,只能單獨定義某個元素的樣式,一般只在特殊情況下使用。

5.  包含選擇符可以單獨對某種元素包含關系定義的樣式表,元素1里包含元素2,這種方式只對在元素1里的元素2定義,對單獨的元素1或元素2無定義,例如: table a { font-size: 12px } 在表格內的鏈接改變了樣式,文字大小為12象素,而表格外的鏈接的文字仍為默認大小。

6.  樣式表的層疊性層疊性就是繼承性,樣式表的繼承規則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素。

事實上,所有在元素中嵌套的元素都會繼承外層元素指定的屬性值,有時會把很多層嵌套的樣式疊加在一起,除非另外更改。

例如在DIV標記中嵌套P標記: div { color: red; font-size:9pt} div p 這個段落的文字為紅色9號字 /p /div (P元素里的內容會繼承DIV定義的屬性) 注意:有些情況下內部選擇符不繼承周圍選擇符的值,但理論上這些都是特殊的。

例如,上邊界屬性值是不會繼承的,直覺上,一個段落不會同文檔BODY一樣的上邊界值。

另外,當樣式表繼承遇到沖突時,總是以最后定義的樣式為準。

如果上例中定義了P的顏色: div { color: red; font-size:9pt} p {color: blue} div p 這個段落的文字為藍色9號字 /p /div 我們可以看到段落里的文字大小為9號字是繼承div屬性的,而color屬性則依照最后定義的。

不同的選擇符定義相同的元素時,要考慮到不同的選擇符之間的優先級。

ID選擇符,類選擇符和HTML標記選擇符,因為ID選擇符是最后加上元素上的,所以優先級最高,其次是類選擇符。

如果想超越這三者之間的關系,可以用!important提升樣式表的優先權,例如:p { color: #FF0000!important }.blue { color: #0000FF} #id1 { color: #FFFF00} 我們同時對頁面中的一個段落加上這三種樣式,它最后會依照被!important申明的HTML標記選擇符樣式為紅色文字。

如果去掉!important,則依照優先權最高的ID選擇符為黃色文字。

7.  注釋你可以在CSS中插入注釋來說明你代碼的意思,注釋有利于你或別人以后編輯和更改代碼時理解代碼的含義。

在瀏覽器中,注釋是不顯示的。

CSS注釋以/* 開頭,以*/ 結尾,如下: /* 定義段落樣式表 */ p { text-align: center; /* 文本居中排列 */ color: black; /* 文字為黑色 */ font-family: arial /* 字體為arial */ }

版權聲明:本文由 喻璇子 整理編輯。

原標題:網頁制作與設計css部分代碼,html與css入門經典

轉載注明出處:http://www.dn9ww09s.icu/program/13445.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • win8應用商店在哪,win8應用商店不見了

    win8應用商店在哪,win8應用商店不見了 相關圖片win8應用商店下載蘋果系統關閉,這也使得蘋果專賣店給蘋果帶來了很多收入。作為PC端最大的操作系統,微軟的windows怎么能放過這頓飯呢?所以微軟也推出了自己的應用商店。但習慣于...

  • led顯示屏程序,windows10無法訪問路徑

    led顯示屏程序,windows10無法訪問路徑 相關圖片防火墻英文據推測,許多windows用戶和朋友遇到了無法訪問指定設備路徑或文件的情況。那么,如果windows不能訪問指定的設備路徑或文件呢?接下來,超人軟件將為您解答。win7無法訪問...

  • 旋轉3D,3d怎么旋轉

    旋轉3D,3d怎么旋轉 相關圖片可以用3D旋轉工具的對象是效果演示:使圖標交互:當鼠標單擊圖標時旋轉該圖標,并使該圖標顯示在屏幕前部//Define the angle of rotation var endangle3D旋轉相冊...

  • 手機caj怎么轉換成pdf,caj文件怎么改為pdf

    手機caj怎么轉換成pdf,caj文件怎么改為pdf 相關圖片caj免費轉換CAJ是中國學術期刊數據庫中的一種文件格式。不好的二次編輯是它最大的缺點。因此,許多小伙伴想知道如何將CAJ轉換成PDF?如何將CAJ轉換成word?現在,超人caj整篇怎么轉換...

  • 鉸鉸,鏜和絞

    鉸鉸,鏜和絞 相關圖片茭白生產步驟:1。選擇free form工具(q)并單擊stage上的組件。組件上的中心點由實心白色圓圈表示。單擊并將圓拖動到新位置。在我的情況下,我把這個圓圈移動鉸什么意思...

  • 隨手記賬戶,隨手記存管賬戶

    隨手記賬戶,隨手記存管賬戶 相關圖片隨手記賬號是哪個作為一個實用的記賬軟件,最常被問到的問題是如何修改賬戶?如何將帳戶還原為默認值。接下來,超人軟件為大家介紹相關的筆記內容,希望大家喜歡它的同時隨手...

  • stp可以用什么打開,stp格式文件用什么軟件打開

    stp可以用什么打開,stp格式文件用什么軟件打開 相關圖片手機3d看圖軟件stp最近,很多小伙伴說他們在使用電腦的過程中遇到了STP文件,但是他們不知道如何打開STP文件。什么軟件用來打開STP文件?現在,超人軟件小編想為你解答STP文件的st...

  • box sizing,boxsizing有什么用

    box sizing,boxsizing有什么用 相關圖片boxsizing的應用場景“框大小”屬性允許您以特定方式定義與區域匹配的特定元素。盒大小是CSS3的盒屬性之一。說到CSS的box模型,我想很多人都會很惱火,尤其是新手。然而,這個boxbor...

  • 筆記本重裝系統鍵盤錯亂,筆記本按鍵錯亂修復

    筆記本重裝系統鍵盤錯亂,筆記本按鍵錯亂修復 相關圖片筆記本接外接鍵盤按鍵錯亂雖然筆記本電腦的按鍵亂七八糟的情況很少見,但并不是沒有。小編安排了一個解決筆記本電腦按鍵紊亂的方案,讓大家都能做好準備。讓我們看看如何處理...

  • 展開菜單效果,rp如何設置菜單效果

    展開菜單效果,rp如何設置菜單效果 相關圖片收縮菜單步驟1:制作菜單外觀,在dreamweaer中創建一個新文件,繪制一個層,在層中插入一個表(如圖1所示),裝飾表,然后添加菜單項并建立超鏈接。為了刪除超鏈接的下菜單圖片...

熱評文章

  • 引導扇區easyboot,easyboot使用教程

    引導扇區easyboot,easyboot使用教程 相關圖片怎樣使用EasyBoot是一個集成的中國引導光盤制作工具。用戶通常使用EasyBoot創建引導光盤。EasyBoot是一個完全圖形化的界面,易于使用,即使是新手也很容易使用與滿足...

  • HTTP協議是,什么是HTTP協議

    HTTP協議是,什么是HTTP協議 相關圖片http基于什么協議似乎在互聯網上使用分塊代碼的網站并不多。除了那些使用gzip壓縮的網站,比如google.com,還有很多打開gzip壓縮的PHP論壇。根據我的理解,使用分塊編HTTP協議稱為...

  • autorun怎么刪除,autoruninf

    autorun怎么刪除,autoruninf 相關圖片inf文件怎么卸載Autorun.inf是一個經常出現在U盤上的文件。當你看到它時,通常意味著你的U盤被特洛伊病毒攻擊了。使用normal方法刪除autorun.inf后,發現它autorun刪不掉...

  • GBK編碼,編碼

    GBK編碼,編碼 相關圖片gb18030編碼GBK版本和UTF-8版本的通用建站程序功能相同,但編碼方式不同,GBK的字符編碼用雙字節表示,即中英文字符都用雙字節表示。為了區分漢字,UTF-8編碼的最高位unicode編碼...

  • 充電突然不支持此配件,充電出現不支持此配件啥原因

    充電突然不支持此配件,充電出現不支持此配件啥原因 相關圖片充電時候顯示不支持此配件不支持此附件充電的Android用戶不能觸摸它。這種情況發生在蘋果設備上。iPhone用戶群并不小。一定有很多用戶遇到這種情況。不支持對這個附件充電的原因是...

  • 批處理命令,常用批處理命令

    批處理命令,常用批處理命令 相關圖片批處理命令打開程序這個例子向朋友展示了如何使用焰火的批處理命令快速制作縮略圖,希望能對他們有所幫助。批處理命令刪除文件...

  • 360瀏覽器的收藏夾路徑,360瀏覽器收藏夾默認路徑

    360瀏覽器的收藏夾路徑,360瀏覽器收藏夾默認路徑 相關圖片360瀏覽器收藏夾文件在哪里360瀏覽器是一種流行的網絡瀏覽器。你知道360瀏覽器收藏夾路徑在哪里嗎?接下來,超人軟件編輯還想介紹一下當360瀏覽器收藏夾丟失時該如何操作。讓我們...

  • 怎樣截取音頻,截取音頻

    怎樣截取音頻,截取音頻 相關圖片視頻截取音頻說到鈴聲的制作,使用酷狗無疑是最簡單的方法。但是有很多軟件可以做到。例如,如果您的計算機上有完美的解碼,您還可以截取音頻文件以生成鈴聲。你怎么認為?錄...

  • 在線答題,在線答題系統

    在線答題,在線答題系統 相關圖片搜題庫在線有時我們需要在網頁上添加一個在線測試功能,比如在線調查、在線測試各種知識等應用程序,這需要很多前后臺的技巧。今天,我將共享一個基于jQuery HTML的前端應百度答題...

  • 完美解碼怎么用,完美解碼有什么用

    完美解碼怎么用,完美解碼有什么用 相關圖片專用播放器完美解碼是一款專業的高清播放器,由于其對高清電視的支持以及超越主流播放器的高清圖像質量而受到網民的青睞。完美的解碼可以使用默認模式獲得良好的播放效果,有...

關注微信

变脸官网查询