WEB前端學(xué)習(xí)-CSS3-01

年初的時候工作不是很忙花了小10天的時間利用業(yè)余時間學(xué)習(xí)了一下web前端開發(fā)，前段時間整理電腦，偶然發(fā)現(xiàn)了這個文件夾，現(xiàn)在打算把這些東西整理一下，有些東西可能不是很正確也不是很具體，但還是鼓起勇氣發(fā)出來，畢竟技術(shù)只有在分享的過程中才能不斷進(jìn)步。

CSS3中界面元素樣式設(shè)置的方式

1.CSS行內(nèi)樣式

行內(nèi)樣式就是標(biāo)簽后面進(jìn)行顏色設(shè)置、字體大小。。。。。。。

<h1 style = "color:red";> 這是語段行內(nèi)樣式的設(shè)置效果</h1>
<ul>
    <li><a href = "#"></a>
         <a href = "#"></a>
         <a href = "#"></a>
    </li>
</ul>

注意在這里可以用Emmate語法快速創(chuàng)建，在這里'>'表示的是父子關(guān)系

ul>li>a[href="#"] * 3

運(yùn)行效果如下:


內(nèi)嵌樣式效果圖

2.CSS3內(nèi)嵌樣式

內(nèi)嵌樣式是指將頁面元素的樣式設(shè)置代碼寫在HTML中head內(nèi)部。
示例代碼如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3的內(nèi)嵌樣式</title>
    <style>
        /* ‘p {}’ 專門給body中的p段落中的內(nèi)容進(jìn)行樣式設(shè)置 */
        p {
            color: green;/*設(shè)置前景色也就是字體顏色為綠色*/
            background-color: aqua;
        }

        ul {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <p>這里是一個段落</p>
    <ul>
        <li><a href="#">iOS</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">HTML</a></li>
    </ul>
</body>
</html>

效果如下:


內(nèi)斂樣式

3.CSS3中的外鏈樣式

在HTML的head中使用link標(biāo)簽來調(diào)用外部CSS樣式的文件可以實現(xiàn)對本頁面樣式進(jìn)行設(shè)置，這種方式就是CSS的外聯(lián)樣式。
優(yōu)點:CSS樣式文件可以重復(fù)使用
外聯(lián)CSS樣式代碼如下:

h1  {
  color: red;
}

引用方式代碼如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通過外聯(lián)設(shè)置CSS樣式</title>
    <link rel="stylesheet" href="../CSS/main.css">
</head>
<body>
    <h1>通過外聯(lián)來設(shè)置這段文本的樣式</h1>

</body>
</html>

效果圖:


外聯(lián)樣式

4.外聯(lián)樣式的第二種引入方式：@import

@import也可以引入外聯(lián)樣式，具體區(qū)別看完代碼再說：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>導(dǎo)入CSS3樣式</title>
    <style>
        @import "../CSS/main.css";
    </style>
</head>
<body>
    <h1>通過導(dǎo)入CSS3樣式完成這段文本的修改</h1>
</body>
</html>

導(dǎo)入的是同一個CSS樣式文件，這里就不放效果圖了，關(guān)于@import和link這兩種方式的異同點，我沒有做過深入的研究，不過我在網(wǎng)上發(fā)現(xiàn)了很多不錯解釋，在這里感謝博客園的web前端開發(fā)之路！

綜合度娘的多篇文章和個人理解，兩者的區(qū)別總結(jié)如下：
1：老祖宗的差別。link屬于XHTML標(biāo)簽，而@import完全是CSS提供的一種方式。
link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性，等，@import就只能加載CSS了。

2： 加載時間及順序不同。使用link鏈接的css是客戶端瀏覽你的網(wǎng)頁時先將外部的CSS文件加載到網(wǎng)頁當(dāng)中，然后再進(jìn)行編譯顯示，所以這種情況下顯示出來 的網(wǎng)頁跟我們預(yù)期的效果一樣，即使一個頁面link多個css文件，網(wǎng)速再慢也是一樣的效果；而使用@import導(dǎo)入的CSS就不同了，客戶端在瀏覽網(wǎng) 頁時是先將html的結(jié)構(gòu)呈現(xiàn)出來，再把外部的CSS文件加載到網(wǎng)頁當(dāng)中，當(dāng)然最終的效果也是跟前者是一樣的，只是當(dāng)網(wǎng)速較慢時會出現(xiàn)先顯示沒有CSS統(tǒng) 一布局時的html網(wǎng)頁，這樣就會給閱讀者很不好的感覺。這也是現(xiàn)在大部分網(wǎng)站的CSS都采用鏈接方式的最主要原因。

3：兼容性不同。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標(biāo)簽無此問題。

4：使用dom控制樣式時出現(xiàn)問題。當(dāng)使用javascript控制dom去改變樣式的時候，只能使用link標(biāo)簽，因為@import不是dom可以控制的。

5： 導(dǎo)入樣式可以避免過多頁面指向一個css文件。當(dāng)網(wǎng)站中使用同一個CSS文件的頁面不是非常多時，這兩種方式在效果方面幾乎是沒有不同的，但網(wǎng)站的頁面數(shù) 達(dá)到一定程度時（比如新浪等門戶），如果采用鏈接的方式可能就會使得由于多個頁面調(diào)用同一個CSS文件而造成速度下降，但是一般頁面能達(dá)到這種程度的網(wǎng)站 也會有資本用最好的硬盤，所以這方面的因素也不用怎么擔(dān)心。

綜上所述，一般普通的站點在調(diào)用外部樣式表的時候，還是盡量選擇link鏈入外部樣式表比較好。

CSS3中樣式選擇器匯總

在我們開發(fā)web界面的時候相當(dāng)于構(gòu)建一個完整的人體，HTML賦予了這個人的骨架和結(jié)構(gòu)(頭、手、腳......)，CSS決定了這些部位的視覺感受(膚色、高低、胖瘦......)，JavaScript又決定了這個人的行為(吃飯，喝水、跑步......)。前面我們已經(jīng)講過一種CSS的引用樣式是行內(nèi)樣式，其實這一點上和iOS開發(fā)中設(shè)置控件樣式是類似的，初始化完成一個控件之后就去對這個控件進(jìn)行設(shè)置(按鈕的顏色，按鈕上文本字體的大小)，但是網(wǎng)站的開發(fā)和APP的開發(fā)區(qū)別在于一個網(wǎng)頁的頁面元素通常情況下要比一個APP界面元素多得多，如果有20個相同的界面元素要設(shè)置相同的背景顏色，那么是不是要用行內(nèi)樣式設(shè)置20次？顯然不可能。所以我們通常用內(nèi)嵌樣式設(shè)置元素樣式。那么怎么獲取這些元素呢？可以通過標(biāo)簽名稱、自己給元素設(shè)置的tag(類似于iOS的tag)、這些選擇器的作用就是獲取元素的，獲取元素的選擇器大概有以下幾種:

1.類選擇器

運(yùn)用條件:當(dāng)界面中多個標(biāo)簽要設(shè)置相同的屬性的時候需要給這些標(biāo)簽設(shè)置相同的類,然后用類選擇器設(shè)置CSS樣式。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>類選擇器</title>
    <style>
        .web {
            color: red;
        }
        .demo {
            background-color: green;
        }
    </style>
</head>
<body>
    <!--class這個屬性可以有多個值,每個值之前用空格隔開-->
    <p class="web demo">這是第一個一個段落</p>
    <p>這是第二個段落</p>
    <ul>
        <li class="web">上海</li>
        <li>武漢</li>
        <li class="web">深圳</li>
        <li>廣州</li>
    </ul>
    <!--標(biāo)簽中class屬性和id屬性的區(qū)別:-->
            <!--1.class值可以相同,id屬性的值不能相同-->
            <!--2.class可以有多個值,但是id只能有一個值-->
            <!--盡量使用class屬性-->


</body>
</html>

2.復(fù)合選擇器

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>復(fù)合選擇器</title>
    <style>
        h2.demo {
            color: red;
        }
    </style>

</head>
<body>
    <h2 class="demo">這是第一個h2標(biāo)簽</h2>
    <h2>這是第二個h2標(biāo)簽</h2>
    <ul>
        <li class="demo">這是一段文本</li>
        <li>這是一段文本</li>
        <li>這是一段文本</li>
    </ul>
</body>
</html>

3.后代選擇器

后代選擇器 先找到 class值為 desc的標(biāo)簽,然后再在這個標(biāo)簽中尋找標(biāo)簽為li的子標(biāo)簽,并對其中的內(nèi)容進(jìn)行設(shè)置

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代選擇器</title>
    <style>
        .desc li {
            color: red;
        }
    </style>

</head>
<body>
    <div class="desc">
        <ul>
            <li>上海</li>
            <li>北京</li>
            <li>深圳</li>
        </ul>
        <ul>
            <li>iOS</li>
            <li>Java</li>
            <li>.net</li>
        </ul>
        <ul>
            <!--通過后代選擇器去設(shè)置文本的CSS樣式這樣后添加的文本也能獲得之前設(shè)置的樣式-->
            <li>再添加一行</li>
            <li>再添加一行</li>
            <li>再添加一行</li>
        </ul>
    </div>
    <div>
        <ul>
            <li>姓名</li>
            <li>年齡</li>
            <li>電話</li>
        </ul>
    </div>
</body>
</html>

4.并集選擇器

如果多個標(biāo)簽內(nèi)的文本CSS樣式需求是相同的那么可以采用這種方式

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集選擇器</title>
    <style>
        p, h1, h2 {
            color: red;
        }
    </style>
</head>
<body>
    <p>這是一個段落</p>
    <h1>這是h1標(biāo)題</h1>
    <h2>這是h2標(biāo)題</h2>
    <ul>
        <li>哈哈</li>
        <li>呵呵</li>
        <li>啊啊</li>
    </ul>
</body>
</html>

5.子代選擇器

找到第二層的p標(biāo)簽之后就不再往后再找,所以第四層的p標(biāo)間的文本顏色無法改變

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代選擇器</title>
    <style>
        div > p {
            color: yellowgreen;
        }
    </style>
</head>
<body>
    <div>
        <p>這是第一個段落</p>
        <p>這是第二個段落</p>
        <h1>這是一個h1標(biāo)題</h1>
        <p><a >點擊跳轉(zhuǎn)到百度界面</a> </p>
        <ul>
            <li>
                <p>這是最里層的p標(biāo)簽</p>
            </li>
        </ul>

    </div>
</body>
</html>

6.屬性選擇器

把同時擁有 id 和 class屬性的h1標(biāo)簽中的文本進(jìn)行設(shè)置

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器</title>
    <style>
        h1[id][class] { color: red; }
        
        input[type="password"] { background: darkgreen; }
    </style>
</head>
<body>
    <h1 class="desc" id="haha">這是h1標(biāo)題</h1>
    <h1>這也是h1標(biāo)題</h1>
    <input type="text"><br>
    <input type="password" >
</body>
</html>

選擇器的優(yōu)先級

上文寫到六種選擇器的優(yōu)先級，如果在一個在設(shè)置一個元素的顏色和樣式的時候既用了后代選擇器又用了屬性選擇器，那么這個元素的到底遵從哪一個設(shè)置？這里就牽扯到了優(yōu)先級問題，優(yōu)先級我已經(jīng)總結(jié)好了。優(yōu)先級如下:

 選擇器優(yōu)先級排序
           行內(nèi)選擇器 > id選擇器 > 類選擇器 > 標(biāo)簽選擇器 > 通配符選擇器 > 繼承 > 系統(tǒng)默認(rèn)樣式
           注意:
           在復(fù)合選擇其中如果兩個復(fù)合選擇器對同一段文本進(jìn)行樣式設(shè)置的時候遵循以下的方法
                   先比較兩個復(fù)合選擇器中行內(nèi)選擇器的個數(shù)如果都為0那么比較id選擇器的個數(shù)如果相同再比較類選擇器的個數(shù)...
                   ...通過這種方式才能判斷出文本的最終樣式

只是簡單的寫了一部分，后續(xù)會把自己學(xué)到的東西陸陸續(xù)續(xù)發(fā)出來。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,796評論 1贊 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 134,923評論 18贊 139
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,611評論 32贊 459
  • 一:在制作一個Web應(yīng)用或Web站點的過程中，你是如何考慮他的UI、安全性、高性能、SEO、可維護(hù)性以及技術(shù)因素的...
    Arno_z閱讀 1,212評論 0贊 1
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    前端進(jìn)階之旅閱讀 114,779評論 24贊 450