HTML中放置CSS的三种方式和CSS选择器
? <p style="font-size: 10px; color: #FFFFFF;">
? 使用CSS內聯引用表現段落.
? </p>
特點：內聯的樣式比其他方法更加靈活，但需要和展示的內容混淆在一起，內聯樣式會失去一些樣式表的優點。 第二種：內部引用（也叫內嵌式） 使用style標簽直接把CSS文件中的內容加載到HTML文檔內部的<head>標簽里。<head>
???? ……
??? <style type="text/css">
????????? /* 設置本頁面p標簽中的文字為以下樣式*/
?????????? p{
? ? font-size: 10px;
? ? color: #FFFFFF;
????????? ? }
???? </style>
</head>
特點 : 適合用于一個HTML文檔具有獨一無二的樣式時。 第三種：外部引用 CSS外部引用使用了外接的CSS文件,一般的瀏覽器都帶有緩存功能,所以用戶不用每次都下載此CSS文件. 外部引用相對于內部引用和內聯引用來說是高效的是節省寬帶的. 外部引用是W3C推薦使用的 實現外部引用有兩種方式： (1)使用link標簽引用CSS (2)使用@import導入CSS<head>
???? ……
???? <link rel="stylesheet" type="text/css" href="mystyle.css">
??? <style type="text/css">
?????????? @import "mystyle2.css"
??????????? …….? /*其它CSS定義*/
??? </style>
</head> 注 : 如果在同一個選擇器上使用幾個不同的樣式表時，這個屬性值將會疊加幾個樣式表，遇到沖突的地方會以最后定義的為準。 (二)CSS選擇器有六種選擇符: 1 HTML選擇符 2 類選擇符 3 ID選擇符 4 關聯選擇符 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屬性名不能出現.符號，見下面示例：p.dark-row{ background:#EAEAEA; } /*設置p標簽中class屬性為dark-row的*/
.note{ font-size:small } ? /*為note的類可以被用于任何元素*/
<p class="dark-row">第一段</p>? ?????? ? <!– 具有類dark-row樣式 -->
<span class="dark-row">第二段</span> ? <!– 沒有類dark-row樣式 -->
<span class="note">第三段</span>??????? ? <!– 具有類note樣式 -->
<div class="note">第四段</div> ? <!– 具有類note樣式 --> 3 ID選擇符 : 匹配文檔中元素E的id屬性的屬性值為idname的元素 語法：ID名稱{屬性：值} ID選擇符名稱的定義方式是，#符號，英文"pound"，后加ID名稱idname ID選擇符的定義需要有#符號（#符號標明是ID選擇符），但是HTML文檔中的標簽的id屬性名不能出現#符號，見下面示例 id屬性的特殊之處在于，一個文檔中只能有一個元素使用一個ID選擇符（與class屬性正好相反），id屬性可以用來單一地標識一個元素 。#main{ text-indent:3em; }? /*ID名稱main前加上一個#號*/
… …
<p id=“main”>文本縮進3em</p>? <!– 在html的p標簽中指定id屬性main -->
?
4 關聯選擇符 : 也稱包含選擇符,可以單獨對某種元素包含關系定義的樣式表，元素1里包含元素2，這種方式只對在元素1里的元素2定義，對單獨的元素1或元素2無定義 語法：選擇符1 選擇符2...{屬性：值} table a{font-size:12px} ? 在表格內的鏈接改變了樣式，文字大小為12象素，而表格外的鏈接的文字仍為默認大小。 5 組合選擇符：也叫選擇符組，可以把相同屬性和值的選擇符組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重復定義。 語法：選擇符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元素不同狀態的一種定義方式。例如對于<a>標簽的正常狀態、訪問狀態、選中狀態、光標移到超鏈接文本上的狀態，就可以使用偽元素選擇器來定義。 語法：標簽:偽元素{屬性:值;}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 之后，才是有效的。 最近整理的所學的淺顯知識,若有錯誤,敬請指正.?
轉載于:https://www.cnblogs.com/hongxinlaoking/p/4675073.html
總結
以上是生活随笔為你收集整理的HTML中放置CSS的三种方式和CSS选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CPU单核多核区别【转载】
- 下一篇： 前端基础之操作标签—文档处理