1.外部樣式表就是新建一個(gè)文檔,里面全寫css,然后再通過 link 插入到html 代碼中
成都創(chuàng)新互聯(lián)是一家專業(yè)提供鞏留企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為鞏留眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
2.內(nèi)部樣式表就是直接在HTML文檔中寫css代碼,寫在head/head中
用style/style包圍
3.內(nèi)聯(lián)樣式就是 直接在標(biāo)簽里寫樣式,形如 div style = "color:#000"/div
外聯(lián)式樣式(屬于外部樣式表)
特征:
1、有一個(gè)單獨(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. 嵌入式
最初級(jí)的 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í)際情況選擇適合的級(jí)聯(lián)方式。
擴(kuò)展資料:
編程工具
記事本:使用Windows系統(tǒng)自帶的記事本可以編輯網(wǎng)頁。只需要在保存文檔時(shí),以.html為后綴名進(jìn)行保存即可。
Dreamweaver:它與Flash、Fireworks并稱網(wǎng)頁三劍客。Dreamweaver是集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器,它是第一套針對(duì)專業(yè)網(wǎng)頁設(shè)計(jì)師特別開發(fā)的視覺化網(wǎng)頁開發(fā)工具,利用它可以輕而易舉地制作出充滿動(dòng)感的網(wǎng)頁。
語言特點(diǎn)
CSS為HTML標(biāo)記語言提供了一種樣式描述,定義了其中元素的顯示方式。CSS在Web設(shè)計(jì)領(lǐng)域是一個(gè)突破。利用它可以實(shí)現(xiàn)修改一個(gè)小的樣式更新與之相關(guān)的所有頁面元素。
總體來說,CSS具有以下特點(diǎn):
豐富的樣式定義
CSS提供了豐富的文檔樣式外觀,以及設(shè)置文本和背景屬性的能力;允許為任何元素創(chuàng)建邊框,以及元素邊框與其他元素間的距離,以及元素邊框與元素內(nèi)容間的距離;允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。
易于使用和修改
CSS可以將樣式定義在HTML元素的style屬性中,也可以將其定義在HTML文檔的header部分,也可以將樣式聲明在一個(gè)專門的CSS文件中,以供HTML頁面引用??傊珻SS樣式表可以將所有的樣式聲明統(tǒng)一存放,進(jìn)行統(tǒng)一管理。
另外,可以將相同樣式的元素進(jìn)行歸類,使用同一個(gè)樣式進(jìn)行定義,也可以將某個(gè)樣式應(yīng)用到所有同名的HTML標(biāo)簽中,也可以將一個(gè)CSS樣式指定到某個(gè)頁面元素中。如果要修改樣式,我們只需要在樣式列表中找到相應(yīng)的樣式聲明進(jìn)行修改。
多頁面應(yīng)用
CSS樣式表可以單獨(dú)存放在一個(gè)CSS文件中,這樣我們就可以在多個(gè)頁面中使用同一個(gè)CSS樣式表。CSS樣式表理論上不屬于任何頁面文件,在任何頁面文件中都可以將其引用。這樣就可以實(shí)現(xiàn)多個(gè)頁面風(fēng)格的統(tǒng)一。
層疊
簡(jiǎn)單的說,層疊就是對(duì)一個(gè)元素多次設(shè)置同一個(gè)樣式,這將使用最后一次設(shè)置的屬性值。例如對(duì)一個(gè)站點(diǎn)中的多個(gè)頁面使用了同一套CSS樣式表,而某些頁面中的某些元素想使用其他樣式,就可以針對(duì)這些樣式單獨(dú)定義一個(gè)樣式表應(yīng)用到頁面中。
這些后來定義的樣式將對(duì)前面的樣式設(shè)置進(jìn)行重寫,在瀏覽器中看到的將是最后面設(shè)置的樣式效果。
頁面壓縮
在使用HTML定義頁面效果的網(wǎng)站中,往往需要大量或重復(fù)的表格和font元素形成各種規(guī)格的文字樣式,這樣做的后果就是會(huì)產(chǎn)生大量的HTML標(biāo)簽,從而使頁面文件的大小增加。
而將樣式的聲明單獨(dú)放到CSS樣式表中,可以大大的減小頁面的體積,這樣在加載頁面時(shí)使用的時(shí)間也會(huì)大大的減少。另外,CSS樣式表的復(fù)用更大程序的縮減了頁面的體積,減少下載的時(shí)間。
參考資料:百度百科-CSS
css外部樣式如何調(diào)用方法如下:
1、直接在div中使用css樣式制作div+css網(wǎng)頁
2、html中使用style自帶式
3、使用@import引用外部CSS文件
4、使用link引用外部CSS文件 推薦此方法
接下來將逐個(gè)講解html引用css方法的例子
1、直接在html標(biāo)簽元素內(nèi)嵌入css樣式,如div style="font-size:14px; color:#FF0000;"我是div css測(cè)試內(nèi)容-支持/div 效果如下圖
2、在html頭部head部分內(nèi)style聲明插入代碼如下:
style?type="text/css"?
!--?
.ceshi?{font-size:14px;?color:#FF0000;}/*這里是設(shè)置CSS的樣式內(nèi)容*/?
--?
/style
具體方法如下圖:
3、使用@import引用外部CSS文件方法
!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"
""?
html?xmlns=""?
head?
meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/?
titlecss引用方法實(shí)例-測(cè)試實(shí)例/title?
style?type="text/css"?
!--?
@import?url(wcss.css);/*這里是通過@import引用CSS的樣式內(nèi)容*/?
--?
/style?
/head?
body?
div?class="ceshi"我是div?css測(cè)試內(nèi)容支持/div?
/body?
/html
Wcss.css文件內(nèi)代碼.ceshi {font-size:14px; color:#FF0000;}
效果如下圖:
可以看出使用此方法和使用自帶式引用css樣式表方法有相同處,都是需要在html的head內(nèi)使用style標(biāo)簽引用外部css。
4、使用link來調(diào)用外部的css文件
在head放置link rel="stylesheet" href="wcss.css" type="text/css" /來調(diào)用外部的wcss.css文件來實(shí)現(xiàn)html引用css文件
詳細(xì)如下圖
此方法就不需要style標(biāo)簽,而是直接通過link一個(gè)樣式來引用外部樣式。
CSS是一門指定文檔該如何呈現(xiàn)給用戶的語言。
一、CSS幫助您將文檔信息的內(nèi)容和如何展現(xiàn)它的細(xì)節(jié)相分離
創(chuàng)建html文檔
創(chuàng)建樣式表
在與前面相同的目錄中,新建另一個(gè)文本文件。該文件將成為您的樣式表。請(qǐng)將它命名為:style1.css
在您的CSS文件中,復(fù)制、粘貼下面的行,并保存該文件:
二、連接您的文檔和樣式表
為將您的文檔和樣式表相連,請(qǐng)編輯您的HTML文件。并添加下面高亮的行:
保存該文件并刷新您的瀏覽器。該樣式表將首字母顯示為紅色,如下所示:
三、rel=“stylesheet”是什么意思呢?
范例中呈現(xiàn)的是標(biāo)準(zhǔn)HTML link標(biāo)簽嵌入css檔案的寫法,其中「rel="stylesheet" type="text/css"」所代表的意思,就是告訴瀏覽器要導(dǎo)入一個(gè)在外部的css檔案,透過href導(dǎo)入名為xxxx.css的樣式檔案。
連接外部CSS樣式 外部CSS樣式是一個(gè)獨(dú)立的CSS文件,當(dāng)在網(wǎng)頁中直接創(chuàng)建外部CSS樣式時(shí),該樣式自動(dòng)應(yīng)用到網(wǎng)頁中;當(dāng)在創(chuàng)建空白網(wǎng)頁時(shí),通??梢愿郊右呀?jīng)存在的外部樣式表。如果CSS樣式文件已經(jīng)存在,制作網(wǎng)頁時(shí)可以通過【CSS樣式】面板中的【附加樣式表】按鈕來鏈接,具體操作如下: (1)單擊【附加樣式表】按鈕,在打開【鏈接外部樣式表】對(duì)話框(見圖1)中選擇外部CSS文件后,可以通過“連接”或“導(dǎo)入”方式將其應(yīng)用到當(dāng)前網(wǎng)頁中。(2)在【添加為】中選擇其中的一個(gè)選項(xiàng): ◇若要?jiǎng)?chuàng)建當(dāng)前文檔和外部樣式表之間的鏈接,請(qǐng)選擇【鏈接】單擊按鈕。該選項(xiàng)在HTML代碼中創(chuàng)建一個(gè)link標(biāo)記,并引用已發(fā)布的樣式表所在的URL。link標(biāo)記必須放在頁面的head區(qū)域。Internet Explorer和Netscape Navigator都支持此方法。 ◇如果希望導(dǎo)入而不是鏈接到外部樣式表,請(qǐng)選擇【導(dǎo)入】單擊按鈕。導(dǎo)入外部樣式表是指在內(nèi)部樣式表的style里導(dǎo)入一個(gè)外部樣式表,導(dǎo)入時(shí)用@import。 注意:不能使用 【鏈接】標(biāo)記添加從一個(gè)外部樣式表到另外一個(gè)外部樣式表的引用。如果要嵌套樣式表,必須使用【導(dǎo)入】指令。大多數(shù)瀏覽器還能識(shí)別頁面中(而不僅僅是樣式表中)的導(dǎo)入指令。當(dāng)在鏈接到頁面與導(dǎo)入到頁面的外部樣式表中存在重疊的規(guī)則時(shí),不同瀏覽器解決沖突屬性的方式具有細(xì)微的差別。
建立外部樣式表很簡(jiǎn)單,就在html的head里寫
link rel="stylesheet" type="text/css" href="css文件路徑"
至于你上邊說的一大堆css里具體內(nèi)容,建議你去w3school上學(xué)一下css,css很簡(jiǎn)單的,還是別指望別人給你寫好了