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

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

永吉ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書(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í)開(kāi)始會(huì)沒(méi)有樣式（就是閃爍）。

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

差別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)重和書(shū)寫先后順序有關(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樣式表怎么做

在網(wǎng)頁(yè)中使用CSS：

一、內(nèi)部規(guī)則 - 直接寫在網(wǎng)頁(yè)文件內(nèi)部的樣式

1.將以下代碼插入在HEAD與/HEAD之間可設(shè)定此頁(yè)的默認(rèn)的樣式

style type="text/css"

!--

body{color=red;font-size=9pt}

--

/style

2.在HTML行中加入樣式規(guī)則

如：

P STYLE="background: yellow; font-family: courier"Amaze your friends!/P

二、外部規(guī)則 - 獨(dú)立的樣式表文件

1.鏈接樣式表文件

方法：在HEAD內(nèi)使用LINK標(biāo)簽：

如：LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css"

并建立一個(gè)文本文件，起名mystyles.css (和上面對(duì)應(yīng))。文件內(nèi)容如：

H1 { color: green; font-family: impact }

P { background: yellow; font-family: courier }

2.輸入樣式表文件(返回)

方法：在HEAD內(nèi)插入列代碼：

STYLE TYPE="text/css"

!--

@import url(company.css);

H1 { color: orange; font-family: impact }

--

/STYLE

并建立一個(gè)文本文件，起名company.css (和上面對(duì)應(yīng))。文件內(nèi)容如：

H1 { color: green; font-family: impact }

P { background: yellow; font-family: courier }

可見(jiàn)該種方法的好處是可與網(wǎng)頁(yè)的內(nèi)部樣式共存。

怎樣創(chuàng)建css樣式表？

CSS（層疊樣式表）級(jí)聯(lián)樣式表是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML

（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。

有三種方法可以在站點(diǎn)網(wǎng)頁(yè)上使用樣式表：

外聯(lián)式Linking（也叫外部樣式）：將網(wǎng)頁(yè)鏈接到外部樣式表。

嵌入式Embedding（也叫內(nèi)頁(yè)樣式）：在網(wǎng)頁(yè)上創(chuàng)建嵌入的樣式表。

內(nèi)聯(lián)式Inline（也叫行內(nèi)樣式）：應(yīng)用內(nèi)嵌樣式到各個(gè)網(wǎng)頁(yè)元素。

在Dreamweaver 8中，可以在開(kāi)始彈出框中點(diǎn)擊新建CSS文件。也可以在最上面的菜單欄里占擊

文件，新建。在彈出框中選擇CSS文件就可以了。

CSS樣式表的作用及特點(diǎn)

CSS可以很方便的用來(lái)控制網(wǎng)頁(yè)的外觀。主要有以下特點(diǎn)：

1.可以同時(shí)更新多個(gè)網(wǎng)頁(yè)的樣式。

2.使網(wǎng)頁(yè)的表示層與結(jié)構(gòu)層徹底分離

3.大大減小了網(wǎng)頁(yè)文件的大下

4.加快了網(wǎng)頁(yè)的加載速度

現(xiàn)在用CSS來(lái)布局網(wǎng)頁(yè)已經(jīng)是一種潮流，如果要向網(wǎng)頁(yè)設(shè)計(jì)方面發(fā)展，必須精通CSS。

CSS 樣式表有哪幾種

css是英文Cascading Style Sheets的縮寫。它是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。

它包含3種類型，內(nèi)部樣式，行內(nèi)樣式和外部樣式表三種

作用的效果是按順序從下到上，相同樣式下面的會(huì)覆蓋原有樣式，除特殊情況外，一般都是行內(nèi)樣式內(nèi)部樣式外部樣式。

以div為例

行內(nèi)樣式寫法：

在style里面寫樣式

div style="height:30px; background:#f00;"/div

內(nèi)部樣式：

在head標(biāo)簽內(nèi)加入style標(biāo)簽，在標(biāo)簽內(nèi)寫樣式：

style

div{height:30px; background:#f00;}

/style

外部樣式是建立一個(gè)新文件后綴名為.css

舉個(gè)例子：

建立style.css文件放在項(xiàng)目根目錄下：

在里面寫入

div{height:30px; background:#f00;}

然后保存，在html的head標(biāo)簽內(nèi)調(diào)用樣式

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

css樣式表

沒(méi)有做基本的格式化,

需要為加上

.list{margin:0;padding:0;}

或者在css最前面加上，格式化樣式。可以搜下css reset

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}