在js中修改css樣式,必須通過(guò)關(guān)鍵詞style。在編輯修改CSS直接設(shè)置樣式(內(nèi)聯(lián)樣式)使用JavaScript設(shè)置元素樣式的最簡(jiǎn)單方法是使用style屬性,在我們通過(guò)JavaScript訪問(wèn)的每個(gè)HTML元素時(shí)都有一個(gè)style對(duì)象。
從事成都機(jī)柜租用,服務(wù)器租用,云主機(jī),網(wǎng)絡(luò)空間,國(guó)際域名空間,CDN,網(wǎng)絡(luò)代維等服務(wù)。
1、引jQuery,然后定義元素的style樣式,根據(jù)自己的元素來(lái)定義,這里隨性定義div的style樣式。
2、接著我們看樣式所帶來(lái)的效果,接著開始設(shè)置點(diǎn)擊按鈕會(huì)產(chǎn)生變化顏色等交互效果。
3、首先,自然是指定好觸發(fā)變化顏色的事件,可以是經(jīng)過(guò)觸發(fā)等,這里我就點(diǎn)擊即可觸發(fā)顏色變化。
4、用css()便可以覆蓋原來(lái)元素的樣式了哦。
5、如果是修改元素單個(gè)樣式,要用逗號(hào)隔開,不可以使用冒號(hào)哦。
6、這樣就可以得到交互效果了,但是這只是一個(gè)樣式的效果發(fā)生了變化,
7、可以用大括號(hào)裹住多個(gè)樣式,逗號(hào)分隔樣式,然后樣式值用冒號(hào)
8、最后樣式交互就大功告成了,多個(gè)樣式就會(huì)被修改了
color屬性:設(shè)置文本文字顏色。用法如下:
color:顏色值;
color屬性可以設(shè)置的合法顏色值包括:16進(jìn)制顏色值(例:#ffffff),rgb顏色值【例:rgb(0,0,0)】,rgba顏色值【例:rgb(0,0,0,0.5),0.5表示透明度】,hsl顏色值【例:hsl(120,65%,75%)】,hsla顏色值【hsl(120,65%,75%,0.3),0.3表示透明度】。
2、css文本文字行高(行間距)的屬性
line-height屬性:設(shè)置行間的距離(行高)。用法如下:
line-height:值;
具體cssline-height屬性是如何設(shè)置文本文字的行間距,大家可以參考之前的文章【css如何設(shè)置行間距?css文本文字的行間距設(shè)置】,希望對(duì)大家有所幫助。
3、css設(shè)置文本文字的水平對(duì)齊方式的屬性
text-align屬性:設(shè)置元素中的文本文字的水平對(duì)齊方式。用法如下:
text-align:left||right||center||justify;
left:設(shè)置文本文字左對(duì)齊。默認(rèn)值:由瀏覽器決定。
right:設(shè)置文本文字右對(duì)齊。
center:設(shè)置文本文字居中對(duì)齊。
justify:實(shí)現(xiàn)兩端對(duì)齊文本效果。
4、css文本縮進(jìn)屬性
text-indent屬性:設(shè)置文本縮進(jìn)。
具體csstext-indent屬性是怎樣設(shè)置文本縮進(jìn)的,大家可以參考【css如何實(shí)現(xiàn)首行縮進(jìn)效果?text-indent屬性實(shí)現(xiàn)首行縮進(jìn)】。
5、設(shè)置文本文字裝飾效果
text-decoration屬性:定義添加到文本的修飾。
說(shuō)明:
這個(gè)屬性允許對(duì)文本設(shè)置某種效果,如加下劃線。如果后代元素沒有自己的裝飾,祖先元素上設(shè)置的裝飾會(huì)“延伸”到后代元素中。
用法:
text-indent:none||[underline(下劃線)||overline(上劃線)||line-through(中劃線)]||blink;
none:默認(rèn)值,定義標(biāo)準(zhǔn)的文本。
underline:定義文本下的一條線。
overline:定義文本上的一條線。
line-through:定義穿過(guò)文本下的一條線。
blink:定義閃爍的文本。
6、文本字符的大小寫轉(zhuǎn)換屬性
text-transform屬性:控制文本字符的大小寫。
用法:
text-transform:uppercase(全大寫)||lowercase(全小寫)||capitalize(首字母大寫)||none;
7、文本文字間距的屬性
word-spacing屬性:設(shè)置文字或單詞之間的間距,單詞之間的間距=word-spacing+空格大小。
letter-spacing屬性:設(shè)置字母間的間隔。
8、文本文字陰影的屬性
text-shadow屬性:向文本文字設(shè)置陰影
1、使用CSS 設(shè)置文本樣式有:color、letter-spacing、line-height、text-align、text-decoration、word-spacing
2、使用CSS 設(shè)置背景顏色的標(biāo)簽background-color,背景圖片的標(biāo)簽:background
3、使用CSS 設(shè)置的其他元素有哪些?margin、padding、position等
有三種方法:
行內(nèi)樣式 直接在標(biāo)簽里面添加style屬性,在style屬性里面寫樣式即可;
內(nèi)部樣式 在head標(biāo)簽里面通過(guò)style標(biāo)簽來(lái)寫入內(nèi)部樣式;
外部樣式 通過(guò)link標(biāo)簽引入外部樣式表。
主要探討HTML5中CSS(層疊樣式表),它是用來(lái)對(duì)HTML文檔外觀的表現(xiàn)形式進(jìn)行排版和格式化。
使用CSS
CSS樣式由一條或多條以分號(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;
}
/style
p這是一段文本/p
解釋:在head元素之間創(chuàng)建style元素,通過(guò)選擇器的方式調(diào)用指定的元素并設(shè)置相關(guān)CSS。
3.外部引用樣式
linkrel="stylesheet"type="text/css"href="style.css"
//style.css
@charset"utf-8";
p{
color:green;
font-size:30px;
}
解釋:很多時(shí)候,大量的HTML頁(yè)面使用了同一個(gè)組CSS。那么就可以將這些CSS樣式保存在一個(gè)單獨(dú)的.css文件中,然后通過(guò)link元素去引入它即可。@charset"utf-8"表明設(shè)置CSS的字符編碼,如果不寫默認(rèn)就是utf-8。曲靖電腦培訓(xùn)認(rèn)為如果有多個(gè).css文件,可以使用@import導(dǎo)入方式引入.css文件。只不過(guò),性能不如多個(gè)link鏈接。
新聞名稱:css設(shè)置樣式,css設(shè)置樣式優(yōu)先級(jí)
新聞來(lái)源:http://chinadenli.net/article36/dsdiopg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、域名注冊(cè)、網(wǎng)站設(shè)計(jì)公司、微信小程序
聲明:本網(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)