css樣式寫法

html

10年的廣饒網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整廣饒建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“廣饒網(wǎng)站設(shè)計(jì)”,“廣饒網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

head

style?type="text/css"

.time?span{

line-height:?80px;

vertical-align:?middle;

font-weight:?bold;

color:?white;

background-color:?grey;

font-size:?60px;

padding:6px;

}

span.sep?{

background-color:?white;

color:?grey;

}

/style

/head

body

div?class?=?"time"

span23/span

span?class?="sep":/span

span30/span

span?class?="sep":/span

span32/span

/div

/body

/html

簡(jiǎn)單CSS樣式表的寫法

html

head

style?type="text/css"

a.top:link?{font-family:?宋體}?/*鏈接字體*/

a.top:link?{font-weight:?normal;}?/*設(shè)置鏈接文字中的字符粗細(xì)*/

a.top:link?{font-size:?12}?/*設(shè)置鏈接文字的大小*/

a.top:link?{text-decoration:?none;}?/*設(shè)置鏈接文字沒有下劃線*/

a.top:hover?{text-decoration:?underline;}?/*鼠標(biāo)放在鏈接上時(shí)有下劃線*/

a.top:link?{color:?#000000}?/*設(shè)置鏈接文字的顏色*/

a.top:visited?{color:?#000000}?/*訪問過的鏈接*/

a.top:hover?{color:?#B50000}?/*鼠標(biāo)放在鏈接上字體的顏色*/

a.tj:link?{font-family:?宋體}

a.tj:link?{font-weight:?normal;}

a.tj:link?{font-size:?12}

a.tj:link?{text-decoration:?none;}

a.tj:hover?{text-decoration:?none;}

a.tj:link?{color:?#000000}

a.tj:visited?{color:?#0000ff}

a.tj:hover?{background:?#FFFFCC}

h1?{font-size:12px}?

h1?{font-family:?"宋體"}?

h1?{font-weight:?normal;}

h1?{color:?#000000}

h2?{font-size:14px}?

h2?{font-family:?"宋體"}?

h2?{font-weight:?normal;}

h2?{color:?#000000}

h3?{font-size:24px}?

h3?{font-weight:?1;}

h3?{color:?#000000}

body?{

margin-top:?1px;?/*上邊距*/

margin-bottom:?1px;?/*下邊距*/

}

/style

meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"/head

body

pMouse?over?the?links?to?see?them?change?layout./p

pba?href="default.asp"?target="_blank"?class="top"電腦對(duì)懷孕其實(shí)沒啥影響/a/b/p

pba?href="default.asp"?target="_blank"?class="tj"電腦對(duì)懷孕其實(shí)沒啥影響/a/b/p

h1電腦對(duì)懷孕其實(shí)沒啥影響/h1

h2電腦對(duì)懷孕其實(shí)沒啥影響/h2

h3電腦對(duì)懷孕其實(shí)沒啥影響/h3

/body

/html

關(guān)于CSS的寫法，怎樣來寫的？

這是我以前學(xué)習(xí)時(shí)候的筆記部分，分享給你

（1）內(nèi)部樣式表（嵌套到頁(yè)面中）

內(nèi)部樣式表，寫在head/head標(biāo)簽中

style type="text/css"

div{

width :600px;

height:300px;

background:orange;

}

/style

（2）內(nèi)聯(lián)樣式（行間樣式，行內(nèi)樣式，嵌入式樣式）==很少使用

標(biāo)簽 style="屬性:屬性值; 屬性:屬性值;"/標(biāo)簽

例如：div style="width: 100px;height: 200px;background: orange;"/div

（3）引用外部樣式表文件

1）link rel="stylesheet" type="text/css" href="目標(biāo)文件的路徑及文件名全稱"?/

rel="stylesheet"作用：建立關(guān)聯(lián)性

type定義某種類型(H5中type可省略)

href導(dǎo)入css文件路徑

注：一個(gè)HTML文件可以導(dǎo)入多個(gè)CSS外部樣式表

2）@import url(CSS文件路徑以及文件全稱);

link和import導(dǎo)入外部樣式的區(qū)別：

差別1：本質(zhì)的差別：link屬于XHTML標(biāo)簽，而@import完全是CSS提供的一種方式。

差別2：加載順序的差別：當(dāng)一個(gè)頁(yè)面被加載的時(shí)候（就是被瀏覽者瀏覽的時(shí)候），link引用的CSS會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁(yè)面時(shí)開始會(huì)沒有樣式（就是閃爍）。

差別3：兼容性的差別：@import是CSS2.1提出的，所以老的瀏覽器不支持，@import只有在IE5以上的才能識(shí)別，而link標(biāo)簽無此問題。

差別4：使用dom(document object model文檔對(duì)象模型 )控制樣式時(shí)的差別：當(dāng)使用javascript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的.

這是一種CSS提供的外部引入方式，低版本瀏覽器不支持。

（4）對(duì)比：

1權(quán)重關(guān)系：

內(nèi)聯(lián)樣式表的優(yōu)先級(jí)(權(quán)重)最高

內(nèi)部樣式表和外部樣式表的權(quán)重和書寫先后順序有關(guān)(哪個(gè)放在下面哪個(gè)的權(quán)重比較高)

注：權(quán)重高屬性的會(huì)覆蓋權(quán)重低的屬性

覆蓋的只是相同的屬性，不同的屬性會(huì)繼續(xù)執(zhí)行（即CSS的層疊性）

2作用域：

內(nèi)聯(lián)作用域是最小的：只針對(duì)于當(dāng)前的標(biāo)簽

css樣式怎么寫

css樣式是HTML的一個(gè)補(bǔ)充，簡(jiǎn)單的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代碼解釋見代碼注釋。

分享標(biāo)題：css樣式的書寫,css書寫規(guī)范
瀏覽地址：http://jinyejixie.com/article44/dssisee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、面包屑導(dǎo)航、網(wǎng)站維護(hù)、電子商務(wù)、做網(wǎng)站、關(guān)鍵詞優(yōu)化

廣告

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