1.0 CSS基礎之引用、選擇器、繼承與層疊、優先級

時間 2019-11-21

標籤 1.0 css 基礎引用選擇器繼承層疊優先級欄目 CSS 简体版

原文原文鏈接

什麼是CSS

進行外觀控制並定義HTML內容在瀏覽器內的顯示樣式css

CSS的優勢

簡化HTML相關標籤，網頁體積小，下載快
解決內容與表現分離的問題
更好維護網頁，提升工做效率

1.1 CSS基本語法

由選擇器和聲明兩部分組成瀏覽器

聲明放置在一對緊鄰選擇器的大括號 {} 內，聲明之間用 ; 隔開

CSS引用

語法：寫在 <head> </head> 標籤內：(嵌入樣式)bash

<style type="text/css">
    CSS樣式
</style>
複製代碼

切記一切標點符號都要用英文輸入
在CSS引用中，註釋不使用,而是/*註釋內容*/，與C語言相似。app

舉個栗子：
ide

效果以下

若是多個標籤須要進行一樣的一步或多步設置，能夠將這些標籤歸在一個CSS樣式前設置字體

<style type="text/css">
    p,a{font-size:30px;font-family:"幼圓"}
    a{color:green}
    p{color:red}
</style>
複製代碼

效果以下ui

一樣進行了字號和字體設置，可是分開進行顏色設置，這樣就能夠快捷地對同類標籤進行設置url

1.2 CSS使用方法

CSS樣式的應用場合和如何使用？spa

行內樣式（內嵌樣式）

在前標籤內添加style樣式語法：3d

<p style="color:red;font-size;">內容</p>

不建議大量使用，適合小範圍設置

內部樣式表（嵌入樣式）

跟最開始的例子同樣點擊查看

可是，爲了防止低版本瀏覽器不識別<style>標籤，致使標籤內代碼不慎出如今網頁中，咱們用HTML的註釋標籤來包住<style>裏面的內容

操做以下：

外部樣式表

把CSS樣式代碼寫在獨立的一個文件中

擴展名：文件名xxx.css

在css文件中直接書寫樣式設置便可

語法：

<link href="xxx.css" rel="stylesheet" type="text/css"/>
複製代碼

一樣須要放入<head>...</head>標籤內

導入式

語法：寫在<style type="text/css">...</style>標籤內第一行

@import "xxx.css"
@import url(xxx.css);

<head>
    <style type="text/css">
        @import "xxx.css"
    </style>
</head>
複製代碼

或者

<head>
    <style type="text/css">
        @import url(xxx.css);
    </style>
</head>
複製代碼

CSS使用方法的區別

使用外部樣式的好處

CSS和HTML分離
多個文件可使用同一個樣式文件
多文件引用同一個CSS文件，CSS只需下載一次

CSS使用方法優先級

對於同一個元素，同時使用方法設置CSS樣式，起做用的前後順序

行內樣式>（內部樣式/外部樣式）>導入式樣式
內部樣式和外部樣式之間，外部樣式之間，就近原則

1.3 CSS選擇器

選擇器分類：

標籤選擇器
類選擇器
ID選擇器
全局選擇器
羣組選擇器
後代選擇器

標籤選擇器

以HTML標籤做爲選擇器

直接對標籤名進行設置，可是隻適用大面積設置

類選擇器

區分大小寫

爲HTML的開始標籤添加class屬性

2. 經過類選擇器爲有class屬性的元素設置CSS樣式

切記，必定要在class名前加「 . 」

在一類元素下進行不一樣的設置

把p和h1都分在類選擇器special標籤下

效果以下

同一個標籤下能夠設置多個類選擇器

在class標籤內寫入另外一個類選擇器，並用空格分隔開，不能寫另外一個class！

ID選擇器

與類選擇器相似

區分大小寫

給標籤id值
爲id設置CSS值

效果以下：

羣組選擇器

把相一樣式設置的標籤歸爲一類進行設置

全局選擇器

對全部標籤進行統同樣式設置

謹慎使用

後代選擇器

先看一看標籤之間的輩分吧：

