北大青鳥設(shè)計(jì)培訓(xùn)：創(chuàng)建CSS樣式表的三種方式？

主要探討HTML5中CSS（層疊樣式表），它是用來對(duì)HTML文檔外觀的表現(xiàn)形式進(jìn)行排版和格式化。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供莆田網(wǎng)站建設(shè)、莆田做網(wǎng)站、莆田網(wǎng)站設(shè)計(jì)、莆田網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、莆田企業(yè)網(wǎng)站模板建站服務(wù)，十余年莆田做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

使用CSSCSS樣式由一條或多條以分號(hào)隔開的樣式聲明組成。

每條聲明的樣式包含著一個(gè)CSS屬性和屬性值。

pstyle="color:red;font-size:50px;"這是一段文本/p解釋：style是行內(nèi)樣式屬性。

color是顏色屬性，red是顏色屬性值；font-size是字體大小屬性，50px是字體大小屬性值。

三種方式創(chuàng)建CSS樣式表有三種方式：1.元素內(nèi)嵌樣式；2.文檔內(nèi)嵌樣式；3.外部引入樣式。

1.元素內(nèi)嵌樣式pstyle="color:red;font-size:50px;"這是一段文本/p解釋：即在當(dāng)前元素使用style屬性的聲明方式。

2.文檔內(nèi)嵌樣式styletype="text/css"p{color:blue;font-size:40px;}/stylep這是一段文本/p解釋：在head元素之間創(chuàng)建style元素，通過選擇器的方式調(diào)用指定的元素并設(shè)置相關(guān)CSS。

3.外部引用樣式linkrel="stylesheet"type="text/css"href="style.css"http://style.css@charset"utf-8";p{color:green;font-size:30px;}解釋：很多時(shí)候，大量的HTML頁面使用了同一個(gè)組CSS。

那么就可以將這些CSS樣式保存在一個(gè)單獨(dú)的.css文件中，然后通過link元素去引入它即可。

@charset"utf-8"表明設(shè)置CSS的字符編碼，如果不寫默認(rèn)就是utf-8。

合肥電腦培訓(xùn)認(rèn)為如果有多個(gè).css文件，可以使用@import導(dǎo)入方式引入.css文件。

只不過，性能不如多個(gè)link鏈接。

CSS樣式設(shè)計(jì)

我的這個(gè)思路是寫兩個(gè)div兩個(gè)都設(shè)有邊框無背景其中一個(gè)做毛玻璃模糊做投影

代碼如下

!doctype html

html

head

titlecss邊框樣式/title

style

#bod{ width:100px; height:100px; border:2px #000 solid; border-radius:100%; background:none;}

.out{background:none; position:absolute;border-radius:100%; top:14px; left:12px; width:100px; height:100px; border:2px #000 solid; filter: url(out.svg#out); filter:blur(4px); -webkit-filter:blur(4px); -moz-filter:blur(4px); -ms-filter:blur(4px);}

/style

/head

body

div id="bod"/div

div class="out"/div

/body

/html

希望能幫到你，有疑問隨時(shí)追問

css樣式設(shè)計(jì)思路總結(jié)

如何清除圖片下方出現(xiàn)幾像素的空白間隙？

方法1：

方法2：

除了top值，還可以設(shè)置為text-top | middle | bottom | text-bottom

甚至特定的length和percentage值都可以

方法3：

如何讓文本垂直對(duì)齊文本輸入框？

如何讓單行文本在容器內(nèi)垂直居中？

如何讓超鏈接訪問后和訪問前的顏色不同且訪問后仍保留hover和active效果？

按L-V-H-A的順序設(shè)置超鏈接樣式即可，可速記為L(zhǎng)oVe（喜歡）HAte（討厭）

為什么Standard mode下IE無法設(shè)置滾動(dòng)條的顏色？

將原來設(shè)置在body上的滾動(dòng)條顏色樣式定義到html標(biāo)簽選擇符上即可

如何使文本溢出邊界不換行強(qiáng)制在一行內(nèi)顯示？

設(shè)置容器的寬度和white-space為nowrap即可，其效果類似nobr標(biāo)簽

如何使文本溢出邊界顯示為省略號(hào)？

方法（此方法Firefox5.0尚不支持）：

如何使連續(xù)的長(zhǎng)字符串自動(dòng)換行？

word-wrap的break-word值允許單詞內(nèi)換行

如何清除浮動(dòng)？

方法1：

方法2：

方法3：

如何定義鼠標(biāo)指針的光標(biāo)形狀為手型并兼容所有瀏覽器？

若將cursor設(shè)置為hand，將只有IE和Opera支持，且hand為非標(biāo)準(zhǔn)屬性值

如何讓已知高度的容器在頁面中水平垂直居中？

Know More：已知高度的容器如何在頁面中水平垂直居中

如何讓未知尺寸的圖片在已知寬高的容器內(nèi)水平垂直居中？

如何設(shè)置span的寬度和高度（即如何設(shè)置內(nèi)聯(lián)元素的寬高）？

如何給一個(gè)元素定義多個(gè)不同的css規(guī)則？

如何讓某個(gè)元素充滿整個(gè)頁面？

如何讓某個(gè)元素距離窗口上右下左4邊各10像素？

如何去掉超鏈接的虛線框？

IE7及更早瀏覽器由于不支持outline屬性，需要通過js的blur()方法來實(shí)現(xiàn)，如a onfocus="this.blur();"...

如何容器透明，內(nèi)容不透明？

原理是容器層與內(nèi)容層并級(jí)，容器層設(shè)置透明度，內(nèi)容層通過負(fù)margin或者position絕對(duì)定位等方式覆蓋到容器層上

方法2：

高級(jí)瀏覽器直接使用rgba顏色值實(shí)現(xiàn)；IE瀏覽器在定義容器透明的同時(shí)，讓子節(jié)點(diǎn)相對(duì)定位，也可達(dá)到效果

如何讓整個(gè)頁面水平居中？

定義body的text-align值為center將使得IE5.5也能實(shí)現(xiàn)居中

為什么容器的背景色沒顯示出來？為什么容器無法自適應(yīng)內(nèi)容高度？

通常出現(xiàn)這樣的情況都是由于沒有清除浮動(dòng)而引起的

如何做1像素細(xì)邊框的table？

方法1：

方法2：

IE7及更早瀏覽器不支持border-spacing屬性，但是可以通過table的標(biāo)簽屬性cellspacing來替代。

如何使頁面文本行距始終保持為n倍字體大小的基調(diào)？

注意，不要給n加單位

標(biāo)準(zhǔn)模式Standard mode和怪異模式Quirks mode下的盒模型區(qū)別？

標(biāo)準(zhǔn)模式下：Element width = width + padding + border

怪異模式下：Element width = width

以圖換字的幾種方法及優(yōu)劣分析

思路1：使用text-indent的負(fù)值，將內(nèi)容移出容器

該方法優(yōu)點(diǎn)在于結(jié)構(gòu)簡(jiǎn)潔，不理想的地方：

1.由于使用場(chǎng)景不同，負(fù)縮進(jìn)的值可能會(huì)不一樣，不易抽象成公用樣式；

2.當(dāng)該元素為鏈接時(shí)，在非IE下虛線框?qū)⒆兊貌煌暾?/p>

