CSS 入門簡(jiǎn)介

EscapedDog 發(fā)布于2019-08-30 15:55 / 3083人閱讀

摘要：一簡(jiǎn)介及引用概述漢譯為層疊樣式表，是用于控制網(wǎng)頁樣式。二基礎(chǔ)語法語法規(guī)則由兩個(gè)主要的部分構(gòu)成選擇器，以及一條或多條聲明。也就是說，和不沖突。這意味著兩者都將遵守選擇器中的規(guī)則。選擇獲得焦點(diǎn)的元素。

一、CSS簡(jiǎn)介及引用 1、CSS 概述

CSS漢譯為層疊樣式表，是用于控制網(wǎng)頁樣式。

2、如何使用樣式

當(dāng)瀏覽器讀到一個(gè)樣式表，它就會(huì)按照這個(gè)樣式表來對(duì)文檔進(jìn)行格式化。有以下三種方式來插入樣式表：

1.外部樣式表

內(nèi)部樣式表

內(nèi)聯(lián)樣式

This is a paragraph

3、css樣式表的優(yōu)先級(jí)

內(nèi)聯(lián)樣式表的優(yōu)先級(jí)別最高
內(nèi)部樣式表與外部樣式表的優(yōu)先級(jí)和書寫的順序有關(guān)，后書寫的優(yōu)先級(jí)別高。

二、CSS 基礎(chǔ)語法 1、CSS 語法

h1 {color:red; font-size:14px;}

CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
選擇器：通常是需要改變樣式的 HTML 元素。
聲明：使用花括號(hào)來包圍聲明。

提示：如果要定義不止一個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分開。
p {text-align:center; color:red;}

2、記得寫引號(hào)

提示：如果值為若干單詞，則要給值加引號(hào)：
p {font-family: "sans serif";}

三、css選擇器 1、標(biāo)簽選擇器（h1）

h1 {color:red; font-size:14px;}

2、通配符選擇器（*）

語法：*{屬性：屬性值;} , 含義就是所有元素；表示該樣式適用所有網(wǎng)頁元素

*{margin:0;color:#ff0;}

3、群組選擇器（h1,h2,h3）

    h1,h2,h3,h4,h5,h6 {
      color: green;
    }

4、派生選擇器:

依據(jù)元素在其位置的上下文關(guān)系來定義樣式:

后代選擇器（空格）

li strong {
   color:red;
}

子元素選擇器（>）

span > strong {color:blue;}

相鄰兄弟選擇器（+）

如果需要選擇緊接在另一個(gè)元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。
例如，如果要增加緊接在 h1 元素后出現(xiàn)的段落的上邊距，可以這樣寫：
div h6 + p {margin-top:50px;}


    This is a heading.
    This is paragraph.
    This is paragraph.
    This is paragraph.
    This is paragraph.
    This is paragraph.

id選擇器（#）

為標(biāo)有特定 id 的 HTML 元素指定特定的樣式 , id屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次.例如：身份證號(hào)碼。
#redColor{background-color: red;}
#greenColor{background-color: green;}

我有一個(gè)id，為redColor
我有一個(gè)id，為greenColor

命名規(guī)范：

1）只允許出現(xiàn)字母（大小寫均可，嚴(yán)格區(qū)分） 、下劃線、數(shù)字。也就是說，id=”laoHe”和 id=”laohe”不沖突。
2) 只允許以字母開頭。
3) 命名沒有長(zhǎng)度限制，可以是 1 個(gè)字母，也可以是很多個(gè)。不過不建議太長(zhǎng)。
4) 不允許出現(xiàn)標(biāo)簽名（不是硬性規(guī)定，是有工作經(jīng)驗(yàn)的表現(xiàn)）
6、類選擇器（ . ）
類選擇器以一個(gè)點(diǎn)號(hào)顯示：
.goCenter{
    text-align: center;
    background-color: gray;
}
div, p, h2, 元素都有 goCenter 類。這意味著兩者都將遵守 ".goCenter " 選擇器中的規(guī)則。
我和兄弟有一個(gè)共同的class，為goCenter
我和兄弟有一個(gè)共同的class，為goCenter
我和兄弟有一個(gè)共同的class，為goCenter
注意：類名的第一個(gè)字符不能使用數(shù)字！

偽類選擇器（ : ）

