前端之CSS（一）

阿新 • • 發佈：2019-01-17

一、什麼是CSS

CSS是Cascading Style Sheets，層疊樣式表，高大上的說法是用來控制網頁資料的表現，可以使網頁的表現與資料內容分離。通俗來講，就是用各種盒子的堆疊實現我們想要的HTML頁面，武sir說招聘的時候都不說招前端，而是招div+css，我覺得很貼切。

二、CSS的引入

1.行內式

<!--#行內式引用：-->
<p style="background-color: chartreuse">yinrufangshi1</p>
行內式是在單個標籤的style屬性中設定，並不能體現CSS的優勢：減少程式碼量，so不推薦使用

2.嵌入式

嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式如下：

<head>
     <style type="text/css">
            ...此處寫CSS樣式
     </style>
</head>
eg：
<!--#嵌入式引用：在head中定義style-->
 <style type="text/css">
        p{color: blue;background 
-color: azure;}
    </style>
<!--然後在body中呼叫-->
<p>yinrufangshi2</p>

3.匯入式

將一個獨立的.css檔案引入HTML檔案中，匯入式使用CSS規則引入外部CSS檔案，<style>標記也是寫在<head>標記中，使用的語法如下：
          <style type="text/css">
                    @import"mystyle.css"; 此處要注意.css檔案的路徑
         </style>

4.連結式

也是將一個.css檔案引入到HTML檔案中    <link href="mystyle.css" rel="stylesheet" type="text/css"/>
注意：
匯入式會在整個網頁裝載完後再裝載CSS檔案，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是匯入式固有的一個缺陷。使用連結式時與匯入式不同的是它會以網頁檔案主體裝載前裝載CSS檔案，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象匯入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。

優先順序：標籤（行內式）>頁面鑲入（嵌入式）>外部（匯入式、連結式），這個僅限同樣的樣式衝突是才有用.

三、CSS選擇器

1、什麼是選擇器？

“選擇器”指明瞭{}中我們定義的“樣式”的作用物件，也就是“樣式”作用於網頁中的哪些元素。

2、選擇器的分類？

基礎選擇器

