CSS的引入與選擇器

時間  2020-07-10
標籤 css 引入 選擇器 欄目 CSS 简体版
原文   原文鏈接

CSS的引入與選擇器

CSS與HTML的關係

　　Cascading Style Sheet 即層疊樣式表css

　　在上一篇文中，已經介紹了一些很是經常使用的HTML標籤，接下來將步入CSS的學習，若是將單純HTML構成的頁面當作是一副素描畫，那麼CSS就是爲這幅畫進行上色的。html

　　固然，CSS也能夠對HTML文檔進行佈局，在最先沒有出現CSS的時候，HTML佈局大多都採用<table>標籤進行佈局，那麼CSS誕生以後就不用那麼作了，使用CSS進行佈局很是方便。web

　　CSS的學習很是簡單，咱們能夠大致給他分爲2部分：canvas

 

　　1.選擇標籤元素（選擇器）瀏覽器

　　2.操縱標籤元素（element）ruby

 

　　而這篇文章主要是講的如何選擇一個標籤元素。app

引入CSS的四種方式

行內式

　　直接在HTML元素中添加style屬性並寫入CSS樣式即爲行內式，並不推薦這樣作，由於後期維護很是麻煩！dom

　　行內式導入CSS有一個特色，即只是爲當前設置了style屬性的HTML元素生效。ide

 

image-20200709181425942

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>CSS學習</title>
</head>
<body>
  
  <p style="background-color:red">行內式導入CSS樣式"</p>
  <p>未導入CSS樣式</p>
  
</body>
</html>

 

嵌入式

　　在<head>標籤中內嵌子標籤<style> ，再在其中寫入CSS樣式即爲嵌入式，嵌入式的使用能夠在初期爲編寫頁面的時候使用，可是投入到實際生產中應該將CSS代碼與HTML代碼作好分離，這樣才能便於後期維護。佈局

 

image-20200709182054814

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>CSS學習</title>
  <style type="text/css">
    p{
      color:red;
    }
  </style>
</head>
<body>
  
  <p>嵌入式導入CSS樣式</p>
  <p>嵌入式導入CSS樣式</p>
​
</body>
</html>

 

連接式

　　在<head>標籤中內嵌子標籤<link>，用HTML中的語法來連接一個已經寫好樣式的CSS文件，即爲連接式。連接式是實際生產中最經常使用的導入CSS樣式的方式。

 

image-20200709182201735

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>CSS學習</title>
  <link rel="stylesheet" href="你的css文件" type="text/css">
</head>
<body>
  
  <p>連接式導入CSS樣式</p>
  <p>連接式導入CSS樣式</p>
​
</body>
</html>

 

導入式

　　在<head>標籤中內嵌子標籤<style>，用CSS中的語法來@import "路徑"導入一個已經寫好樣式的CSS文件，即爲導入式。導入式並不常見，但不排除有人會這樣使用。

 

image-20200709182406326

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>CSS學習</title>
  <style type="text/css">
    @import"你的css文件路徑"
  </style>
</head>
<body>
  
  <p>導入式導入CSS樣式</p>
  <p>導入式導入CSS樣式</p>
​
</body>
</html>

 

CSS選擇器之基本選擇器

* 通用選擇器

　　* 表明全部，咱們能夠用它來清除掉全部HTML元素自己就具備的一些屬性，如內邊距，外邊距等等。

image-20200709183438702

 

　　padding：內邊距

　　margin：外邊距

 

　　咱們可使用通用選擇器*來將他們所有設置成0，可是不建議這麼作。由於有一個專門的CSS reset清除默認樣式的代碼來作這件事，代碼我放在下面了。

 

image-20200709183739917

 

image-20200709183833462

 

*{
  padding:0;
  margin:0;
}

 

E 名字選擇器

　　名字選擇器是選擇多個同名的HTML元素，咱們能夠用它來清除列表元素自己具備的一些樣式。

image-20200709184147239

 

ul{
  list-style:none;
}

 

# ID選擇器

　　ID選擇器以#做爲關鍵字，後面跟上HTML元素的id，由於元素id具備惟一的性質，故該選擇器一次只能選擇一個。

image-20200709184426792

 

#div_1{
  background-color:red;
}

 

. 類選擇器

　　類選擇器以.做爲關鍵字，後面跟上HTML元素的class，由於元素class屬性不具有惟一性，故一次性可選擇多個。

　　補充：一個元素能夠有多個class，用 空格隔開。

 

image-20200709185012950

 

.bbb{
  background-color:red;
}

 

CSS選擇器之組合選擇器

E 特徵 交集選擇器

　　交集選擇器能夠用於從某一具備特性的共同的元素中取出一個具備獨特特徵的元素，這麼說可能有點繞。咱們來看下面圖中的代碼，若是咱們只想讓class爲bbb的<div>的背景色變紅應該怎麼作呢？這個時候就須要用到交集選擇器了。

 

　　若是隻選擇<div>標籤的話，那麼有2個<div>。

　　若是隻選擇class爲bbb的標籤的話，那麼就有3個標籤。

　　因此咱們只能用交集選擇器。

 

image-20200709185541918

 

