CSS(1)---css語法、css選擇器

時間 2019-11-06

標籤 css 語法選擇器欄目 CSS 简体版

原文原文鏈接

CSS(1)---css語法、css選擇器

1、CSS語法

一、CSS語法

CSS 規則由兩個主要的部分構成：選擇器以及一條或多條聲明。css

屬性是您但願設置的 樣式屬性。每一個屬性有一個屬性值。屬性和屬性值被冒號分開。html

示例測試

<!--  這行代碼的做用是將 h1 元素內的文字顏色定義爲紅色，同時將字體大小設置爲 14 像素 -->
     h1 {color:red; font-size:14px;}
  <!-- 在這裏，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。 -->

2、CSS三種引入方式

CSS三種引入方式有：行內樣式、內部樣式表、外部樣式表。字體

一、行內樣式

它是經過標籤的 style屬性 來設置元素的樣式，url

基本語法示例：spa

<!--使用行內樣式引入CSS-->
 <body>
     <p style="color:blue; font-size:40px">歡迎訪問雨點的博客。</p>
 </body>

建議 實際在寫頁面時不提倡使用，在測試的時候可使用。ssr

二、內部樣式表

在 style標籤 中書寫CSS代碼。style標籤寫在head標籤中。設計

其基本語法示例：code

<head>
  <!--使用內部樣式表引入CSS-->
  <style type="text/css">
    div{
        background: green;
    }
  </style>
</head>

三、外部樣式表

CSS代碼保存在擴展名爲.css的樣式表中。有兩種方式：連接式、導入式。htm

基本語法示例：

<head>
  <!--連接式:推薦使用-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
  <!--導入式-->
  <style type="text/css">
    @import url("css/style.css");
  </style>
</head>

四、三者比較

3、CSS基礎選擇器

基礎選擇器能夠分爲: 標籤選擇器、類選擇器、id選擇器、通配符選擇器。

一、標籤選擇器

標籤選擇器（元素選擇器）是指用 HTML標籤名稱 做爲選擇器，按標籤名稱分類，爲頁面中同一類標籤指定統一的CSS樣式。基本語法示例：

<!-- 示例 這裏h1就是標籤-->
h1 {color:red; font-size:14px;}

標籤選擇器最大的優勢是能快速爲頁面中同類型的標籤統同樣式，同時這也是他的缺點，不能設計差別化樣式。

二、類選擇器

類選擇器使用 .（英文點號）進行標識，後面緊跟類名。

基本語法示例

<head>
    <style type="text/css">
        .center {text-align: center}
   </style>
</head>

注意：類名的第一個字符不能使用數字！

三、 id選擇器

id選擇器使用 # 進行標識，後面緊跟id名，其基本語法示例：

<head>
    <style type="text/css">
        #red {color:red;}
        #green {color:green;}
   </style>
</head>

id選擇器和類選擇器區別

類選擇器：比如人的名字,是能夠屢次重複使用的。

id選擇器：比如人的身份證號碼,是惟一的不能重複。

四、通配符選擇器

通配符選擇器用 * 號表示，他是全部選擇器中做用範圍最廣的，能匹配頁面中全部的元素。

例以下面的代碼，使用通配符選擇器定義CSS樣式，清除全部HTML標記的默認邊距。

* {
  margin: 0;                    /* 定義外邊距*/
  padding: 0;                   /* 定義內邊距*/
}

4、CSS複合選擇器

複合選擇器是由兩個或多個基礎選擇器，經過不一樣的方式組合而成的,目的是爲了能夠選擇更準確更精細的目標元素標籤。

複合選擇器有:交集選擇器、並集選擇器、後代選擇器、子元素選擇器、相鄰兄弟選擇器、僞類選擇器。

一、交集選擇器

交集選擇器由兩個選擇器構成，其中第一個爲標籤選擇器，第二個爲class選擇器，兩個選擇器之間不能有空格，如p.className。

基本語法

示例

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        div.red {  /*交集選擇器  既要知足是 div 標籤 又要知足class叫 red*/
            color: red;
        }
    </style>
</head>
<body>
    <div>交集選擇器</div>
    <div class="red">交集選擇器</div>  <!-- 只有這個會變紅 -->
    <p class="red">交集選擇器</p>
</body>
</html>

二、並集選擇器

