CSS樣式表怎么做

1、創(chuàng)建使用css樣式表有三種，分別是外部樣式表，內(nèi)部樣式表和內(nèi)聯(lián)樣式。下面通過一個小demo演示它們的用法，首先新建一個html文件，放入3個button按鈕，給前兩個按鈕分別設(shè)置class屬性為btn1和btn2：

做網(wǎng)站、成都網(wǎng)站制作的開發(fā)，更需要了解用戶，從用戶角度來建設(shè)網(wǎng)站，獲得較好的用戶體驗(yàn)。成都創(chuàng)新互聯(lián)多年互聯(lián)網(wǎng)經(jīng)驗(yàn)，見的多，溝通容易、能幫助客戶提出的運(yùn)營建議。作為成都一家網(wǎng)絡(luò)公司，打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇成都創(chuàng)新互聯(lián)，不只是建站，我們把建站作為產(chǎn)品，不斷的更新、完善，讓每位來訪用戶感受到浩方產(chǎn)品的價(jià)值服務(wù)。

2、接著準(zhǔn)備一個css文件，命名為demo.css，在文件內(nèi)寫入按鈕A的樣式，保存css文件：

3、回到剛才的html文件，在style標(biāo)簽中用link標(biāo)簽引入上一步創(chuàng)建的css文件，這就是外聯(lián)樣式的用法，總結(jié)就是創(chuàng)建好的css文件內(nèi)寫好樣式，然后在html文件中用link標(biāo)簽引入即可，這也是大部分網(wǎng)站使用的方法，因?yàn)槠湟敕奖悖芾砥饋硪脖容^方便：

4、接著是內(nèi)部樣式表的使用，這里直接在head標(biāo)簽里創(chuàng)建style標(biāo)簽，在里面加入btn2的樣式。對于內(nèi)部樣式表簡單的html文件，內(nèi)部樣式是很方便的，但是結(jié)構(gòu)復(fù)雜的html文件使用它就會讓文件顯得很混亂：

5、最后是內(nèi)聯(lián)樣式的使用，直接在第三個標(biāo)簽內(nèi)使用style屬性加入樣式就可以了：

6、最后保存html文件，打開瀏覽器可以看到三個按鈕的樣式都出現(xiàn)了。以上就是css樣式表的制作方法：

css樣式寫法

html

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

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

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

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

內(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文件路徑

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

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

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

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

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

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

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

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

（4）對比：

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

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

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

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

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

2作用域：

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

CSS border（邊框）樣式寫法總結(jié)

border屬性 ：在網(wǎng)頁中設(shè)置元素的邊框樣式。可同時設(shè)置邊框?qū)挾?、邊框樣式、邊框顏色。也可以單?dú)設(shè)置上邊、右邊、下邊、左邊的邊框。

語法：border： border-width | border-style | border-color;

border-width ：邊框?qū)挾?。可以指定長度值。如1px，1em（單位為px，pt，em等）?；蛘呤褂藐P(guān)鍵字medium（默認(rèn)），thick，thin。

?border-top-width：設(shè)置元素上邊框?qū)挾?/p>

?border-right-width：設(shè)置元素右邊框?qū)挾?/p>

?border-bottom-width：設(shè)置元素下邊框?qū)挾?/p>

?border-left-width：設(shè)置元素左邊框?qū)挾?/p>

border-style ：邊框樣式。

?border-top-style：設(shè)置元素上邊框樣式

?border-right-style：設(shè)置元素右邊框樣式

?border-bottom-style：設(shè)置元素下邊框樣式

?border-left-style：設(shè)置元素左邊框樣式

?屬性值有：

??none：無邊框。

??hidden：隱藏邊框。對于表，hidden 用于解決邊框沖突。

??dotted：點(diǎn)狀邊框。

??dashed：虛線邊框。

??solid：實(shí)線邊框。

??double：雙線邊框。兩條單線與其間隔的和等于指定的border-width值。

??groove：3D凹槽邊框。

??ridge：3D壟狀邊框。

??inset：凹邊框。

??outset：凸邊框。

border-color ：邊框顏色。

1.1 邊框各樣式效果圖

1.2 四條邊顏色樣式相同

1.3 四條邊顏色不同，樣式相同

1.4 四條邊顏色相同，樣式不同

1.5 設(shè)置上邊框?qū)挾?、樣式、顏?/p>

1.6 設(shè)置右邊框?qū)挾?、樣式、顏?/p>

1.7 設(shè)置下邊框?qū)挾?、樣式、顏?/p>

1.8 設(shè)置左邊框?qū)挾?、樣式、顏?/p>

以上對border邊框?qū)傩赃M(jìn)行了基礎(chǔ)操作，大家可以根據(jù)自己的經(jīng)驗(yàn)為邊框制作出更漂亮的樣式。如若大家有什么更好的見解，那就在回復(fù)區(qū)暢所欲言吧，我定會吸取精華~如有寫錯歡迎大家回復(fù)，我以后定會更加細(xì)心 _