div.bbb{
  background-color:red;
}
/* 先選出全部div標籤，而後再到選中的div標籤中選出class爲bbb的標籤 */

 

E,F 並集選擇器

　　咱們可使用元素E,元素F這樣的語法選擇出多個元素。中間以逗號,分割。

image-20200709190037469

 

#div_1,.p-1{
  background-color:red;
}

 

E F 後代選擇器

　　咱們可使用元素E 元素F這樣的語法選擇出元素E下的全部元素F。中間以空格分割。

　　PS：向下找多層

 

image-20200709190632777

 

#content a{
  background-color:red;
}
/* 先找到id爲content的元素，再找到該元素下的全部a標籤 */

 

E>F 子代選擇器

　　咱們可使用元素E>元素F這樣的語法選擇出元素E下一級的全部元素F。中間以>分割。

　　PS：向下找一層

 

image-20200709190914880

 

#content>ul>div>a{
  background-color:red;
}
/* 先找到id爲content的元素，再找到該元素下一級的全部ul標籤，再找到ul標籤下一級的div標籤，在找到div下一級的a標籤 */

 

E+F 同級毗鄰選擇器

　　咱們可使用元素E+元素F這樣的語法選擇出緊隨元素E後的同級的全部元素F。中間以+分割。

　　PS：同級向後找，元素F的上一個必須是元素E

 

image-20200709191552783

 

div+p{
  background-color:red;
}

 

E~F 同級多跨選擇器

　　該選擇器與毗鄰選擇器有2點最大的不一樣，第一點，不用必須挨着，第二點，元素F的上一個元素不用是元素E。

　　PS:同級向後找全部，元素F的上一個能夠不是元素E

 

image-20200709192526191

 

div~p{
  background-color:red;
}

 

僞類選擇器

動態僞類選擇器

　　動態僞類選擇器是比較經常使用的一種僞類選擇器，所以須要介紹一下。

選擇器 類型 功能描述
E:link 連接僞類選擇器 選擇匹配的E元素，並且匹配元素被定義了超連接並未被訪問過。經常使用於連接描點上
E:visited 連接僞類選擇器 選擇匹配的E元素，並且匹配元素被定義了超連接並已被訪問過。經常使用於連接描點上
E:active 用戶行爲選擇器 選擇匹配的E元素，且匹配元素被激活。經常使用於連接描點和按鈕上
E:hover 用戶行爲選擇器 選擇匹配的E元素，且用戶鼠標停留在元素E上。IE6及如下瀏覽器僅支持a:hover
E:focus 用戶行爲選擇器 選擇匹配的E元素，並且匹配元素獲取焦點

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=">
    <title>CSS學習</title>
    <style type="text/css">
        a:link {
            background-color: red;
        }

        a:visited {
            background-color: blue;
        }

        a:active {
            background-color: green;
        }

        a:hover {
            font-size: "22px";
        }

        a:focus {
            color: white;
        }
    </style>
</head>

<body>

    <a href="#">點我</a>

</body>

</html>

 

image-20200709214613743

 

目標僞類選擇器

　　不經常使用，可忽略。

選擇器 功能描述
E:target 選擇匹配E的全部元素，且匹配元素被相關URL指向

 

image-20200709215045965

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>CSS學習</title>
  <style type="text/css">
  
      :target
    {
        border: 2px solid #D4D4D4;
        background-color: #e5eecc;
    }
    
  </style>
</head>
  
<body>

<h1>這是標題</h1>

<p><a href="#news1">跳轉至內容 1</a></p>
<p><a href="#news2">跳轉至內容 2</a></p>

<p>請點擊上面的連接，:target 選擇器會突出顯示當前活動的 HTML 錨。</p>

<p id="news1"><b>內容 1...</b></p>
<p id="news2"><b>內容 2...</b></p>

<p><b>註釋：</b> Internet Explorer 8 以及更早的版本不支持 :target 選擇器。</p>

</body>
</html>

 

狀態僞類選擇器

　　狀態僞類選擇器還比較經常使用。能夠記一下，它主要處理表單按鈕的一些狀態。

選擇器 類型 功能描述
E:checked 選中狀態僞類選擇器 匹配選中的複選按鈕或者單選按鈕表單元素
E:enabled 啓用狀態僞類選擇器 匹配全部啓用的表單元素
E:disabled 不可用狀態僞類選擇器 匹配全部禁用的表單元素

 

　　這個就不寫演示代碼了，很是簡單。checked就是對單選框啊，複選框啊這些選中了的狀態，enabled就是能被填寫的全部表單元素，而disabled是不能被填寫的全部表單元素。

 

結構僞類選擇器

　　不多使用，看一下就行，感興趣的能夠本身敲一下代碼。

