App下載

CSS學(xué)習(xí)筆記之基礎(chǔ)與選擇器

猿友 2020-07-28 18:03:38 瀏覽數(shù) (3522)
反饋

這是一篇關(guān)于CSS基礎(chǔ)跟選擇器的筆記，畢竟自己的記性沒(méi)有筆記本好用，所以記錄一下，以后忘了也好有地方翻一下，復(fù)習(xí)重溫。

CSS介紹

我們可以使用HTML構(gòu)建穩(wěn)定的結(jié)構(gòu)基礎(chǔ)，而頁(yè)面的風(fēng)格樣式控制則交給CSS來(lái)完成。網(wǎng)頁(yè)的樣式包括各種元素的顏色、大小、線形、間距等等，這對(duì)于設(shè)計(jì)或維護(hù)一個(gè)數(shù)據(jù)較多的網(wǎng)站來(lái)說(shuō)，工作量是巨大的。好在可以使用CSS來(lái)控制這些樣式，這將大大提高網(wǎng)頁(yè)設(shè)計(jì)和維護(hù)的效率，并且使網(wǎng)頁(yè)的整體風(fēng)格很容易做到統(tǒng)一。

CSS概述

CSS是英文Cascading Style Sheet的縮寫，中文譯為層疊樣式表，也有人翻譯為級(jí)聯(lián)樣式表，簡(jiǎn)稱樣式表。它是一種用來(lái)定義網(wǎng)頁(yè)外觀樣式的技術(shù)，在網(wǎng)頁(yè)中引入CSS規(guī)則，可以快捷高效地對(duì)頁(yè)面進(jìn)行布局設(shè)計(jì)，可以精確的控制HTML標(biāo)記對(duì)象的寬度、高度、位置、字體、背景等外觀效果。 CSS是一種標(biāo)識(shí)性語(yǔ)言，不僅可以有效的控制網(wǎng)頁(yè)的樣式，更重要的是實(shí)現(xiàn)了網(wǎng)頁(yè)內(nèi)容與樣式的分離，并允許將CSS規(guī)則單獨(dú)存放于一個(gè)文檔中， CSS文件的擴(kuò)展名為“css”。

CSS3

CSS3標(biāo)準(zhǔn)早在1995年就開(kāi)始制訂， 2001年提上W3C研究議程，但是，10年來(lái)CSS3可以說(shuō)是基本上沒(méi)有什么很大的變化，一直到2011年6月才發(fā)布了全新版本的CSS3，目前，許多瀏覽器都廣泛支持CSS3。 CSS3是CSS技術(shù)的一個(gè)升級(jí)版本，CSS3語(yǔ)言將CSS劃分為更小的模塊，在朝著模塊化的方向發(fā)展。以前的版本是一個(gè)比較龐大而且比較復(fù)雜模塊，所以，把它分解成為一個(gè)個(gè)小的簡(jiǎn)單的模塊，同時(shí)也加入了更多新的模塊。在CSS3中有字體、顏色、布局、背景、定位、邊框、多列、動(dòng)畫、用戶界面等等多個(gè)模塊。

CSS的基本用法

CSS的使用規(guī)則由兩部分組成：選擇器和一條或多條聲明。其基本基本語(yǔ)法如下：

        選擇器{
            屬性1: 值;
            屬性2: 值;
            …
            屬性n: 值;
        }

CSS基本用法

CSS屬性

CSS的屬性按照相關(guān)功能進(jìn)行了分組，包含了字體、文本、背景、列表、動(dòng)畫等多個(gè)分組，這些屬性的具體使用方法和示例將會(huì)在后續(xù)中提到。

在HTML文檔中使用CSS的方法

