前端之 CSS選擇器、樣式

CSS介紹

什麼是 CSS

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML或 XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

CSS的使用

語法結構：

選擇器 { 屬性 : 屬性值 ; 屬性 : 屬性值 ; 屬性 : 屬性值 ; }

三種引入方式：

行間式

<div style="width: 100px; height: 100px; background-color: red">CSS的第一種裝飾方式</div>

內聯式

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div>CSS的第二種裝飾方式</div>
</body>

外聯式

file: my.css
div {
	width: 100px;
    height: 100px;
    background-color: red;
}

file: my.html
<head>
    <link rel="stylesheet" type="text/css" href="my.css" />
</head>
<body>
<div> CSS的第三種裝飾方式</div>
</body>

注意頁面css樣式通常都應該寫在單獨的css文件中

選擇器

基本選擇器

標籤選擇器

匹配文檔中所有與標籤名匹配的標籤：如div{}會匹配文檔中全部div，span{}會匹配文檔中所有span

div {
    background-color: yellow;
}

類選擇器

匹配文檔中所有擁有class屬性且屬性值爲red的標籤：如<sup class=“red”></sup> <sub class=“red”></sub>均會被匹配

.red {
    color: red;
}

注意：
樣式類名不要用數字開頭（有的瀏覽器不認）。
標籤中的class屬性如果有多個，要用空格分隔。

id選擇器

匹配文檔中所有擁有id屬性且屬性值爲div的標籤：如<div id=“div”></div> <section id=“div”></section>均會被匹配，id選擇器必須保證單文檔的唯一性

#div {
    text-align: center;
}

通配選擇器

匹配文檔中所有標籤：通常指html、body及body中所有顯示類的標籤

* {
    border: solid;
}

基礎選擇器優先級

基礎選擇器優先級大致與選擇器匹配範圍成反比，匹配範圍越小，優先級越高
基礎選擇器優先級大致與選擇器匹配精度成正比，匹配精度越高，優先級越高
基礎選擇器優先級：id選擇器 > 類選擇器 > 標籤選擇器 > 通配選擇器

組合選擇器

羣組(分組和嵌套)選擇器

分組，不同的選擇器可以共用一個樣式
div, p, span{
    color: red;
}
嵌套，後代選擇器與標籤組合使用
div  p,span{
    color: red;
}

分組一次性控制多個選擇器，嵌套一次性控制被嵌套的多個選擇器
選擇器之間以,隔開，每一個選擇器位均可以爲任意合法選擇器或選擇器組合

子代(後代)選擇器

子代選擇器用>連接
div > span {
    color: red;
}
後代選擇器用空格連接
.sup .sub {
    color: red;
}

一次性控制一個選擇器(邏輯最後的那個選擇器)，前置位的選擇器爲修飾性選擇器
每一個選擇器位均可以爲任意合法選擇器或選擇器組合
子代選擇器必須爲一級父子嵌套關係，後代選擇器可以爲一級及多級父子嵌套關係

相鄰(兄弟)選擇器

相鄰選擇器用+連接 對下不對上
.d1 + .d2 {
    color: red;
}
兄弟選擇器用~連接 對下不對上
.d1 ~ .d3 {
    color: red;
}

一次性控制一個選擇器(邏輯最後的那個選擇器)，前置位的選擇器爲修飾性選擇器
每一個選擇器位均可以爲任意合法選擇器或選擇器組合
相鄰選擇器必須爲直接相鄰關係，兄弟選擇器可以爲直接相鄰或間接相鄰關係

組合選擇器優先級

組合選擇器優先級與權值相關，權值爲權重和
權重對應關係

選擇器	權重
通配	1
標籤	10
類、屬性	100
id	1000
!important	10000

選擇器權值比較，只關心權重和，不更新選擇器位置
不同級別的選擇器間不具備可比性：1個類選擇器優先級高於n個標籤選擇器的任意組合

屬性選擇器

選擇器	功能描述
[ attr ]	匹配擁有attr屬性的標籤
[ attr = val ]	匹配擁有attr屬性，屬性值爲val的標籤
[ attr ~= val ]	匹配擁有attr屬性，屬性值中包含指定詞彙的標籤。
[ attr \|= val ]	匹配擁有attr屬性，屬性值帶有以指定值開頭的屬性值的標籤，該值必須是整個單詞。
[ attr ^= val ]	匹配擁有attr屬性，屬性值以val開頭的標籤
[ attr $= val ]	匹配擁有attr屬性，屬性值以val結尾的標籤
[ attr *= val ]	匹配擁有attr屬性，屬性值包含val的標籤

<head>
    <style>
		只要有xxx屬性名的標籤都找到
        [xxx] {
            color: red;
        }
        只要標籤有屬性名爲xxx並且值爲
        [xxx='1'] {
            color: blue;
        }
        規定p標籤內部必須有屬性名爲xxx並且值爲2的標籤
        p[xxx='2'] {
          color: green;
        }
    </style>
</head>
<body>
<p xxx>我只有屬性名</p>
<p xxx="1">我有屬性名和屬性值並且值爲1</p>
<p xxx="2">我有屬性名和屬性值並且值爲2</p>
</body>