css樣式內(nèi)聯(lián)式，外聯(lián)式，嵌入式的格式是什么？

外聯(lián)式樣式（屬于外部樣式表）

特征：

1、有一個單獨(dú)的CSS文件存在！[如：001.css]

2、首先，通過【格式】→【樣式表連接】與CSS文件[001.css]建立連接！

3、在合適的地方使用 class="樣式名" 調(diào)用具體的樣式效果！

如：link href="001.css" type="text/css" rel="Stylesheet"/

嵌入式樣式（屬于內(nèi)部樣式表）

特征：

1、樣式的屬性內(nèi)容以代碼的形式[放在 ]寫在網(wǎng)頁代碼中！

2、首先，通過【格式】→【樣式】設(shè)置樣式的屬性內(nèi)容！

3、在合適的地方使用 class="樣式名" 調(diào)用具體的樣式效果！

如： style type="text/css"

.main{ width:1002px; margin:0 auto;}

/style

內(nèi)聯(lián)式樣式（屬于內(nèi)部樣式表）

特征：

1、樣式的屬性內(nèi)容直接跟在將要修飾的文字標(biāo)記里[如：

2、具體格式： style="font-size:10px;font-color:#ff0000"

例如：修飾單元格里的文字

3. 嵌入式

最初級的 CSS 寫法即把代碼直接添加于所修飾的標(biāo)記元素。示例代碼如下：

div style="font-family:Arial,Helvetica,sans-serif;"芒果/div

這樣做雖然更為直觀，但很大程度上加大了頁面體積，不符合結(jié)構(gòu)與表現(xiàn)分離的設(shè)計(jì)思想。

總體而言，外聯(lián)和內(nèi)聯(lián)各有優(yōu)點(diǎn)，可綜合實(shí)際情況選擇適合的級聯(lián)方式。

擴(kuò)展資料：

編程工具

記事本：使用Windows系統(tǒng)自帶的記事本可以編輯網(wǎng)頁。只需要在保存文檔時，以.html為后綴名進(jìn)行保存即可。

Dreamweaver：它與Flash、Fireworks并稱網(wǎng)頁三劍客。Dreamweaver是集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計(jì)師特別開發(fā)的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出充滿動感的網(wǎng)頁。

語言特點(diǎn)

CSS為HTML標(biāo)記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設(shè)計(jì)領(lǐng)域是一個突破。利用它可以實(shí)現(xiàn)修改一個小的樣式更新與之相關(guān)的所有頁面元素。

總體來說，CSS具有以下特點(diǎn)：

豐富的樣式定義

CSS提供了豐富的文檔樣式外觀，以及設(shè)置文本和背景屬性的能力；允許為任何元素創(chuàng)建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內(nèi)容間的距離；允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。

易于使用和修改

CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用。總之，CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理。

另外，可以將相同樣式的元素進(jìn)行歸類，使用同一個樣式進(jìn)行定義，也可以將某個樣式應(yīng)用到所有同名的HTML標(biāo)簽中，也可以將一個CSS樣式指定到某個頁面元素中。如果要修改樣式，我們只需要在樣式列表中找到相應(yīng)的樣式聲明進(jìn)行修改。

多頁面應(yīng)用

CSS樣式表可以單獨(dú)存放在一個CSS文件中，這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬于任何頁面文件，在任何頁面文件中都可以將其引用。這樣就可以實(shí)現(xiàn)多個頁面風(fēng)格的統(tǒng)一。

層疊

簡單的說，層疊就是對一個元素多次設(shè)置同一個樣式，這將使用最后一次設(shè)置的屬性值。例如對一個站點(diǎn)中的多個頁面使用了同一套CSS樣式表，而某些頁面中的某些元素想使用其他樣式，就可以針對這些樣式單獨(dú)定義一個樣式表應(yīng)用到頁面中。

這些后來定義的樣式將對前面的樣式設(shè)置進(jìn)行重寫，在瀏覽器中看到的將是最后面設(shè)置的樣式效果。

頁面壓縮

在使用HTML定義頁面效果的網(wǎng)站中，往往需要大量或重復(fù)的表格和font元素形成各種規(guī)格的文字樣式，這樣做的后果就是會產(chǎn)生大量的HTML標(biāo)簽，從而使頁面文件的大小增加。

而將樣式的聲明單獨(dú)放到CSS樣式表中，可以大大的減小頁面的體積，這樣在加載頁面時使用的時間也會大大的減少。另外，CSS樣式表的復(fù)用更大程序的縮減了頁面的體積，減少下載的時間。

參考資料：百度百科-CSS

簡單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)放在鏈接上時有下劃線*/

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"電腦對懷孕其實(shí)沒啥影響/a/b/p

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

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

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

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

/body

/html

文章題目：css樣式寫法,css樣式的語法
分享網(wǎng)址：http://chinadenli.net/article14/dseoede.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、用戶體驗(yàn)、企業(yè)建站、微信公眾號、網(wǎng)站內(nèi)鏈、靜態(tài)網(wǎng)站

廣告

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