根據(jù)CSS在HTML文檔中的使用方法和作用范圍不同，CSS樣式表的使用方法分為三大類：行內(nèi)樣式、內(nèi)部樣式表和外部樣式表，而外部樣式表又可分為鏈入外部樣式表和導(dǎo)入外部樣式表。本節(jié)我們從四個(gè)分類來(lái)認(rèn)識(shí)在HTML中使用CSS的方法。

  • 行內(nèi)樣式

  • 內(nèi)部樣式表

  • 外部樣式表

  • 鏈入外部樣式表

  • 導(dǎo)入外部樣式表

行內(nèi)樣式

行內(nèi)樣式（inline style），也叫內(nèi)聯(lián)樣式，它是CSS四種使用方法中最為直接的一種，它的實(shí)現(xiàn)借用HTML元素的全局屬性style，把CSS代碼直接寫入其中即可。 嚴(yán)格意義上行內(nèi)樣式是一種不嚴(yán)謹(jǐn)?shù)氖褂梅绞?，它不需要選擇器，這種方式下CSS代碼和HTML代碼混合在一起，因此不推薦使用行內(nèi)樣式。行內(nèi)樣式的基本語(yǔ)法如下：

        <標(biāo)記 style="屬性:值; 屬性:值; …">

內(nèi)部樣式表

當(dāng)單個(gè)文檔需要特殊的樣式時(shí)，應(yīng)該使用內(nèi)部樣式表。內(nèi)部樣式表是將樣式放在頁(yè)面的head區(qū)里，這樣定義的樣式就應(yīng)用到本頁(yè)面中了，內(nèi)部樣式表使用style標(biāo)記進(jìn)行聲明，是較為常用的一種使用方法。其基本語(yǔ)法如下：

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            選擇器1｛屬性:值;…｝
            選擇器2｛屬性:值;…｝
            ……
            選擇器n｛屬性:值;…｝
        </style>
    </head>

style標(biāo)記定義HTML文檔的樣式信息，規(guī)定的是HTML元素如何在瀏覽器中呈現(xiàn)，其中type用來(lái)指定元素中的內(nèi)容類型。

鏈入外部樣式表

當(dāng)為了保證站點(diǎn)的風(fēng)格統(tǒng)一，或當(dāng)定義樣式內(nèi)容較多，且需要多個(gè)頁(yè)面共享樣式時(shí)，可使用外部樣式表。鏈入外部樣式表是把樣式表保存為一個(gè)外部樣式表文件，然后在頁(yè)面中用link標(biāo)記鏈接到這個(gè)樣式表文件，link標(biāo)記放在頁(yè)面的head區(qū)內(nèi)。其基本語(yǔ)法為：

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="樣式表路徑" rel="stylesheet" type="text/css" />
    </head>

其中：

href：指出樣式表存放的路徑。

rel：用來(lái)定義鏈接的文件與HTML之間的關(guān)系，rel="stylesheet"是指在頁(yè)面中使用這個(gè)外部的樣式表。

type屬性用于指定文件類型，“text/css”指文件的類型是樣式表文本。

導(dǎo)入外部樣式表

導(dǎo)入外部樣式表是指在HTML文件頭部的style元素里導(dǎo)入一個(gè)外部樣式表，導(dǎo)入外部樣式表采用import方式。導(dǎo)入外部樣式表和鏈入樣式表的方法很相似，但導(dǎo)入外部樣式表的樣式實(shí)質(zhì)上相當(dāng)于存在網(wǎng)頁(yè)內(nèi)部。其基本語(yǔ)法為：

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            @import url("樣式表路徑");
        </style>
    </head>

CSS基本選擇器

選擇器是CSS中很重要的概念，它可以大幅度提高開(kāi)發(fā)人員編寫或修改樣式表的工作效率。CSS3提供了大量的選擇器，大體上可以分為基本選擇器、組合選擇器、屬性選擇器、偽類選擇器和偽對(duì)象選擇器等。由于瀏覽器支持情況，很多選擇器在實(shí)際開(kāi)發(fā)中很少用到，本篇主要記錄最基本又最常用的幾種選擇器。 基本選擇器包括標(biāo)記選擇器、類選擇器、id選擇器和通用選擇器。