‘*’：通用元素選擇器，匹配任何元素。eg： * { margin:0; padding:0; }
E：標籤選擇器，匹配所有使用E標籤的元素。eg：p { color:green; }
.info和E.info：class類選擇器，匹配所有class屬性中包含info的元素，info是自定義的名字。eg： .info { background:#ff0; } p.info { background:blue; }
#info和E#info：id選擇器，匹配所有id屬性等於info的元素。eg：#info { background:#ff0; } p#info { background:#ff0; }

組合選擇器

多元素選擇器：同時匹配多個元素，元素之間用逗號分隔。eg:div,p{color:#ddd;}
後代元素選擇器：匹配所有屬於A元素後代的C元素，A和C之間用空格分隔。eg：
```
#aaa li { display:inline; }    li a { font-weight:bold; }
```

子元素選擇器：匹配A元素的所有子元素B，A和B之間用大於號分隔。eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1>p{
            background-color: aqua;
            color: deeppink;
        }

        .main2>div{
            background-color: blueviolet;
            color: chartreuse;
        }
    </style>
</head>
<body>

      <div class="div1">hello1
          <div class="div2">hello2
              <div>hello4</div>
              <p>hello5</p>
          </div>
          <p>hello3</p>
      </div>
      <p>hello6</p>

<hr>

     <div class="main2">1
       <div>tina
           <div>
           </div>
       </div>
       <div>
           </div>
     </div>
</body>
</html>

毗鄰元素選擇器：匹配所有同級元素又或兄弟元素。用加號連線。eg： p + p { color:#f00; }
```
.b+p {兄弟選擇器，將同級的標籤選擇出來
       background-color: blue;
       font-size: 40px;
   }
```

屬性選擇器
- E[att]:匹配所有具有att屬性的E元素，不考慮它的值。（E在此處可以省略，eg：p[title] { color:#f00; }或[title] { color:#f00; }）
- E[att=val]：匹配所有att屬性等於“val”的元素。eg：div[class=”error”] { color:#f00; }
- E[att~=val]：匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的元素。eg：td[class~=”name”] { color:#f00; }
- E[att|=val]：匹配所有att屬性具有多個連字元（-hyphen-separated）分隔的值，其中一個值以val開頭的E元素，主要用於lang屬性，因為lang=en-us或en-gb等。eg：p[lang|=en] { color:#f00; }
- E[att^=val]：匹配屬性值以指定值開頭的每個元素。eg：div[class^="test"]{background:#ffff00;}
- E[att$=val]：匹配屬性值以指定值結尾的每個元素。eg：div[class$="test"]{background:#ffff00;}
- E[att*=val]：匹配屬性值中包含指定值的每個元素。eg：div[class*="test"]{background:#ffff00;}
- p:before--->在每個<p>元素的內容之前插入內容。 eg：p:before{content:"hello";color:red}
- p:after--->在每個<p>元素的內容之後插入內容。eg：p:after{content:"hello";color:red}
```
[class] {屬性選擇器，將clas的屬性都選擇出來
       background-color: blue;
   }
   [class='b'] {將class = 'b'的選擇出來
       background-color: blue;
   }
   [class |='b'] {匹配具有連字元 - 的以b開頭的class屬性
       background-color: blue;
   }
   [class ^='b'] {匹配以b開頭的class屬性
       background-color: blue;
   }
   [class ~= 'c'] {匹配具有多個空格分隔的值、其中一個值等於'c'的class屬性
       background-color: blue;
   }
   p:before {
       content:'666' ;
       color: blue;
   }
```

偽類選擇器(專用於控制連結的顯示效果)

a：link（從未訪問過的連結的嶄新狀態），用於定義了連結的常規狀態。
a:hover（滑鼠移動到連結上時未點選的懸浮狀態），用於產生視覺效果。
a:visited（已訪問過的連結的狀態）用於閱讀文章，能清楚的判斷已經訪問過的連結。

a:active（在連結上按下滑鼠時的狀態），用於表現滑鼠按下時的連結啟用狀態。

<style type="text/css">
    a:link{
        color: red;
    }
    a:visited {
        color: blue;
    }
    a:hover {
        color: green;
    }
    a:active {
        color: yellow;
    }<!--注意順序這4個偽類的順序 lvha-->
</style>
</head>
<body>
    <a href="">hello-world</a>
</body>
</html>

四、CSS的常用屬性

1、顏色屬性

<div style="color:blueviolet">ppppp</div>

   <div style="color:#ffee33">ppppp</div>

  <div style="color:rgb(255,0,0)">ppppp</div> 

  <div style="color:rgba(255,0,0,0.5)">ppppp</div>

2、字型屬性

font-size: 20px/50%/larger

font-family:'Lucida Bright'

font-weight: lighter/bold/border/

<h1 style="font-style: oblique">hello tina</h1>

3、背景屬性

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平鋪滿)

background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)

      簡寫：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

              <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

注意：如果講背景屬性加在body上，要記得給body加上一個height，否則結果異常，這是因為body為空，無法撐起背景圖片，另外，如果此時要設定一個width＝100px，你也看不出效果，除非你設定出html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            background-color: antiquewhite;
            
        }
        body{
            width: 100px;
            height: 600px;
            background-color: deeppink;
            background-image: url(1.jpg);
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>

</body>
</html>

4、文字屬性

font-size: 10px;

text-align: center;橫向排列

line-height: 200px;文字行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字型大小的百分比

p

{ width: 200px;

height: 200px;

text-align: center;

background-color: aquamarine;

line-height: 200px; }

text-indent: 150px; 首行縮排，50%：基於父元素（weight）的百分比

letter-spacing: 10px;字母間距

word-spacing: 20px;單詞間距

direction: rtl;從右向左，預設是從左向右

text-transform: capitalize;首字母大寫

5、邊框屬性

border-style: solid;dashed;dotted

border-color: chartreuse;

border-width: 20px;

簡寫：border: 30px rebeccapurple solid;

6、列表屬性

ul,ol{

　　    list-style: decimal-leading-zero; 0開頭的數字標記。(01, 02, 03, 等。)
        list-style: none;<!--!!!重點，做輪播圖時常用到，將列表前面的圈去掉-->　　　　　　　
　　　   list-style: circle;　　　　　　　  標記是空心圓
        list-style: upper-alpha;　　　   大寫字母
        list-style: disc;　　　　　　　　預設。標記是實心圓

7、display屬性

display的用法：
<!--display 為none將隱藏標籤-->
    <div style="display: none;">tina</div>

    <!--display 為inline會將塊級別標籤調為內聯標籤-->
    <div style="display:inline">tina</div>

    <!--display 為block會將內聯標籤調為塊級別標籤-->
    <a style="display:block">tina</a>

五、後序

小插曲：當我們在pycharm執行css程式碼時，建議找到檔案所在位置，右鍵，選擇瀏覽器執行，避免IDE錯誤

@注：下篇將會詳細補充盒子模型、float、position的用法及inline&block的因緣糾葛，敬請期待~(*^__^*) ~……

前端之CSS（一）

一、什麼是CSS

二、CSS的引入

三、CSS選擇器

四、CSS的常用屬性

五、後序

前端之CSS（一）

前端之HTML（一）

從零開始學 Web 之 CSS（一）選擇器

前端之CSS（二）

學習前端之路（一）

從後端到前端之Vue（一）寫個表格試試水

我的IT夢——web前端開發之HTML,CSS（一）

css重構之旅（一）

前端之 —— node.js摸爬打滾之路（一）

python--前端之CSS（css頁面引入方法、選擇器之基本選擇器、組合選擇器）

前端案例分享（一）：CSS+JS實現流星雨動畫

前端系列教程之CSS（引入）

前端成長之路（一）setState需要注意的幾點

web前端進化之路（一）——小程式開發

前端-CSS（一）

從零開始學 Web 之 HTML（一）認識前端

前端學習-基礎部分-css（一）

前端之css（寬高）設置小技巧

從後端到前端之Vue（三）小結以及一顆真實的大樹

Docker+Cmd+Cli+Git之前端工程化紀要（一）整體目標

前端之CSS（一）

一、什麼是CSS

二、CSS的引入

三、CSS選擇器

四、CSS的常用屬性

五、後序

相關推薦