選擇器 功能描述
E:first-child 做爲父元素的第一個子元素的元素E。與E:nth-child(1)等同
E:last-child 做爲父元素的最後一個子元素的元素E。與E:nth-last-child(1)等同
E:root 選擇匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是html，此時該選擇器與html類型選擇器匹配的內容相同
E F:nth-child(n) 選擇父元素E的第n個子元素F。其中n能夠是整數（1，2，3）、關鍵字（even，odd）、能夠是公式（2n+1）,並且n值起始值爲1，而不是0.
E F:nth-last-child(n) 選擇父元素E的倒數第n個子元素F。此選擇器與E:nth-child(n)選擇器計算順序恰好相反，但使用方法都是同樣的，其中：nth-last-child(1)始終匹配最後一個元素，與last-child等同
E:nth-of-type(n) 選擇父元素內具備指定類型的第n個E元素
E:nth-last-of-type(n) 選擇父元素內具備指定類型的倒數第n個E元素
E:first-of-type 選擇父元素內具備指定類型的第一個E元素，與E:nth-of-type(1)等同
E:last-of-type 選擇父元素內具備指定類型的最後一個E元素，與E:nth-last-of-type(1)等同
E:only-child 選擇父元素只包含一個子元素，且該子元素匹配E元素
E:only-of-type 選擇父元素只包含一個同類型子元素，且該子元素匹配E元素
E:empty 選擇沒有子元素的元素，並且該元素也不包含任何文本節點

 

　　注意事項：

　　（1），「ul>li:nth-child(3)」表達的並非必定選擇列表<ul>元素中的第3個子元素<li>，僅有列表<ul>中第3個<li>元素前不存在其餘的元素，命題纔有意義，不然不會改變列表第3個<li>元素的樣式。

　　（2），:nth-child(n) 中參數只能是n，不能夠用其餘字母代替。

　　（3），:nth-child(odd) 選擇的是奇數項，而使用:nth-last-child(odd)選擇的倒是偶數項

 

　　這裏仍是寫兩個，上面的這些選擇器其實對列表相關的標籤十分好操做。

 

image-20200709221113081

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>CSS學習</title>
  
  <style type="text/css">
    
    ul li:nth-child(1){
      color:red;
    }
    ul>li:last-child{
      color:blue;
    }
    ul li:nth-child(odd){
      font-size:20px;
    }
    
  </style>
  
</head>
  
<body>

<ul>
  <li>li-1</li>
  <li>li-2</li>
  <li>li-3</li>
  <li>li-4</li>
  <li>li-5</li>
</ul>

</body>
</html>

 

否認僞類選擇器

　　不經常使用，可忽略。

選擇器 功能描述
E:not(F) 匹配全部除元素F外的E元素

 

image-20200709221417509

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>CSS學習</title>
  
  <style type="text/css">
    
    .action:not(h1){
      color:red;
    }
    
  </style>
  
</head>
  
<body>
  
  <div class="action">div</div>
  <p class="action">p</p>
  <span class="action">span</span>
  <h1 class="action">h1</h1>
  <h2 class="action">h2</h2>
  
</body>
</html>

 

屬性選擇器

　　屬性選擇器經常使用到。使用它的時候應該考慮到和其餘選擇器一塊兒使用，如交集選擇器。

選擇器 功能描述
[attribute] 用於選取帶有指定屬性的元素。
[attribute=value] 用於選取帶有指定屬性和值的元素。
[attribute~=value] 用於選取屬性值中包含指定詞彙的元素。
[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value] 匹配屬性值以指定值開頭的每一個元素。
[attribute$=value] 匹配屬性值以指定值結尾的每一個元素。
[attribute*=value] 匹配屬性值中包含指定值的每一個元素。

 

image-20200709221619559

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>CSS學習</title>
  
  <style type="text/css">
    
    [class="action"]{
      color:red;
    }
    
  </style>
  
</head>
  
<body>
  
  <div class="action">div</div>
  <p class="action">p</p>
  <span class="action">span</span>
  <h1 class="action">h1</h1>
  <h2 class="action">h2</h2>
  
</body>
</html>

 

僞元素選擇器

選擇器 功能描述
::first-line 匹配文本首行
::first-letter 匹配文本首字母
::before 使用 contnet 屬性生成額外的內容並插入在標記中，插在前面
::after 使用 content 屬性生成額外的內容並插入在標記中，插在後面
::selection 匹配突出顯示的文本

 

　　注意：使用::after與::before必定要在content中加內容！可是這可能會影響到整個網頁的佈局排版！慎重！！！

 

image-20200709223416664

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>CSS學習</title>

  <style type="text/css">

    body div:first-child::first-line{
        color: red;
    }
    body div:nth-child(2)::first-letter{
        font-size: 29px;
        color: orange;
    }
    body div:nth-child(3)::before{
        content: "insert before";
        color: brown;      
    }
    body div:last-child::after{
        content: "insert after";
        color: orchid;
    }

  </style>

</head>
  
<body>

    <div>::first-line 匹配文本首行..</div>
    <div> X ::first-letter 匹配文本首字母..</div>
    <div><----- ::before是在以前插入</div>
    <div>::after是在以後插入-----></div>

</body>
</html>

 

擴展：CSS reset

　　在介紹通用選擇器的時候，說過在開始佈局頁面以前，必定要將本來的一些標籤的屬性給重置爲0，好比列表系列，輸入框<input>等等，因此咱們須要在開始佈局頁面的時候就加入一段CSS代碼，這裏我給搬運了過來。

 

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程