您好,登錄后才能下訂單哦!
這篇文章主要介紹在html中使用css的方式有哪些,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
在html中使用css的三種方式:
1、行內(nèi)樣式:同過(guò)元素的style屬性來(lái)設(shè)置
<p style="font-size:20px; color:red">hello</p>
屬性之間分號(hào)隔開。
2、內(nèi)部樣式:在<head>的<style>元素中定義css樣式
<style> p{font-size: 20px;color: red} </style>
3、外部樣式:在css文件中定義css樣式,然后在html的<head>中通過(guò)<style>引入外部樣式表
p{font-size: 20px;color: red} <link href="xxx.css" type="text/css" rel="stylesheet" />
css文件中不加<style>標(biāo)簽,直接寫css樣式就ok。
內(nèi)部|外部樣式的語(yǔ)法: 選擇器 {屬性名1:屬性值1; 屬性名2:屬性值2}
三種方式,屬性之間都是分號(hào)隔開。
css注釋:
/* 注釋 */
css選擇器
1、元素選擇器、類選擇器、id選擇器
p{color: red} /* 元素選擇器,給所有p元素設(shè)置樣式*/ .red{color: red} /* 類選擇器,在元素中通過(guò)class="red"引用 */ #user{color: red} /* id選擇器,在元素中通過(guò)id="user"引用,最多只能使用1次 */
2、通用選擇器、分組選擇器
*{color: red} /*通用選擇器,給所有元素設(shè)置樣式 */ h2,.red{color: red} /*分組選擇器,同時(shí)給多個(gè)選擇器設(shè)置相同的樣式 */
3、后代選擇器、子選擇器、相鄰兄弟選擇器、后續(xù)兄弟選擇器
div p{color: red} /*后代選擇器,選擇<div>中所有的<p>元素,不管<p>是<div>的兒子、孫子、重孫......只要<p>是<div>的后代就行*/ div>p{color:red} /*子選擇器,選擇的是<p>,<p>必須是<div>的兒子*/ div+p{color:red} /*相鄰兄弟選擇器,選擇的是<p>,<p>必須是<div>后面的第一個(gè)兄弟元素 */ div~p{color:red} /*后續(xù)兄弟選擇器,選擇<div>后面所有的<p>,<p>必須是<div>的兄弟元素 */
4、屬性選擇器
[attr] /*含有attr屬性*/ [attr=value] /*有attr屬性,且屬性值為value*/ [attr^=value] /*有attr屬性,且屬性值以value開頭(只要value是開頭就ok*/ [attr|=value] /*有attr屬性,且屬性值以value開頭、value和后面部分以-連接 */ [attr$=value] /*有attr屬性,且屬性值以value結(jié)尾*/ [attr*=value] /*有attr屬性,且屬性值中含有value(含有就ok)*/ [attr~=value] /*有attr屬性,且屬性值中含有單詞value,value要是一個(gè)完整的單詞(和其它單詞以空格隔開)*/
屬性選擇器常和其它選擇器一起使用,比如:
button[type="button"] /*選擇所有type="button"的<button> */
屬性選擇器中,attr不能加引號(hào),value可引可不引。
5、<a>鏈接
a:link /*所有未訪問(wèn)過(guò)的<a>*元素/ a:hover /*鼠標(biāo)移到<a>元素上*/ a:active /*點(diǎn)擊<a>時(shí)*/ a:visited /*所有訪問(wèn)過(guò)的<a>*/
這4個(gè)設(shè)置的是<a>元素不同時(shí)期的樣式。
:hover這個(gè)偽類所有元素都可以使用。
6、表單元素
:focus /*聚焦時(shí)*/ :checked /*選中時(shí)*/ :enabled /*可用的*/ :disabled /*禁用的*/ :read-only /*只讀*/
可單獨(dú)使用,也可配合表單元素使用:
:focus{ } input:focus{ }
7、空元素
:empty{ } /*所有的空元素*/ p:empty{ } /*所有空的<p>元素*/
空元素指的是沒(méi)有任何屬性、沒(méi)有內(nèi)容的元素,示例:<p></p>。
8、非
:not(p) /*選擇不是<p>的所有元素*/
()中盡量只使用元素選擇器,使用其他選擇器容易出錯(cuò)。
9、type系列
p:first-of-type /*同級(jí)別中的第一個(gè)<p>*/ p:nth-of-type(n) /*同級(jí)別中的第n個(gè)<p>*/ p:nth-last-of-type(n) /*同級(jí)別中的倒數(shù)第n個(gè)<p>*/ p:last-of-type /*同級(jí)別中的最后一個(gè)<p>*/ p:only-of-type /*同級(jí)別中唯一的一個(gè)<p>*/
示例:
p:first-of-type{color:red} <body> <h2></h2> <p></p> <!--選中--> <p></p> <div> <h3></h3> <p></p> <!--選中--> <p></p> </div> </body>
只要是同級(jí)別的<p>中的第一個(gè)即可。
10、child系列
p:first-child /*匹配的是<p>,<p>要是其父元素的第一個(gè)子元素*/ p:nth-child(n) /*匹配的是<p>,<p>要是其父元素的第n個(gè)子元素*/ p:nth-last-child(n) /*匹配的是<p>,<p>要是其父元素的倒數(shù)第n個(gè)子元素*/ p:last-child /*匹配的是<p>,<p>要是其父元素的最后一個(gè)子元素*/ p:only-child /*匹配的是<p>,<p>要是其父元素的唯一一個(gè)子元素*/
示例:
p:first-child{color:red} <body> <h2></h2> <p></p> <p></p> <div> <p></p> <!--選中--> <p></p> </div> </body>
11、首字、首行
p:first-letter /*<p>元素的第一個(gè)字符*/
p:first-line /*<p>元素的第一行*/
12、:before :after
p:before{ /*在<p>的前面添加內(nèi)容*/ content:"hello " } p:after{ /*在<p>的后面添加內(nèi)容*/ content:" byebye" }
添加的內(nèi)容默認(rèn)是行內(nèi)元素,但會(huì)和<p>在同一行顯示(相當(dāng)于把添加的內(nèi)容放到<p>元素內(nèi)的最前|后面),添加的并不是一個(gè)真正的元素,所以叫做偽元素。
可以設(shè)置為塊級(jí),添加的內(nèi)容會(huì)作為塊級(jí)元素顯示:
p:before{ /*在<p>的前面添加內(nèi)容*/ content:"hello "; display: block } p:after{ /*在<p>的后面添加內(nèi)容*/ content:" byebye"; display: block }
可以給添加的元素設(shè)置樣式:
p:before{ content:"hello "; /* 屬性之間分號(hào)分隔 */ display: block; /*給添加的內(nèi)容設(shè)置樣式*/ font-size: 20px; color:red }
添加圖片:
p:before{ content:""; /* content屬性是必需的,不添加文本時(shí)可以設(shè)置為空串 */ display: block; /*必須要設(shè)置為塊級(jí),要設(shè)置寬、高,添加的背景圖片才能顯示出來(lái)*/ width: 100px; height: 100px background-image: url("1.png"); }
清除浮動(dòng):
p:before{ content:""; clear: both }
偽元素可以使用單冒號(hào),也可以使用雙冒號(hào)。
:before <=> ::before :after <=> ::after
帶冒號(hào)的選擇器中,有4個(gè)偽元素:first-letter、:first-line、:before、:after,其余都是偽類。
選擇器可以搭配使用。
在同種方式中(都是內(nèi)部|外部樣式),優(yōu)先級(jí)id選擇器最高,類選擇器次之,屬性選擇器最低。(定位越具體、詳細(xì)的,優(yōu)先級(jí)越高)
如果使用了相同的css屬性,優(yōu)先級(jí)行內(nèi)最高,內(nèi)部、外部?jī)?yōu)先級(jí)相同,看<head>中<link />、<style>的順序,后面的優(yōu)先級(jí)更高(后渲染的樣式會(huì)覆蓋之前的樣式)。
以上是“在html中使用css的方式有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。