CSS發(fā)展史
創(chuàng)新互聯(lián)建站是專業(yè)的萍鄉(xiāng)網(wǎng)站建設(shè)公司,萍鄉(xiāng)接單;提供網(wǎng)站設(shè)計、成都網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行萍鄉(xiāng)網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
CSS(Cascading Style Sheets,層疊樣式表)是一種將表示樣式應(yīng)用到標(biāo)記的系統(tǒng)。CSS以設(shè)計、改變其HTML頁面的樣式而知名,并使用于Web和其他媒介,如XML文檔中。1996年12月W3C推出了CSS規(guī)范的第一個版本,1998年W3C發(fā)布了CSS的第二個版本即CSS2.0,2001年5月W3C開始進行CSS3標(biāo)準(zhǔn)的制定,到目前為止該標(biāo)準(zhǔn)還沒有最終定稿。
CSS1.0
選擇器:要使用CSS對HTML頁面中的元素實現(xiàn)一對一,一對多或者多對一的控制,就需要用到CSS選擇器。選擇器大致分為派生選擇器、ID選擇器和類選擇器,用來定義希望應(yīng)用樣式的HTML元素或者標(biāo)簽。
樣式屬性:該屬性主要包括Font字體、Text文本、Background背景、Position定位、Dimensions尺寸、Layout布局、Margin外邊框、Border邊框、Padding內(nèi)邊框、List列表、Table表格和Scrollbar滾動條等,用于定義網(wǎng)頁的一些樣式變化。
偽類屬性:主要定義了針對描述對象a的link、hover、active、visited和針對節(jié)點的first-letter、first-child、first-line等幾個偽類屬性。
保存方式:用戶可以直接存儲在HTML網(wǎng)頁中,也可以將CSS樣式代碼存儲為獨立的樣式表文件。
CSS2.0
選擇器:css2提供了更多強大的選擇器,用來定位HTML節(jié)點或者標(biāo)記
符號名稱
含義
示例
*
用于匹配任何標(biāo)記
*{color:red}
用于指定父子節(jié)點關(guān)系
AAA CCC DDD {color:red}匹配父節(jié)點分別為CCC和AAA的節(jié)點DDD節(jié)點
□
用于匹配在某一層有某個父節(jié)點的節(jié)點
AAA CCC DDD {color:blue}匹配包含父節(jié)點CCC的父節(jié)點AAA的節(jié)點DDD
+
用于表示在同一個級別節(jié)點之間的關(guān)系
AAA+BBB{color:red}表示,有一個兄弟節(jié)點AAA的節(jié)點BBB
名稱[表達(dá)式]
選擇包含特殊屬性值的節(jié)點
BBB[text="xyz"]{color:blue} 表示包含text屬性值為xyz的BBB標(biāo)簽
位置模型:在CSS2中進一步增強了位置屬性功能,增加了relative、absolute和fixed等幾個值
值名稱
含義
relative
元素框相對父節(jié)點偏移某個距離,元素仍保持其未定位前的形狀,它原本所占的空間仍保留
absolute
元素框從文檔流中完全刪除,并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉,就好像元素原來不存在一樣
fixed
元素框的表現(xiàn)類似于absolute值,不過其包含塊是視窗本身
z-index
用來指定相互重疊的元素的疊放順序,數(shù)字較大的元素會疊放在數(shù)值較小的元素前面
布局、表格樣式:CSS2對display屬性進行了擴充,用戶可用該屬性指定元素是否會顯示以及如何顯示,也可以使用該屬性配合位置和浮動進行頁面的布局。另外,用戶還可以將一個非表格的結(jié)構(gòu)化文檔顯示為一個表格樣式。
媒體類型:用于對不同的媒體類型定義不同的樣式。
屬性名稱
含義
aural
用于語音和音頻合成器
embossed
用于分頁的盲人用點字法打印
用于打印機
screen
用于計算機顯示器
braille
用于盲人用點字法觸覺回饋設(shè)備
projection
用于方案展示如幻燈片
偽類:CSS2增加了focus(將樣式添加到被選中的元素)、:first-child(將特殊的樣式添加到元素的第一個子元素)、:lang(允許創(chuàng)作者來定義指定的元素中使用的語言)。
光標(biāo)樣式:增加了cursor屬性,用于指定設(shè)備應(yīng)該顯示怎樣的光標(biāo)類型。
值名稱
含義
default
默認(rèn)光標(biāo)(通常是一個箭頭)
auto
默認(rèn),瀏覽器設(shè)置的光標(biāo)
crosshair
光標(biāo)呈現(xiàn)為十字線
pointer
光標(biāo)呈現(xiàn)為指示鏈接的指針(一只手)
move
此光標(biāo)指示某對象可被移動
e-resize
此光標(biāo)指示矩形框的邊緣可被向右移動
text
此光標(biāo)指示文本
wait
此光標(biāo)指示程序正忙(通常是一只表或沙漏形狀)
help
此光標(biāo)指示可用的幫助(通常是一個問號或一個氣球)
DIV+CSS其實是一種錯誤的叫法,標(biāo)準(zhǔn)的叫法應(yīng)該是XHTML+CSS,因為DIV與table都是XHTML或HTML語言中的一個標(biāo)記,而CSS只是一種樣式表現(xiàn)。DIV+CSS已經(jīng)將內(nèi)容和表現(xiàn)分割開來,所以修改網(wǎng)頁時只需指定內(nèi)容修改即可。
CSS常用命令規(guī)則
名稱
含義
名稱
含義
header
頁頭
content/Container
內(nèi)容
footer
頁腳
nav
導(dǎo)航
sidebar
側(cè)欄
column
欄目
wrapper
頁面外圍控制整體布局寬度
left
左側(cè)
right
右側(cè)
center
中間
loginbar
登錄條
logo
標(biāo)志
banner
廣告
main
頁面主題
hot
熱點
news
新聞
download
下載
subnav
子導(dǎo)航
menu
菜單
submenu
子菜單
search
搜索
friendlink
友情鏈接
copyright
版權(quán)
scroll
滾動
content
內(nèi)容
tab
標(biāo)簽頁
list
文章列表
msg
提示信息
title
欄目標(biāo)題
joinus
加入
guild
指南
service
服務(wù)
register
注冊
status
狀態(tài)
vote
投票
partner
合作伙伴
調(diào)用樣式表
用web 標(biāo)準(zhǔn)設(shè)計網(wǎng)站,過渡的方法主要是采用 XHTML+CSS,css樣式表是必不可少的。這就要求所有網(wǎng)頁設(shè)計師必須熟練掌握CSS,如果你以前不常用,那么現(xiàn)在就開始學(xué)習(xí)吧。要制作符合 web標(biāo)準(zhǔn)的網(wǎng)站,不懂 CSS 是設(shè)計不出漂亮的頁面的。
事實上,所有表現(xiàn)的地方都需要用 CSS 來實現(xiàn)。我們以前都習(xí)慣用able 來定位和布局,現(xiàn)在要改用 DIV 來定位和布局。這是思維方式的變化,一開始有些不習(xí)慣。呵呵,任何變革都會有阻力的,為了享受標(biāo)準(zhǔn)帶來的"益處",放棄一些老的傳統(tǒng)做法是值得的。
外部調(diào)用樣式表在以前,我們通常采用 2種方法使用樣式表:
頁面內(nèi)嵌法:就是將樣式表直接寫在頁面代碼的 head 區(qū)。類似這樣:
style type="text/css" !-- body { background : white ; color : black ; } -- /style
外部調(diào)用法:將樣式表寫在一個獨立的.css 文件中,然后在頁面 head 區(qū)用類似以下代碼調(diào)用。
link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /
在符合 web 標(biāo)準(zhǔn)的設(shè)計中,我們使用外部調(diào)用法,好處不言而喻,你可以不修改頁面只修改.css 文件而改變頁面的樣式。如果所有頁面都調(diào)用同一個樣式表文件,那么改一個樣式表文件,可以改變所有文件的樣。
雙表法調(diào)用樣式表
查看某些符合標(biāo)準(zhǔn)站點的原代碼,你可能看到,在調(diào)用樣式表的地方有如下 2句:
link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" / style
type="text/css" media="all"@import url( css/style01.css );/style
為什么要寫兩次呢?
實際上一般情況下用外聯(lián)法調(diào)用(就是第一句)就足夠了。我這里使用雙表調(diào)用只是一種示例。其中的"@import"命令用于輸入樣式表。
而"@import"命令在 netscape 4.0 版本瀏覽器是無效的。也就是說,當(dāng)你希望某些效果在 netscape 4.0 瀏覽器中隱藏,在 4.0 以上或其它瀏覽器中又顯示的時候,你可以采用"@import"命令方法調(diào)用樣式表。
TEXT/CSS 這個意思我也沒弄明白,但是我回答了你怎么樣在網(wǎng)頁中調(diào)用CSS~~應(yīng)該可以給我點分哦~
css樣式是HTML的一個補充,簡單的css使用樣式如下:
html
body
div?id=div/div
/body
style?type="text/css"
width:300px;//設(shè)置div的寬度300像素
height:500px;//設(shè)置div高度500像素
background-color:red;//設(shè)置div的背景顏色為紅色
/style
/html
css代碼位于style之間,詳細(xì)的css代碼解釋見代碼注釋。