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