css引入及选择器
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網頁數據的表現，可以使網頁的表現與數據內容分離。
?
一 css的四種引入方式
?
1.行內式
??????????行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
?
2.嵌入式
????????? 嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：
???????? <head>
??????? <style type="text/css">
?????????????? ...此處寫CSS樣式
???????</style>
??????</head>
3.導入式
????????? 將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下：
????????? <style type="text/css">
??????????????????? @import"mystyle.css"; 此處要注意.css文件的路徑
?????????</style>
4.鏈接式
? ? ? ? ? ? 也是將一個.css文件引入到HTML文件中 ? ?<link href="mystyle.css" rel="stylesheet" type="text/css"/>
注意：
? ? ? 導入式會在整個網頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之后，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點。
?
?
二 css的選擇器（Selector）
?
“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素
?
?
1 基礎選擇器：
?
* ?： ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??通用元素選擇器，匹配任何元素 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?* { margin:0; padding:0; }
E ?： ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??標簽選擇器，匹配所有使用E標簽的元素p { color:green; }
.info和E.info: ? ? ? ? ? ? ? ? ? ??class選擇器，匹配所有class屬性中包含info的元素 ? ? ? ?.info { background:#ff0; } ? ?p.info { background:blue; }
#info和E#info ? ? ? ? ? ? ? ? ? ?id選擇器，匹配所有id屬性等于footer的元素 ? ? ? ? ? ? ? ?#info { background:#ff0; } ??p#info { background:#ff0; }
?
?
2 組合選擇器
? ? ? ? ? ?E,F ? ? ? ? ? ? ??多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔 ? ? ? ? ? ??Div,p { color:#f00; }
? ? ? ? ? ?E F ? ? ? ? ? ? ??后代元素選擇器，匹配所有屬于E元素后代的F元素，E和F之間用空格分隔 ? ?#nav li { display:inline; } ? ?li a { font-weight:bold; }
? ? ? ? ??E > F ? ? ? ? ? ??子元素選擇器，匹配所有E元素的子元素F ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?div > strong { color:#f00; }
? ? ? ? ? ? ? ? ?E + F ? ? ? ? ? ?毗鄰元素選擇器，匹配所有緊隨E元素之后的同級元素F ? ? ? ? ? ? ? ? ? ? ? ? ? ?p + p { color:#f00; } ? ?
? ? ? ? ?
?注意嵌套規則：
3?屬性選擇器
?
? ? ? ? ? E[att] ? ? ? ? ? ?匹配所有具有att屬性的E元素，不考慮它的值。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（注意：E在此處可以省略，比如“[cheacked]”。以下同。） ? ? ? ? ? ? ? ??p[title] { color:#f00; }
?
? ? ? ? ?E[att=val] ? ??匹配所有att屬性等于“val”的E元素 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??div[class=”error”] { color:#f00; }
?
? ? ? ??E[att~=val] ? ?匹配所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素 ? ? ?td[class~=”name”] { color:#f00; }
?
? ? ? ??E[att|=val] ? ?匹配所有att屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以“val”開頭的E元素，主要用于lang屬性，
? ? ? ? ? ? ? ? ? ? ? ? ? ? 比如“en”、“en-us”、“en-gb”等等 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?p[lang|=en] { color:#f00; }
? ? ? ? E[attr^=val] ? ?匹配屬性值以指定值開頭的每個元素 ? ? ? ? ? ? ? ? ? ? ??div[class^="test"]{background:#ffff00;}
? ? ? ??E[attr$=val] ? ?匹配屬性值以指定值結尾的每個元素 ? ? ? ? ? ? ? ? ? ? ??div[class$="test"]{background:#ffff00;}
? ? ? ? E[attr*=val] ? ?匹配屬性值中包含指定值的每個元素 ? ? ? ? ? ? ? ? ? ? ??div[class*="test"]{background:#ffff00;}
?
? ? ? ??p:before ? ? ? ? 在每個 <p> 元素的內容之前插入內容 ? ? ? ? ? ? ? ? ? ??p:before{content:"hello";color:red}
? ? ? ? p:after ? ? ? ? ? 在每個 <p> 元素的內容之前插入內容 ? ? ? ? ? ? ? ? ? ? ?p:after{ content:"hello"；color:red}
?4 偽類選擇器：
? ? 偽類選擇器： 專用于控制鏈接的顯示效果，偽類選擇器：
a:link（沒有接觸過的鏈接）,用于定義了鏈接的常規狀態。
a:hover（鼠標放在鏈接上的狀態）,用于產生視覺效果。
a:visited（訪問過的鏈接）,用于閱讀文章，能清楚的判斷已經訪問過的鏈接。
a:active（在鏈接上按下鼠標時的狀態）,用于表現鼠標按下時的鏈接狀態。
? ? ?偽類選擇器 : 偽類指的是標簽的不同狀態:
? ? ? ? ? ? a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; }
<style type="text/css">a:link{color: red;}a:visited {color: blue;}a:hover {color: green;}a:active {color: yellow;} </style> </head> <body><a href="01-hello-world.html">hello-world</a> </body> </html> View Code?
轉載于:https://www.cnblogs.com/yesheng654321/p/7242378.html
總結
- 上一篇： 自然语言处理（四）统计机器翻译SMT
- 下一篇： 【bzoj4080】[Wf2014]Se