<em>標籤是<p>標籤的子標籤

先父標籤<p>再子標籤<em>
<p>內的<em>

若只想改變159的顏色

給159命名一個類選擇器

在父標籤和子標籤中間加上.類選擇器

僞類

僞類選擇器定義特殊狀態下的樣式
沒法用標籤、id、class及其餘屬性實現

連接的四種狀態：激活狀態、已訪問狀態、未訪問狀態、鼠標懸停狀態

僞類	說明
:link	未訪問的連接
:visited	已訪問的連接
:hover	鼠標懸停狀態
:active	激活的連接

舉個栗子：

這是對標籤的設置

可使鼠標單擊標籤內字體產生各類效果

注意兼容問題

IE6及更早的版本，支持<a>元素的4種狀態
IE6瀏覽器不支持其餘元素的：hover和active

連接僞類的順序

:link>:visited>:hover>:active

記憶方法：LVHA

說明

1. a:hover（懸停）必須放置在a:link（未訪問）和a:visited（已訪問）以後才生效

2. a:active（激活）必須放置在a:hover（懸停）以後才生效

3. 僞類名稱對大小寫不敏感

爲不一樣的連接設置不一樣的LVHA

使用class進行類選擇器操做：

1.4 CSS繼承和層疊

CSS繼承

從父元素繼承部分CSS屬性

這裏雖然沒有對<p>標籤和<em>標籤進行設置，可是因爲

對<div>進行了樣式設置，這兩個標籤繼承了父元素的屬性也改變了字體大小

繼承優勢：

父元素設置樣式，子元素能夠繼承部分屬性（例如"border"屬性不能夠繼承）
減小CSS代碼

繼承的優先級較低，有時不能改變原有默認樣式，會忽略繼承樣式

CSS層疊

能夠定義多個樣式
不衝突時，多個樣式可層疊爲一個
衝突時，按不一樣樣式規則優先級來應用樣式

CSS選擇器優先級

嘗試：

如今對第二個<div>標籤使用ID選擇器（green）和標籤選擇器（red）

可是結果

說明： id選擇器優先於標籤選擇器

同理：

對第三個<div>標籤使用class選擇器（blue）和標籤選擇器（red）

結果是

說明： class選擇器優先於標籤選擇器

再同個理：

同時使用class選擇器和ID選擇器結果是

說明： ID選擇器優先class選擇器

當一個class標籤內有兩個標籤時候

以就近原則爲準，因此字體是橙色

因此三者的優先級爲：id > class > 標籤選擇

I>C>選

CSS優先級規則

同一個樣式表（同一個style）中：

權值相同

就近原則（距離被設置元素越近優先級越高）
權值不一樣

根據權值來判斷CSS樣式，哪一種CSS樣式權值高，就用哪一種樣式

權值

舉個栗子：

這時經過子代選擇器和標籤選擇器的權值對比決定使用子代選擇器

舉個更復雜的栗子：

通過一波權值計算，最後應該顯示灰色

！important規則

可調整樣式規則的優先級
添加在樣式規則以後，中間用空格隔開

語法： div{color:red !important;}

使標註的優先級最高

1.5 優先級總結

1.6 CSS樣式命名

命名規範

採用英文字母、數字、以及「_」和「-」命名
以小寫字母開頭，不能以數字和「-」、「_」開頭
命名形式：單字，連字符，下劃線和駝峯

/*一個單詞，所有小寫*/
.special{...}
/*多個單詞，駝峯寫法，除了第一個單詞，其餘首字母大寫*/
.mainTitle{...}
/*使用-和_鏈接符*/
.main_title
.main-title
複製代碼

使用有意義的命名

經常使用的CSS樣式命名

1 頁面結構

頁頭：header
頁面主體：main
頁尾：footer
內容：content/container
容器：container
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制：wrapper
左右中：left right center

2 導航

導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題：title
摘要：summary

3 功能

標誌：logo
廣告：banner
登錄：login
登錄條：loginbar
註冊：register
搜索：search
功能區：shop
標題：title

注意：

id不要濫用，謹慎使用

適當使用class

js須要用id來進行操做

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。