3.如果該元素被定義為內(nèi)聯(lián)級(jí)或者內(nèi)聯(lián)塊級(jí)，不同瀏覽器下會(huì)有較多的差異

思路2：使用display:none或visibility:hidden將內(nèi)容隱藏；

該方法優(yōu)點(diǎn)在于兼容性強(qiáng)并且容易抽象成公用樣式，缺點(diǎn)在于結(jié)構(gòu)較復(fù)雜

思路3：使用padding或者line-height將內(nèi)容擠出容器之外；

該方法優(yōu)點(diǎn)在于結(jié)構(gòu)簡(jiǎn)潔，缺點(diǎn)在于：

1.由于使用場(chǎng)景不同，padding或line-height的值可能會(huì)不一樣，不易抽象成公用樣式；

2.要兼容IE5.5及更早瀏覽器還得hack

思路4：使用超小字體和文本全透明法；

該方法結(jié)構(gòu)簡(jiǎn)單易用，推薦使用

為什么2個(gè)相鄰div的margin只有1個(gè)生效？

本例中box1的底部margin為10px，box2的頂部margin為20px，但表現(xiàn)在頁面上2者之間的間隔為20px，而不是預(yù)想中的10+20px=30px，結(jié)果是選擇2者之間最大的那個(gè)margin，我們把這種機(jī)制稱之為“外邊距合并”；外邊距合并不僅僅出現(xiàn)在相鄰的元素間，父子間同樣會(huì)出現(xiàn)。

簡(jiǎn)單列舉幾點(diǎn)注意事項(xiàng):

　外邊距合并只出現(xiàn)在塊級(jí)元素上；

　浮動(dòng)元素不會(huì)和相鄰的元素產(chǎn)生外邊距合并；

　絕對(duì)定位元素不會(huì)和相鄰的元素產(chǎn)生外邊距合并；

　內(nèi)聯(lián)塊級(jí)元素間不會(huì)產(chǎn)生外邊距合并；

　根元素間不會(huì)不會(huì)產(chǎn)生外邊距合并（如html與body間）；

　設(shè)置了屬性overflow且值不為visible的塊級(jí)元素不會(huì)與它的子元素發(fā)生外邊距合并；

如何在文本框中禁用中文輸入法？

ime-mode為非標(biāo)準(zhǔn)屬性，寫該文檔時(shí)只有IE和Firefox支持

如何解決列表中l(wèi)ist-style-image不能精準(zhǔn)定位的問題？

不使用list-style-image來定義列表項(xiàng)目標(biāo)記符號(hào)，而用background-image來代替，

并通過background-position來進(jìn)行定位

如何解決偽對(duì)象:before和:after在input標(biāo)簽上的怪異表現(xiàn)的問題？

現(xiàn)象：

在編寫本條目時(shí)，除了Opera，在所有瀏覽器下input標(biāo)簽使用偽對(duì)象:before和:after都沒有效果，即使Opera的表現(xiàn)也同樣令人詫異。大家可以試玩一下。瀏覽器版本：IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51

除了Firefox，在所有瀏覽器下偽對(duì)象:before和:after無法定義過渡和動(dòng)畫效果。

如果這個(gè)過渡或動(dòng)畫效果是必須，可以考慮使用真實(shí)對(duì)象。