前端之CSS（一）

時間 2019-11-08

標籤前端 css 欄目 CSS 简体版

原文原文鏈接

1、什麼是CSS

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

2、CSS的引入

1.行內式html

<!--#行內式引用：-->
<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.導入式api

將一個獨立的.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文件，所以顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，而後再顯示有樣式的網頁，這是連接式的優勢。

優先級：標籤（行內式）>頁面鑲入（嵌入式）>外部（導入式、連接式），這個僅限一樣的樣式衝突是纔有用.字體

3、CSS選擇器

一、什麼是選擇器？url

「選擇器」指明瞭{}中咱們定義的「樣式」的做用對象，也就是「樣式」做用於網頁中的哪些元素。spa

二、選擇器的分類？code

基礎選擇器

‘*’：通用元素選擇器，匹配任何元素。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>

4、CSS的經常使用屬性

一、顏色屬性orm

<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>

二、字體屬性

font-size: 20px/50%/larger

font-family:'Lucida Bright'

font-weight: lighter/bold/border/

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

三、背景屬性

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>

四、文本屬性

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;首字母大寫

五、邊框屬性

border-style: solid;dashed;dotted

border-color: chartreuse;

border-width: 20px;

簡寫：border: 30px rebeccapurple solid;

六、列表屬性

ul,ol{

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

七、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>