並集選擇器，只要知足一個就能夠。好比 .className, h1 , #id {color: #F00;} 表示 .className 和 h1 和 #id 這三個選擇器都會執行顏色爲紅色。一般用於集體聲明。

示例

<!DOCTYPE html>
<html>
<head>
    <title>並集選擇器</title>
    <style>
    /*1. 只要知足其中一個就會變紅*/
    div, p, span {   /*並集選擇器  用逗號隔開 */
        color: red;
    }
    </style>
</head>
<body>
    <div>並集選擇器</div>
    <p>並集選擇器</p>
    <span>並集選擇器</span>
    <h1>並集選擇器</h1>  <!-- 只有這一個不會變紅 -->
</body>
</html>

三、後代選擇器

後代選擇器又稱爲包含選擇器，通常標籤裏面又會包含標籤,那麼內層標籤就爲外層標籤的後代。

示例

<!DOCTYPE html>
<html>
<head>
    <title>後代選擇器</title>
    <style>
    div p  {   /* 後代選擇器  p 必定是 div 的孩子 */
        color: red;
    }
    </style>
</head>
<body>
    <div> 後代選擇器 </div>
    <div> 
        <p>後代選擇器</p>   <!-- 只有它變紅 -->
    </div>
</body>
</html>

四、子元素選擇器

子元素選擇器只能選擇做爲某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 > 進行鏈接，注意，符號左右兩側各保留一個空格。

後代選擇器跟子元素選擇器的區別

後代能夠是親兒子、親孫子、親重孫子之類的，而子代只是親兒子。因此後代選擇器的範圍更廣些。

示例

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
    ul li > a {  /*這裏表示 ul的後代中的li的親兒子纔會有效  */   
            color:red;
    }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">一級菜單</a>    <!-- 只有這個是li的親兒子，因此只有它會變紅 -->
            <div>
                <a href="#">二級菜單</a>  <!-- 這三個只是li的後代但並非親兒子，因此不會變紅 -->
                <a href="#">二級菜單</a>
                <a href="#">二級菜單</a>
            </div>
        </li>
    </ul>
</body>
</html>

五、相鄰兄弟選擇器

若是須要選擇緊接在另外一個元素後的元素，並且兩者有相同的父元素，可使用相鄰兄弟選擇器

例如，若是要增長緊接在 h1 元素後出現的段落的上邊距，能夠這樣寫：

h1 + p {margin-top:50px;}

這個選擇器讀做：「選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素」。

六、僞類選擇器

僞類選擇器用於向某些選擇器添加特殊的效果。好比給連接添加特殊效果，好比能夠選擇第1個，第n個元素。

爲了和咱們剛纔學的類選擇器相區別，類選擇器是一個點好比 .className {} 而咱們的僞類用 2個點就是冒號好比 :link{}。

示例

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
    a:link {  /* 未訪問過的鏈接狀態*/
        color: #3c3c3c;
        font-size: 25px;
        text-decoration: none;  /*取消下劃線*/
        font-weight: 700;
    }
    a:visited {  /*這個連接咱們已經點過的樣子  已訪問過連接*/
        color: orange;
    }
    a:hover {  /*鼠標通過鏈接時候的樣子*/
        color: #f10215;
    }
    a:active {  /*鼠標按下時候的樣子*/
        color: green;
    }

    </style>
</head>
<body>
    <a href="http://www.oujiong.com">點擊</a>
</body>
</html>

參考

有關CSS選擇器上面也只是講了一部分，更多的能夠看w3school官方文檔。當你須要怎麼樣的選擇器到這裏查找就能夠。

一、w3school-CSS 教程

二、CSS 選擇器參考手冊

你若是願意有所做爲，就必須善始善終。(3)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

CSS(1)---css語法、css選擇器

CSS(1)---css語法、css選擇器

1、CSS語法

一、CSS語法

2、CSS三種引入方式

一、行內樣式

二、內部樣式表

三、外部樣式表

四、三者比較

3、CSS基礎選擇器

一、標籤選擇器

二、類選擇器

三、 id選擇器

四、通配符選擇器

4、CSS複合選擇器

一、交集選擇器

二、並集選擇器

三、後代選擇器

四、子元素選擇器

五、相鄰兄弟選擇器

六、 僞類選擇器

參考

六、僞類選擇器