標(biāo)記選擇器

HTML文檔中最基本的構(gòu)成是HTML標(biāo)記，如果要對(duì)文檔中的所有同類標(biāo)記都使用同一個(gè)CSS樣式時(shí)，就應(yīng)使用標(biāo)記選擇器。其基本語(yǔ)法為：

        標(biāo)記名{ 屬性1:值1; 屬性2:值2;…}

例如要使所有P標(biāo)簽的文本居中時(shí)，語(yǔ)法如下：

            p{
                text-align: center;
            }

類選擇器

類選擇器的基本語(yǔ)法為：

        標(biāo)記名.類名{屬性1:值1;屬性2:值2;…}

類選擇器針對(duì)標(biāo)記的全局屬性class，引用方式為:

        <標(biāo)記名 class="類名">

值得注意的是，這里的類名可以是任何合法的字符，由設(shè)計(jì)者定義。如果對(duì)所有的標(biāo)記均可使用，則采用*.類名的形式，這里的*表示全部，當(dāng)然，也可以省略。

下面舉幾個(gè)例子：

        <style type="text/css">
            p.text1{color:brown;font-size:14px;}
            /* 該形式下只允許<p>標(biāo)記中類名為"text1"的標(biāo)簽引用該樣式 */
            *.text1{ color:brown;font-size:14px; }
            或
            .text1{ color:brown;font-size:14px; }
            /* 表示所有類名為"text1"的標(biāo)簽都可引用該樣式 */
        </style>

id選擇器

id選擇器和類選擇器大致相同，不同的是定義時(shí)不使用“.”而使用“#”，作用于HTML標(biāo)記的全局屬性是“id”而不是“class”。 id選擇器的基本語(yǔ)法為：

        標(biāo)記名#id名{ 屬性1: 值1;屬性2: 值2;…}

id選擇器針對(duì)標(biāo)記的全局屬性id，引用方式為:

        <標(biāo)記名 id="id名">

當(dāng)然，與類選擇器一樣，如果對(duì)所有的標(biāo)記均使用時(shí)，則采用*#id名的形式，這里*表示全部，也可以省略。

通用選擇器

通用選擇器是一種特殊的選擇器，用 * 表示，匹配網(wǎng)頁(yè)中的所有元素，除非使用更為具體的選擇器指定某一元素中對(duì)應(yīng)的相同屬性應(yīng)使用其它值。通用選擇器和對(duì)body元素設(shè)定樣式稍有不同，因?yàn)橥ㄓ眠x擇器應(yīng)用于每一個(gè)元素，而不依賴從應(yīng)用于body元素的規(guī)則中繼承的屬性。其基本用法如下：

        <style type="text/css">
            *{
                屬性1: 值1;
                屬性2: 值2;
                …
            }
        </style>

其它CSS選擇器

除了CSS基本選擇器外，CSS還有許多其它選擇器。

組合選擇器

CSS中組合選擇器，可以算作是基礎(chǔ)選擇器的升級(jí)版，也就是組合去使用基礎(chǔ)選擇器的意思。組合選擇器主要有五個(gè)類別：多元素選擇器、后代選擇器、子選擇器、相鄰選擇器和兄弟選擇器。

CSS組合選擇器

多元素選擇器

多元素選擇器的基本語(yǔ)法為：

        E, F {屬性1:值1;屬性2:值2;… }

這個(gè)很好理解，就是同時(shí)選中多個(gè)元素，中間用“，”隔開(kāi)。

后代元素選擇器

后代元素選擇器的基本語(yǔ)法為：

        E F {屬性1:值1;屬性2:值2;… }

這個(gè)也很好理解，就是匹配所有屬于E元素后代的F元素，E元素與F元素用空格隔開(kāi)，例如：

        table b{color:red; }

就表示將表格中的所有b元素文字設(shè)置為紅色。

子元素選擇器

