柚子快報激活碼778899分享：前端 CSS-語法、選擇器

http://yzkb.51969.com/

?詳見 W3scholl，本篇只做快速思維索引。

概述

CSS 是一種描述 HTML 文檔樣式的語言。

有三種插入樣式表的方法：

外部 CSS內(nèi)部 CSS行內(nèi) CSS

? 外部 CSS 外部樣式表存儲在.css文件中。HTML 頁面必須在 head 部分的元素內(nèi)包含對外部樣式表文件的引用。通過使用外部樣式表文件，您只需更改一個文件即可更改整個網(wǎng)站的外觀！ HTML:

This is a heading

This is a paragraph.

mystyle.css:

body {

background-color: lightblue;

}

h1 {

color: navy;

margin-left: 20px;

}

? 內(nèi)部 CSS 內(nèi)部樣式是在 head 部分的

This is a heading

This is a paragraph.

? 行內(nèi) CSS 行內(nèi)樣式（也稱內(nèi)聯(lián)樣式）可用于為單個元素應用唯一的樣式。

This is a heading

This is a paragraph.

??注：如果在不同樣式表中為同一選擇器（元素）定義了一些屬性，優(yōu)先級為：行內(nèi)樣式 > 外部和內(nèi)部樣式表（取決于在 head 中聲明的位置）

CSS 語法

CSS 規(guī)則集（rule-set）由選擇器和聲明塊組成：

選擇器：指向您需要設置樣式的 HTML 元素。聲明塊：每條聲明都包含一個 CSS 屬性名稱和一個值，以冒號 : 分隔。多條 CSS 聲明用分號 ; 分隔，聲明塊用花括號 {} 括起來。

p {

color: red;

text-align: center;

}

p 是 CSS 中的選擇器（它指向要設置樣式的 HTML 元素：

）。color 是屬性名，red 是屬性值。text-align 是屬性名，center 是屬性值。

CSS 選擇器

CSS 選擇器分為五類：

簡單選擇器（根據(jù)名稱、id、類來選取元素）組合器選擇器（根據(jù)它們之間的特定關系來選取元素）偽類選擇器（根據(jù)特定狀態(tài)選取元素）偽元素選擇器（選取元素的一部分并設置其樣式）屬性選擇器（根據(jù)屬性或?qū)傩灾祦磉x取元素）

實例內(nèi)容詳見 ? CSS 選擇器

簡單選擇器

分為元素選擇器、id 選擇器、類選擇器、通用選擇器、分組選擇器

CSS 元素選擇器

p {

text-align: center;

color: red;

}

頁面上的所有

元素都將居中對齊，并帶有紅色文本顏色。

CSS id 選擇器

元素的 id 在頁面中是唯一的，因此 id 選擇器用于選擇唯一的元素。

Hello World!

本段不受樣式的影響。

頁面上的 id="para1" 的

元素將居中對齊，并帶有紅色文本顏色。

CSS 類選擇器

? 類選擇器選擇有特定 class 屬性的 HTML 元素。. 后面跟類名。

居中的紅色標題

居中的紅色段落。

所有帶有 class="center" 的 HTML 元素將為紅色且居中對齊

? 還可以指定只有特定的 HTML 元素會受類的影響。

p.center {

text-align: center;

color: red;

}

只有具有 class="center" 的

元素會居中對齊

? HTML 元素也可以引用多個類。

這個段落引用兩個類。

元素將根據(jù) class="center" 和 class="large" 進行樣式設置

CSS 通用選擇器

通用選擇器 * 選擇頁面上的所有的 HTML 元素。

* {

text-align: center;

color: blue;

}

上面的 CSS 規(guī)則會影響頁面上的每個 HTML 元素

CSS 分組選擇器

對選擇器進行分組，以最大程度地縮減代碼。如需對選擇器進行分組，請用逗號來分隔每個選擇器。

h1, h2, p {

text-align: center;

color: red;

}

組合選擇器

組合器是解釋選擇器之間關系的某種機制。分為：

后代選擇器 (空格)子選擇器 (>)相鄰兄弟選擇器 (+)通用兄弟選擇器 (~)

后代選擇器

后代選擇器匹配屬于指定元素后代的所有元素。

div p {

background-color: yellow;

}

選擇

元素內(nèi)的所有

元素

子選擇器

子選擇器匹配屬于指定元素子元素的所有元素。

div > p {

background-color: yellow;

}

選擇屬于

元素子元素的所有

元素

??注：子選擇器和后代選擇器區(qū)別在于，子選擇器匹配指定元素的子元素，而后代選擇器匹配指定元素的所有元素（包括子、孫、重孫…）

div 中的段落 1。

div 中的段落 2。

div 中的段落 3。

如果是后代選擇器，div 中的段落 3。會黃底，但子選擇器不會黃底。

相鄰兄弟選擇器

相鄰兄弟選擇器匹配所有作為指定元素的相鄰同級的元素。兄弟（同級）元素必須具有相同的父元素，而且只作用其后一個元素。

div + p {

background-color: yellow;

}

通用兄弟選擇器

通用兄弟選擇器匹配屬于指定元素的同級元素的所有元素。

div ~ p {

background-color: yellow;

}

偽類選擇器

偽類用于定義元素的特殊狀態(tài)。用于設置鼠標懸停在元素上時的樣式、設置元素獲得焦點時的樣式

/* 未訪問的鏈接 */

a:link {

color: #FF0000;

}

/* 已訪問的鏈接 */

:visited {

color: #00FF00;

}

/* 鼠標懸停鏈接 */

a:hover {

color: #FF00FF;

}

/* 已選擇的鏈接 */

a:active {

color: #0000FF;

}

設置鏈接 不同狀態(tài)下的樣式

div:hover {

background-color: blue;

}

在

元素上使用 :hover 偽類的實例

偽元素選擇器

CSS 偽元素用于設置元素指定部分的樣式。

p::first-letter {

color: #ff0000;

font-size: xx-large;

}

::first-letter 偽元素用于向文本的首字母添加特殊樣式。例子設置所有

元素中文本的首字母格式。

屬性選擇器

用于設置帶有 特定屬性 或 屬性值 的 HTML 元素的樣式。

a[target] {

background-color: yellow;

}

選擇所有帶有 target 屬性的 元素

a[target="_blank"] {

background-color: yellow;

}

選取所有帶有 target="_blank" 屬性的 元素

input[type="text"] {

width: 150px;

display: block;

margin-bottom: 10px;

background-color: yellow;

}

input[type="button"] {

width: 120px;

margin-left: 35px;

display: block;

}

設置表單不同 type 元素的樣式

柚子快報激活碼778899分享：前端 CSS-語法、選擇器

http://yzkb.51969.com/

相關鏈接

評論可見，查看隱藏內(nèi)容

本文內(nèi)容根據(jù)網(wǎng)絡資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。

轉(zhuǎn)載請注明，如有侵權，聯(lián)系刪除。

本文鏈接：http://gantiao.com.cn/post/18829133.html

Unit808創(chuàng)新商城

發(fā)布評論

取消回復

•