當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML中放置CSS的三种方式和CSS选择器

發(fā)布時間：2023/12/18 HTML 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML中放置CSS的三种方式和CSS选择器小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

(一)在HTML中使用CSS樣式的方式一般有三種： 1 內(nèi)聯(lián)引用 2 內(nèi)部引用 3 外部引用。第一種：內(nèi)聯(lián)引用（也叫行內(nèi)引用）就是把CSS樣式直接作用在HTML標簽中。

?　　<p style="font-size: 10px; color: #FFFFFF;">

?　　使用CSS內(nèi)聯(lián)引用表現(xiàn)段落.

?　　</p>

特點：內(nèi)聯(lián)的樣式比其他方法更加靈活，但需要和展示的內(nèi)容混淆在一起，內(nèi)聯(lián)樣式會失去一些樣式表的優(yōu)點。第二種：內(nèi)部引用（也叫內(nèi)嵌式）使用style標簽直接把CSS文件中的內(nèi)容加載到HTML文檔內(nèi)部的<head>標簽里。

　　<head>

???? 　　……

??? 　　<style type="text/css">

????????? 　　/* 設(shè)置本頁面p標簽中的文字為以下樣式*/

??????????　　 p{

? ?　　font-size: 10px;

? ?　　color: #FFFFFF;

?????????　　? }

???? 　　</style>

　　</head>

特點 : 適合用于一個HTML文檔具有獨一無二的樣式時。第三種：外部引用 CSS外部引用使用了外接的CSS文件,一般的瀏覽器都帶有緩存功能,所以用戶不用每次都下載此CSS文件. 外部引用相對于內(nèi)部引用和內(nèi)聯(lián)引用來說是高效的是節(jié)省寬帶的. 外部引用是W3C推薦使用的實現(xiàn)外部引用有兩種方式： (1)使用link標簽引用CSS 　　　　(2)使用@import導(dǎo)入CSS

　　<head>

????　　 ……

????　　 <link rel="stylesheet" type="text/css" href="mystyle.css">

??? 　　<style type="text/css">

?????????? 　　@import "mystyle2.css"

???????????　　 …….? /*其它CSS定義*/

???　　 </style>

　　</head> 注 : 如果在同一個選擇器上使用幾個不同的樣式表時，這個屬性值將會疊加幾個樣式表，遇到?jīng)_突的地方會以最后定義的為準。 (二)CSS選擇器有六種選擇符: 1 HTML選擇符 2 類選擇符 3 ID選擇符 4 關(guān)聯(lián)選擇符 5 組合選擇符 6 偽元素選擇符 1 HTML選擇符 : 即是HTML標簽，用來改變一個指定標簽的樣式，任何HTML元素都可以是一個CSS的選擇符。語法：HTML標簽名{屬性：值}

　　p? { text-indent:3em; }? /*當中的選擇符是p*/

　　h1{ color:red; }? /*當中的選擇符是h1*/

2 類選擇符 : 匹配文檔中元素E的class屬性的屬性值為classname的元素語法：標記名.類名{屬性：值} 或 .類名{屬性：值} 類選擇符名稱的定義方式是,"."符號，英文"dot"，后加類名稱classname 類選擇符的定義需要有.符號（.符號標明是類選擇符），但是HTML文檔中的標簽的class屬性名不能出現(xiàn).符號，見下面示例：

　　p.dark-row{ background:#EAEAEA; }　　　　/*設(shè)置p標簽中class屬性為dark-row的*/

　　.note{ font-size:small }　　　　　　　　　　? /*為note的類可以被用于任何元素*/

　　<div class="note">第四段</div> ? 　　　　　<!– 具有類note樣式 --> 3 ID選擇符 : 匹配文檔中元素E的id屬性的屬性值為idname的元素語法：ID名稱{屬性：值} ID選擇符名稱的定義方式是，#符號，英文"pound"，后加ID名稱idname ID選擇符的定義需要有#符號（#符號標明是ID選擇符），但是HTML文檔中的標簽的id屬性名不能出現(xiàn)#符號，見下面示例 id屬性的特殊之處在于，一個文檔中只能有一個元素使用一個ID選擇符（與class屬性正好相反），id屬性可以用來單一地標識一個元素。

　　#main{ text-indent:3em; }? /*ID名稱main前加上一個#號*/

　　… …

4 關(guān)聯(lián)選擇符 : 也稱包含選擇符,可以單獨對某種元素包含關(guān)系定義的樣式表，元素1里包含元素2，這種方式只對在元素1里的元素2定義，對單獨的元素1或元素2無定義語法：選擇符1 選擇符2...{屬性：值} table a{font-size:12px} ? 在表格內(nèi)的鏈接改變了樣式，文字大小為12象素，而表格外的鏈接的文字仍為默認大小。 5 組合選擇符：也叫選擇符組，可以把相同屬性和值的選擇符組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重復(fù)定義。語法：選擇符1,選擇符2,.,..{屬性：值} h1, h2, h3, h4, h5, h6 { color: green }

　　p, table{ font-size: 9pt }

? 　　效果完全等效于：
　　p { font-size: 9pt }
　　table { font-size: 9pt }

6 偽元素選擇符是指對同一個HTML元素不同狀態(tài)的一種定義方式。例如對于<a>標簽的正常狀態(tài)、訪問狀態(tài)、選中狀態(tài)、光標移到超鏈接文本上的狀態(tài)，就可以使用偽元素選擇器來定義。語法：標簽:偽元素{屬性:值;}

　　a:link {color: #FF0000; text-decoration: none} ? ?　　??　　?/* 未訪問的鏈接 */

　　a:visited {color: #00FF00; text-decoration: none} ? ???　　?/* 已訪問的鏈接 */

　　a:hover {color: #FF00FF; text-decoration: underline}　　 /* 鼠標在鏈接上 */

　　a:active {color: #0000FF; text-decoration: underline} 　　/* 激活鏈接 */ 提示：a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。提示：a:active 必須被置于 a:hover 之后，才是有效的。最近整理的所學的淺顯知識,若有錯誤,敬請指正.

轉(zhuǎn)載于:https://www.cnblogs.com/hongxinlaoking/p/4675073.html

總結(jié)

以上是生活随笔為你收集整理的HTML中放置CSS的三种方式和CSS选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。