CSS概念，引入，选择器
概念
層疊樣式表,定義如何顯示HTML元素.
使用方式
行內樣式
不推薦使用此方式
結構 和 樣式的 雜糅會影響后期的維護
<p style="color: red">Hello world.</p>內嵌樣式表?
將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中
<head><meta charset="UTF-8"><title>Title</title><style>p {background-color: #2b99ff;}</style> </head>外部樣式表?
推薦使用此方式. link 標簽寫在 head 標簽內
<link href="mystyle.css" rel="stylesheet" type="text/css"/>href ?外部 CSS 文件的路徑
rel ? ?固定為 stylesheet
type 固定為 text/css
import 導入式
導入式會在整個網頁裝載完后再裝載CSS文件
因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之后，再出現網頁的樣式。
使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果。
CSS 選擇器
基本選擇器
- 標簽名?
- #id
- .類名
- *
組合選擇器
后代選擇器
/*li內部的a標簽設置字體顏色*/ li a { color: green; }兒子選擇器
/*選擇所有父級是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; }毗鄰選擇器
/*選擇所有緊接著<div>元素之后的<p>元素*/ div+p { margin: 5px; }弟弟選擇器
/*i1后面所有的兄弟p標簽*/ #i1~p { border: 2px solid royalblue; }屬性選擇器
/*用于選取帶有指定屬性的元素。*/ p[title] { color: red; }/*用于選取帶有指定屬性和值的元素。*/ p[title="213"] { color: green; }不怎么常用的屬性選擇器: /*找到所有title屬性以hello開頭的元素*/ [title^="hello"] { color: red; }/*找到所有title屬性以hello結尾的元素*/ [title$="hello"] { color: yellow; }/*找到所有title屬性中包含（字符串包含）hello的元素*/ [title*="hello"] { color: red; }/*找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素：*/ [title~="hello"] { color: green; }
分組
當多個元素的樣式相同的時候，我們沒有必要重復地為每個元素都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。
div標簽和p標簽統一設置字體為紅色。
div, p { color: red; }分兩行來寫更清晰一些
div, p { color: red; }嵌套
多種選擇器可以混合起來使用
.c1類內部所有p標簽設置字體顏色為紅色。
.c1 p {color: red; }
偽類選擇器
/* 未訪問的鏈接 */ a:link { color: #FF0000 }/* 已訪問的鏈接 */ a:visited { color: #00FF00 }
/* 鼠標移動到鏈接上 */ a:hover { color: #FF00FF }
/* 選定的鏈接 */ a:active { color: #0000FF }
/*input輸入框獲取焦點時樣式*/ input:focus { outline: none; background-color: #eee; }
偽元素選擇器
first-letter
/*在每個<p>元素內容首字母添加樣式*/ p:first-letter {font-size: 48px;color: red;}before
/*在每個<p>元素之前插入內容*/ p:before { content:"*"; color:red; }after
/*在每個<p>元素之后插入內容*/ p:after { content:"[?]"; color:blue; }ps:
before 和 after 多用于清除浮動
選擇器的優先級
CSS繼承
CSS的繼承機制得以讓樣式可以給予標簽和其后代
選擇器的優先級權重
? ? ? ?內聯樣式 1000
id選擇器 100
類選擇器 10?
元素選擇器 1
ps:
但是某些屬性是無法繼承的比如: border,? margin,? padding,? background等
權重計算永不進位
群組選擇器中 ,? 各個選擇器由自身的權重決定 , 互相之間是獨立的
后代 / 子代 / 偽類 選擇器優先級計算按照 各組成部分相加得到??
特殊方式
除此之外還可以通過添加 !important 方式來強制讓樣式生效，但并不推薦使用。
過多的使用!important 會使樣式文件混亂不易維護。
萬不得已再用 !important 吧
?
轉載于:https://www.cnblogs.com/shijieli/p/10012181.html
總結
以上是生活随笔為你收集整理的CSS概念，引入，选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Nginx正则表达式之匹配操作符详解
- 下一篇： windows环境下安装scrapy框架