它包含3種類型,內(nèi)部樣式,行內(nèi)樣式和外部樣式表三種
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比內(nèi)鄉(xiāng)網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式內(nèi)鄉(xiāng)網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋內(nèi)鄉(xiāng)地區(qū)。費(fèi)用合理售后完善,10余年實(shí)體公司更值得信賴。
作用的效果是按順序從下到上,相同樣式下面的會(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中style 標(biāo)簽用于為 HTML 文檔定義樣式信息。適用于所有主流瀏覽器都支持 style 標(biāo)簽。
Css中Style屬性相關(guān)介紹:
Style屬性的定義和用法:
在 style 中,您可以規(guī)定在瀏覽器中如何呈現(xiàn) HTML 文檔。type 屬性是必需的,定義 style 元素的內(nèi)容。唯一可能的值是 "text/css"。style 元素位于 head 部分中。
Style必需的屬性:
屬性:type,值:text/css,描述:規(guī)定樣式表的 MIME 類型。
Style可選的屬性:
屬性:Media,值:screen,tty,tv,projection,handheld,print,braille,aural,all。描述:為樣式表規(guī)定不同的媒介類型。
全局屬性:style 標(biāo)簽支持?HTML 中的全局屬性。
事件屬性:style 標(biāo)簽支持?HTML 中的事件屬性。
TIY 實(shí)例
A、HTML中的樣式。本例演示如何使用添加到 head 部分的樣式信息對(duì) HTML 進(jìn)行格式化。
B、沒有下劃線的鏈接。本例演示如何使用樣式屬性做一個(gè)沒有下劃線的鏈接。
C、鏈接到一個(gè)外部樣式表。本例演示如何link標(biāo)簽鏈接到一個(gè)外部樣式表。
相關(guān)頁(yè)面。HTML DOM 參考手冊(cè):Style 對(duì)象。
Css中Style屬性應(yīng)用具體案例:
html
head
style?type="text/css"
h1?{color:red}
p?{color:blue}
/style
/head
body
h1Header?1/h1
pA?paragraph./p
/body
/html
提示和注釋
1、如需鏈接外部樣式表,請(qǐng)使用?link 標(biāo)簽。
2、如需學(xué)習(xí)更多有關(guān)樣式表的知識(shí),請(qǐng)閱讀我們的?CSS 教程。
語(yǔ)法:元素.style.樣式名=樣式值
注意:如果CSS的樣式名中含有-,這種名稱在JS中是不合法的,比如 background-color 。需要將這種樣式名修改為駝峰命名法:去掉-,然后將-后的第一個(gè)字母大寫,比如 backgroundColor
我們通過(guò)style屬性設(shè)置的樣式都是內(nèi)聯(lián)樣式,而內(nèi)聯(lián)樣式有較高的優(yōu)先級(jí),所以通過(guò)JS修改的樣式往往會(huì)立即顯示
但是如果在樣式中寫了!important,則此時(shí)樣式會(huì)有最高的優(yōu)先級(jí),即使通過(guò)JS也不能覆蓋該樣式,此時(shí)將會(huì)導(dǎo)致JS修改樣式失效
所以盡量不要為樣式添加!important
語(yǔ)法:元素.style.樣式名
通過(guò)style屬性設(shè)置和讀取的都是內(nèi)聯(lián)樣式,無(wú)法讀取樣式表中的樣式
語(yǔ)法:元素.currentStyle.樣式名
如果當(dāng)前元素沒有設(shè)置該樣式,則獲取它的默認(rèn)值
例如: box1.currentStyle.width
這個(gè)方法是window的方法,可以直接使用需要兩個(gè)參數(shù)
第一個(gè):要獲取樣式的元素
第二個(gè):可以傳遞一個(gè)偽元素,一般都傳null
該方法會(huì)返回一個(gè)對(duì)象,對(duì)象中封裝了當(dāng)前元素對(duì)應(yīng)的樣式
可以通過(guò)對(duì)象﹒樣式名來(lái)讀取樣式
如果獲取的 樣式?jīng)]有設(shè)置 ,則會(huì)獲取到真實(shí)的值,而不是默認(rèn)值
比如:沒有設(shè)置width,它不會(huì)獲取到auto,而是 一個(gè)長(zhǎng)度
注意:通過(guò)currentStyle和getComputedstyle()讀取到的樣式都是只讀的,不能修改,如果要修改必須通過(guò)style屬性
參數(shù):
obj 要獲取樣式的元素
name 要獲取的樣式名
style
是樣式的意思
而css和style是一樣的作用
就是對(duì)網(wǎng)頁(yè)
上
文字
的
字體
顏色
大小
圖片的
大小
相對(duì)距離
層次
以及其他東西的樣式
另外
可以
在
其中使用
像
glow
blur
之類的濾鏡
來(lái)使
網(wǎng)頁(yè)內(nèi)容達(dá)到各種漂亮的
效果~
style
有2種使用方法
一個(gè)是直接做為標(biāo)記
style
/style
2是做為標(biāo)簽屬性
div
style="position:absolute"
/div
CSS樣式表定義的基本語(yǔ)法:
Select { property1 : value, property2: value2 }
CSS樣式表一共分3種,分別是:
1、內(nèi)聯(lián)樣式表:
內(nèi)聯(lián)樣式表是寫在標(biāo)記內(nèi)的,只對(duì)所在標(biāo)記有效。
2、內(nèi)部及聯(lián)樣式表:
利用style標(biāo)記將樣式表嵌在HTML文件的頭部。
3、外部級(jí)聯(lián)樣式表:
使用link標(biāo)記可以將樣式表鏈接到網(wǎng)頁(yè)上。
CSS樣式表的優(yōu)先級(jí):(由低到高)
瀏覽器默認(rèn)(優(yōu)先級(jí)最低)
外部級(jí)聯(lián)樣式表
內(nèi)部及聯(lián)樣式表
內(nèi)聯(lián)樣式表(優(yōu)先級(jí)最高)