CSS 偽類用于向某些選擇器添加特殊的效果。偽類，狀態(tài)是動(dòng)態(tài)變化的，當(dāng)一個(gè)元素達(dá)到一個(gè)特定狀態(tài)時(shí)，它可能得到一個(gè)樣式，當(dāng)狀態(tài)改變時(shí)，又失去這個(gè)樣式。例如，含羞草。
1）、focus
選擇獲得焦點(diǎn)的 input 元素。
2）:link，:visited，:hover，:active
鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動(dòng)狀態(tài)，已被訪問狀態(tài)，未被訪問狀態(tài)，和鼠標(biāo)懸停狀態(tài)。
a:link {color: #FF0000}       /* 未訪問的鏈接 */
a:visited {color: #00FF00}       /* 已訪問的鏈接 */
a:hover {color: #FF00FF}       /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {color: #0000FF}    /* 選定的鏈接 */
注意：a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。
注意：a:active 必須被置于 a:hover 之后，才是有效的。

偽元素選擇器（ : ）

語法：選擇器::偽元素 / 選擇器:偽元素
偽元素是控制內(nèi)容，用于對(duì)文檔的一部分（偽）元素定義樣式
CSS2.1首次定義了單冒號(hào)開頭的偽元素,為了將偽元素與偽類進(jìn)行嚴(yán)格區(qū)分，CSS3重新定義了雙冒號(hào)開頭的偽元素。
1）:first-line、:first-letter
用于向文本的首行,首字母設(shè)置特殊樣式,該偽元素只能應(yīng)用于塊級(jí)元素。

細(xì)雨昵喃，打濕幾處新裳。最是無奈飛燕，春去冬不歸，似人生浮雨，飄飄蕩蕩，有似那點(diǎn)水浮萍，漂泊無根。曾幾何時(shí)也有過“細(xì)雨濕衣看不見，閑花落地聽無聲”的悠閑，也有過“竹杖芒鞋輕勝馬，一蓑煙雨任平生”的瀟灑。人生總是無奈之事太多，牽絆，執(zhí)念，總會(huì)左右著我們涼薄的人生，常?；叵耄幸惶煳覀兪欠衲苋缢话?，清澈純凈，方圓隨意，如白云一樣自由自在。


/*偽元素  之:first-line*/
#article:first-line{
    color: red;
}

/*偽元素  之:first-letter*/
#article:first-letter{
    color: blue;
}

2）:first-child 
選擇元素的第一個(gè)子元素
p:first-child{
    font-size: 30px;
}
li:first-child{
    font-size: 30px;
}
文中第一個(gè)P標(biāo)簽

    文中第一個(gè)li標(biāo)簽
    文中第二個(gè)li標(biāo)簽
    文中第三個(gè)li標(biāo)簽

文中第二個(gè)P標(biāo)簽

3）:before
定義某一個(gè)元素第一個(gè)（虛構(gòu)的）子元素的內(nèi)容，通常會(huì)附帶content屬性。
語法：選擇器:before { content: value; }

4）:after
定義某一元素最后一個(gè)（虛構(gòu)的）子元素的內(nèi)容，通常會(huì)附帶content屬性。
語法：選擇器:after { content: value; }
5）content
說明：content屬性通常與偽元素選擇器 :before 或 :after 一并使用，主要用于為該偽元素生成內(nèi)容。
語法：{ content: value; }

四、CSS的注釋

CSS的注釋格式： / 注釋內(nèi)容 /

GPU云服務(wù)器云服務(wù)器 css簡(jiǎn)介 css入門 css快速入門 css入門到精通

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/117178.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

EscapedDog

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

C++ 程序設(shè)計(jì)：處理含限制條件的好友請(qǐng)求（LeetCode：2076）

閱讀 1043·2021-11-23 09:51
關(guān)于JAVA中順序IO的基本操作

閱讀 3554·2021-11-22 12:04
掃雷（C語言版）

閱讀 2804·2021-11-11 16:55
CSS 入門簡(jiǎn)介

閱讀 3084·2019-08-30 15:55
禁止瀏覽器自動(dòng)填充到表單

閱讀 3306·2019-08-29 14:22
CSS學(xué)習(xí)筆記(十五) 使用map標(biāo)簽實(shí)現(xiàn)單圖多熱點(diǎn)

閱讀 3420·2019-08-28 18:06
手?jǐn)]一個(gè)JS深拷貝函數(shù)

閱讀 1291·2019-08-26 18:36
ES6小結(jié)

閱讀 2180·2019-08-26 12:08

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

CSS 入門簡(jiǎn)介

This is a heading.

我和兄弟有一個(gè)共同的class，為goCenter

相關(guān)文章

前端必備資源大整理

前端必備資源大整理

前端必備資源大整理

前端資源分享-只為更好前端

發(fā)表評(píng)論

0條評(píng)論

EscapedDog

男|高級(jí)講師

TA的文章

C++ 程序設(shè)計(jì)：處理含限制條件的好友請(qǐng)求（LeetCode：2076）

關(guān)于JAVA中順序IO的基本操作

掃雷（C語言版）