css基本介紹

時間 2019-12-08

標籤 css 基本介紹欄目 CSS 简体版

原文原文鏈接

目錄css

CSS初識

CSS(Cascading Style Sheets)一般被稱爲CSS樣式表或層疊樣式表（級聯樣式表），主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局等外觀顯示樣式。它就是包含一個或多個規則的文本文件。html

構造規則

樣式表的每一個規則都有兩個部分，即選擇器(selection)和聲明(declaration)。
瀏覽器

注意

選擇器用於指定CSS樣式做用的HTML對象，花括號內是對該對象設置的具體樣式。
屬性和屬性值以「鍵值對」的形式出現。
屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等。
屬性和屬性值之間用英文「:」鏈接。
多個「鍵值對」之間用英文「;」進行區分。

咱們也能夠在樣式規則中用/*註釋內容*/語法來註釋內容。另外，樣式會被該元素的後代繼承，不過瀏覽器在解析代碼時，只會解析離它最近的樣式。佈局

樣式表的定義和使用

行內式（內聯樣式）

基本語法：字體

<label style="樣式屬性:屬性值;樣式屬性:屬性值;···">

內部樣式表

基本語法：url

<head>
<style type="text/CSS">
    選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>

外部樣式表（外鏈式）

基本語法：code

<head>
  <link href="CSS文件的路徑" type="text/CSS" rel="stylesheet" />
</head>

說明：htm

type：定義所連接文檔的類型，在這裏須要指定爲「text/CSS」，表示連接的外部文件爲CSS樣式表
rel：定義當前文檔與被連接文檔之間的關係，在這裏須要指定爲「stylesheet」，表示被連接的文檔是一個樣式表文件
link：該標籤是一個單標籤

或者：對象

<style type="text/css">
    @import url("外部樣式表的文件名稱")
</style>

選擇器

標籤選擇器（元素選擇器）

標籤名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }  或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

類選擇器

.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

不過咱們必須在標籤裏面以下定義：blog

<label class="類名"></label>

id選擇器

#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}

不過咱們也要在標籤裏面以下定義：

<label id="id名"></label>

通配符選擇器

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}

通配符選擇器用「*」號表示，它是全部選擇器中做用範圍最廣的，能匹配頁面中全部的元素。

僞類選擇器

僞類選擇器用於向某些選擇器添加特殊的效果。好比給連接添加特殊效果，好比能夠選擇第1個，第n個元素。

連接僞類選擇器

:link：未訪問的連接
:visited：已訪問的連接
:hover：鼠標移動的連接上
:active：選定的連接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    a:hover{
        color: red;
    }
</style>
<body>
<a href="http://www.baudu.com/">百度</a>
</body>
</html>

結構（位置）僞類選擇器

:first-child:選取屬於其父元素的首個子元素的指定選擇器
:last-child:選取屬於其父元素的最後一個子元素的指定選擇器
:nth-child(n)：匹配屬於其父元素的第 N 個子元素，不論元素的類型
:nth-last-child(n)：選擇器匹配屬於其元素的第 N 個子元素的每一個元素，不論元素的類型，從最後一個子元素開始計數

目標僞類選擇器

:target目標僞類選擇器 :選擇器可用於選取當前活動的目標元素

複合選擇器

交集選擇器

咱們直接把須要交集的選擇器連在一塊兒，如：

<style>
    p.class#id{
        ...
    }
</style>

並集選擇器

在選擇器的中間加上逗號：

<style>
    p,.class,#id{
        ...
    }
</style>

後代選擇器

後代選擇器又稱爲包含選擇器，用來選擇元素或元素組的後代，其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。

<style>
    p .class #id{
        ...
    }
</style>

子元素選擇器

子元素選擇器只能選擇做爲某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 >進行鏈接，注意，符號左右兩側各保留一個空格。

<style>
    .demo > h3 {color: red;}
</style>

屬性選擇器

