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ǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè),還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
堅(jiān)守“ 做人真誠(chéng) · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀,專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都加固小微創(chuàng)業(yè)公司專業(yè)提供企業(yè)網(wǎng)站設(shè)計(jì)營(yíng)銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版,從內(nèi)容策劃、視覺(jué)設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁(yè)布局、功能開(kāi)發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。
CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制,支持幾乎所有的字體字號(hào)樣式,擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。
學(xué)習(xí)前端,CSS和JAVASCRIPT是必須要學(xué)習(xí)的,這是前端的基礎(chǔ)。
把網(wǎng)頁(yè)分拆為HTML代碼、CSS樣式表、JS腳本代碼這三部分,是為了更好地分工協(xié)作共同完成網(wǎng)頁(yè)的設(shè)計(jì)工作,比如網(wǎng)頁(yè)工程師負(fù)責(zé)網(wǎng)頁(yè)的總體架構(gòu)和布局、美工負(fù)責(zé)美化、程序員負(fù)責(zé)腳本代碼。就好比修建一棟房子,土木工程由一個(gè)工程隊(duì)負(fù)責(zé),裝修則由專門的裝修公司負(fù)責(zé),家具則到專門的家具市場(chǎng)中采購(gòu),這樣肯定比把什么都交給同一個(gè)工程隊(duì)來(lái)得更專業(yè)、更有效率、也更能夠保證質(zhì)量。
CSS就是一種叫做樣式表(stylesheet)的技術(shù)。也有的人稱之為層疊樣式表(Cascading Stylesheet)。
在主頁(yè)制作時(shí)采用CSS技術(shù),可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。
只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改,就可以改變同一頁(yè)面的不同部分,或者頁(yè)數(shù)不同的網(wǎng)頁(yè)的外觀和格式。
它的作用可以達(dá)到:
(1)在幾乎所有的瀏覽器上都可以使用。
(2)以前一些非得通過(guò)圖片轉(zhuǎn)換實(shí)現(xiàn)的功能,現(xiàn)在只要用CSS就可以輕松實(shí)現(xiàn),從而更快地下載頁(yè)面。
(3)使頁(yè)面的字體變得更漂亮,更容易編排,使頁(yè)面真正賞心悅目。
(4)你可以輕松地控制頁(yè)面的布局 。
(5)你可以將許多網(wǎng)頁(yè)的風(fēng)格格式同時(shí)更新,不用再一頁(yè)一頁(yè)地更新了。你可以將站點(diǎn)上所有的網(wǎng)頁(yè)風(fēng)格都使用一個(gè)CSS文件進(jìn)行控制,只要修改這個(gè)CSS文件中相應(yīng)的行,那么整個(gè)站點(diǎn)的所有頁(yè)面都會(huì)隨之發(fā)生變動(dòng)。
想一想,沒(méi)有使用CSS前我們是如何控制字體的顏色和大小以及所使用的字體的?我們一般使用HTML標(biāo)簽來(lái)實(shí)現(xiàn),代碼非常煩瑣。
很難想象,如果在一個(gè)頁(yè)面里需要頻繁地更替字體的顏色大小,最終生成的HTML代碼的長(zhǎng)度一定臃腫不堪。
說(shuō)實(shí)話,CSS就是為了簡(jiǎn)化這樣的工作誕生的,當(dāng)然其功能決非這么簡(jiǎn)單。
CSS是通過(guò)對(duì)頁(yè)面結(jié)構(gòu)的風(fēng)格控制的思想,控制整個(gè)頁(yè)面的風(fēng)格的。
式樣單放在頁(yè)面中,通過(guò)瀏覽器的解釋執(zhí)行,是完全的文本,任何懂得HTML的人都可以掌握,非常的容易。生殖對(duì)一些非常老的瀏覽器,頁(yè)不會(huì)產(chǎn)生頁(yè)面混亂的現(xiàn)象。
1、創(chuàng)建使用css樣式表有三種,分別是外部樣式表,內(nèi)部樣式表和內(nèi)聯(lián)樣式。下面通過(guò)一個(gè)小demo演示它們的用法,首先新建一個(gè)html文件,放入3個(gè)button按鈕,給前兩個(gè)按鈕分別設(shè)置class屬性為btn1和btn2:
2、接著準(zhǔn)備一個(gè)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)槠湟敕奖悖芾砥饋?lái)也比較方便:
4、接著是內(nèi)部樣式表的使用,這里直接在head標(biāo)簽里創(chuàng)建style標(biāo)簽,在里面加入btn2的樣式。對(duì)于內(nèi)部樣式表簡(jiǎn)單的html文件,內(nèi)部樣式是很方便的,但是結(jié)構(gòu)復(fù)雜的html文件使用它就會(huì)讓文件顯得很混亂:
5、最后是內(nèi)聯(lián)樣式的使用,直接在第三個(gè)標(biāo)簽內(nèi)使用style屬性加入樣式就可以了:
6、最后保存html文件,打開(kāi)瀏覽器可以看到三個(gè)按鈕的樣式都出現(xiàn)了。以上就是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外觀樣式,5種常用的css樣式
網(wǎng)站地址:http://m.newbst.com/article4/dssgooe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、虛擬主機(jī)、搜索引擎優(yōu)化、做網(wǎng)站、網(wǎng)站收錄
聲明:本網(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í)需注明來(lái)源: 創(chuàng)新互聯(lián)