僞類選擇器

選擇器	類型	功能描述
a:link	鏈接僞類選擇器	選擇匹配的a元素，而且匹配元素被定義了超鏈接並未被訪問過。常用於鏈接描點上
a:hover	用戶行爲選擇器	選擇匹配的a元素，且用戶鼠標停留在元素a上。
a:active	用戶行爲選擇器	選擇匹配的a元素，且匹配元素被激活。常用於鏈接描點和按鈕上
a:visited	鏈接僞類選擇器	選擇匹配的a元素，而且匹配元素被定義了超鏈接並已被訪問過。常用於鏈接描點上
a:focus	用戶行爲選擇器	選擇匹配的a元素，而且匹配元素獲取焦點

<head>
    <style>
        未訪問的鏈接
        a:link {
            color: red;
        }
        鼠標移動到鏈接上
        a:hover {
            color: yellow;
        }
        選定的連接
        a:active {
            color: black;
        }
        已訪問的鏈接
        a:visited {
            color: green;
        }
        input輸入框獲取焦點時樣式
        input:focus {
            background-color: red;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="http://www.xiaohuar.com">笑話網</a>
<a href="http://www.sogo.com">sogo網</a>
<input type="text">
</body>

僞元素選擇器

first-letter

常用的給首字母設置特殊樣式
p:first-letter {
  font-size: 48px;
  color: red;
}

before

在每個<p>元素之前插入內容
p:before {
  content:"*";
  color:red;
}

after

在每個<p>元素之後插入內容
p:after {
  content:"[?]";
  color:blue;
}

選擇器優先級

相同選擇器，不同的引入方式：就進原則，誰越靠近標籤誰說了算
不同選擇器，相同的引入方式：行內樣式 > id選擇器> 類選擇器 > 標籤選擇器

標籤樣式

基本樣式

<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

長度

px：像素(pixel)，屏幕上顯示的最小單位，用於網頁設計，直觀方便
mm：毫米
cm：釐米
in：英寸
pt：點(point)，一個標準的長度單位，1pt＝1/72in，用於印刷業，非常簡單易用；
em：相當長度，通常1em=16px，應用於流式佈局

顏色

red；直接寫英文單詞
rgb()：三個值可爲[0-255]數值或百分比，以,相隔（r:Red g:Green b:Blue）
rgba()：前三個值可爲像素或是百分比，最後一個透明度爲[0, 1]數值，以,相隔（r:Red g:Green b:Blue a:Alpha）
hsl()：第一個值爲[0,360]數值，後二個值可爲百分比，以,相隔（h:Hue s:Saturation l:Lightness）
hsla()：第一個值爲[0,360]數值，中間二個值可爲百分比，最後一個爲[0, 1]數值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
#AABBCC：六個十六進制位，每兩位一整體，分別代表Red、Green、Blue，可以簡寫#abc

常用樣式

字體樣式

font-family：字體族科，多值用於備用，以,隔開

font-family: "STSong", "Arial";

font-size：字體大小
font-style：字體風格 normal、italic、oblique
font-weight：字體重量 normal、bold、lighter、100~900
line-height：行高
font：字重風格大小/行高字族

文本樣式

color：文本顏色
text-align：橫向排列

left 居左 、center 居中 、right 居右、justify 兩端對齊

vertical-align：縱向排列

baseline：將支持valign特性的對象的內容與基線對齊 
sub：垂直對齊文本的下標 
super：垂直對齊文本的上標 
top：將支持valign特性的對象的內容與對象頂端對齊 
text-top：將支持valign特性的對象的文本與對象頂端對齊 
middle：將支持valign特性的對象的內容與對象中部對齊 
bottom：將支持valign特性的對象的文本與對象底端對齊 
text-bottom：將支持valign特性的對象的文本與對象底端對齊

text-indent：字體縮減

p{
    text-indent: 48px;
}

text-decoration：字劃線

underline：下劃線、overline：上劃線、line-through：中劃線、none：沒有劃線、inherit：承父元素的text-decoration屬性的值

letter-spacing：字間距
word-spacing：詞間距
word-break：自動換行

normal：默認換行規則
break-all：允許在單詞內換行

背景樣式

background-color：顏色

background-color: green;

background-image：圖片，通過 opacity：(0-1) 來控制透明度

background-image: url("bg.png");

background-repeat：重複

background-repeat: no-repeat;
repeat(重複)、 no-repeat(不重複) 、repeat-x(X軸重複) 、repeat-y(Y軸重複)

background-position：定位

background-position: center;
top、bottom、left、right 、center

background-attachment：滾動模式

scroll、fixed

可以寫到一起：

background: no-repeat center url("bg.png") blue ;

邊框

border-width：邊框寬度

border-width: 3px;

border-style：邊框類型

none: 默認無邊框、dotted: 點線框、dashed: 虛線框、solid: 實線邊界、double: 兩個邊界、groove: 3D溝槽邊界、ridge: 3D脊邊界

border-color：邊框顏色

border-color:
transparent：透明

單獨爲某一個邊框設置樣式

{
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-style：上右下左；對不同的邊框進行設置

屬性可以有1-4個值
border-style:dotted solid double dashed;