選取標籤帶有某些特殊屬性的選擇器咱們成爲屬性選擇器

/* 獲取到 擁有 該屬性的元素 */
div[class^=font] { /*  class^=font 表示 font 開始位置就好了 */
            color: pink;
        }
div[class$=footer] { /*  class$=footer 表示 footer 結束位置就好了 */
            color: skyblue;
        }
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置均可以 */
            color: green;
        }

僞元素選擇器

E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）
E::first-line文本第一行；
E::selection可改變選中文本的樣式；
E::before和E::after：在E元素內部的開始位置和結束位建立一個元素，該元素爲行內元素，且必需要結合content屬性使用；

標籤選擇模式

塊級元素(block-level)

每一個塊元素一般都會獨自佔據一整行或多整行，能夠對其設置寬度、高度、對齊等屬性，經常使用於網頁佈局和網頁結構的搭建。
特色：

獨佔一行
高度，行高、外邊距以及內邊距均可以控制
寬度默認是容器的100%
能夠容納內聯元素和其餘塊元素

行內元素(inline-level)

行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，通常不能夠設置寬度、高度、對齊等屬性，經常使用於控制頁面中文本的樣式。
特色：

和其餘行內元素會在一行
高、寬無效，但水平方向的padding和margin能夠設置，垂直方向的無效
默認寬度就是它自己內容的寬度
行內元素只能容納文本或則其餘行內元素。（a特殊）

行內塊元素（inline-block）

在行內元素中有幾個特殊的標籤如<img>、<input>、<td>，能夠對它們設置寬高和對齊屬性，咱們稱它們爲行內塊元素。
特色：

和相鄰行內元素（行內塊）在一行上,可是之間會有空白縫隙
默認寬度就是它自己內容的寬度
高度，行高、外邊距以及內邊距均可以控制

標籤顯示模式轉換`display`

display:inline：塊轉行內
display:block：行內轉塊
display: inline-block：塊、行內元素轉換爲行內塊

CSS三大特性

層疊性

這是瀏覽器處理衝突的一個能力,若是一個屬性經過兩個選擇器設置到同一個元素上，那麼這個時候一個屬性就會將另外一個屬性層疊掉。通常狀況下，若是出現樣式衝突，則會按照CSS書寫的順序，以最後的樣式爲準。

繼承性

所謂繼承性是指書寫CSS樣式表時，子標籤會繼承父標籤的某些樣式，如文本顏色和字號。想要設置一個可繼承的屬性，只需將它應用於父元素便可。

優先性

定義CSS樣式時，常常出現兩個或更多規則應用在同一元素上，這時就會出現優先級的問題：
繼承樣式的權重爲0。即在嵌套結構中，無論父元素樣式的權重多大，被子元素繼承時，他的權重都爲0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。
行內樣式優先。應用style屬性的元素，其行內樣式的權重很是高，能夠理解爲遠大於100。總之，他擁有比上面提升的選擇器都大的優先級。
權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具備最大的優先級，或者說排在最後的樣式優先級最大。
CSS定義了一個!important命令，該命令被賦予最大的優先級。也就是說無論權重如何以及樣式位置的遠近，!important都具備最大優先級。

特殊性(Specificity)

關於CSS權重，咱們須要一套計算公式來去計算，這個就是 CSS Specificity，咱們稱爲CSS 特性或稱非凡性，它是一個衡量CSS值優先級的一個標準具體規範入以下：
specificity用一個四位的數字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大於一級，數位之間沒有進制，級別之間不可超越。
且數位之間沒有進制好比說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，因此不會存在10個div能遇上一個類選擇器的狀況。

繼承或者* 的貢獻值	0,0,0,0
每一個元素（標籤）貢獻值爲	0,0,0,1
每一個類，僞類貢獻值爲	0,0,1,0
每一個ID貢獻值爲	0,1,0,0
每一個行內樣式貢獻值	1,0,0,0
每一個!important貢獻值	∞ 無窮大