子元素選擇器的基本語(yǔ)法為：

        E>F{屬性1:值1;屬性2:值2;…}

子元素選擇器只能選擇某元素的子元素，其中E為父元素，F(xiàn)為直接子元素，E>F所表示的是選擇了E元素下的所有子元素F，其間用>連接。這和后代元素選擇器不一樣，在后代元素選擇器中F是E的所有后代元素，而子元素選擇器中F必須是E的子元素。

相鄰兄弟選擇器

相鄰兄弟選擇器的基本語(yǔ)法為：

        E+F{屬性1:值1;屬性2:值2;…}

相鄰兄弟選擇器可以選擇緊接在另一元素后的元素，而且它們具有相同的父元素，其間用+號(hào)鏈接，換句話說(shuō)，E和F具有同一個(gè)父元素，而且F元素在E元素后面并且緊緊相鄰。

一般兄弟選擇器

一般兄弟選擇器的基本語(yǔ)法為：

        E~F{屬性1:值1;屬性2: 值2;…}

一般兄弟選擇器將選擇某元素后面的所有兄弟元素，其間用~號(hào)鏈接，它和相鄰兄弟選擇器類似，需要在同一個(gè)父元素之中，并且F元素在E元素之后。區(qū)別在于E ~ F 選擇器匹配所有E元素后面的F元素，E+F僅匹配緊跟在E元素后邊的F元素。

屬性選擇器

屬性選擇器是在標(biāo)記后面加一個(gè)中括號(hào)，中括號(hào)中列出各種屬性或者表達(dá)式。屬性選擇器的形式很多，我們這里通過(guò)示例簡(jiǎn)單介紹幾個(gè)。

存在屬性匹配

通過(guò)匹配存在的屬性來(lái)控制元素的樣式，一般要把匹配的屬性包含在中括號(hào)中。 例如將任何帶有href屬性的a標(biāo)記設(shè)置為綜色：

        a[href]{color:brown;}

精確屬性匹配 只有當(dāng)屬性值完全匹配指定的屬性值時(shí)才會(huì)應(yīng)用樣式，id選擇器和類選擇器本質(zhì)上就是精確屬性匹配選擇器。 例如將指向網(wǎng)址“http://o2fo.com” 的鏈接a標(biāo)記設(shè)置為棕色：

        a[href="http://o2fo.com"]{color:brown;}

前綴匹配

只要屬性值的開(kāi)始字符串匹配指定字符串，即可對(duì)元素應(yīng)用樣式。前綴匹配使用[^=]形式實(shí)現(xiàn)，如：

        [id^="user"]{color:brown;}

那么下列的標(biāo)簽均可以變?yōu)樽厣?/p> 

        <p id="userName">小明</p>
        <p id="userWeight">體重</p>
        <p id="userAge">年齡</p>

后綴匹配

與前綴匹配相反，只要屬性值的結(jié)尾字符匹串配指定字符串，即可對(duì)元素應(yīng)用樣式。后綴匹配使用[$=]形式實(shí)現(xiàn)，如：

        [id$="Name"]{color:brown;}

那么下列的標(biāo)簽均可以變?yōu)樽厣?/p> 

        <p id="JackName">杰克</p>
        <p id="RoseName">蘿絲</p>

子字符串匹配

只要屬性中存在指定字符串即應(yīng)用樣式，使用[*=]形式實(shí)現(xiàn)，如：

        [id*="test"]{color:brown;}

那么下列的標(biāo)簽均可以變?yōu)樽厣?/p> 

        <p id="Rosetest">段落1</p>
        <p id="testY">段落2</p> 
        <p id="xtesty">段落3</p>

以上就是CSS的學(xué)習(xí)筆記了，希望對(duì)大家有所幫助。然后對(duì)CSS感興趣的同學(xué)可以看一下教程：

CSS教程：http://o2fo.com/css/

CSS微課：http://o2fo.com/minicourse/play/csscourse

CSS 前端

0 人點(diǎn)贊