CSS總結

gao384796491發表於2021-01-04
CSS

本章內容

  • css的引入方式
  • css選擇器
  • css優先順序
  • css的基本樣式
  • 盒子模型

css的引入方式(掌握)

  • css具有三種引入方式

1.頭部引用

  • head引入.直接通過style標籤在head引入
  • 優點1:在請求頁面的時候,css被一起請求下來了(因為在頭部),不需要單獨的http去請求,適用於網際網路頁面的首頁-----即不會出現 頁面出來了,樣式沒有出來的這種情況.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #main{
            color:red;
            background: grey;
        }
    </style>
    <!-- 在請求頁面的時候,CSS被一起請求下來了,不需要單獨的http去請求樣式
    適用於網際網路頁面的首頁
    不會出現頁面出來了,樣式沒有出來
    -->
</head>
<body>
    <div id="main">hello world</div>
</body>
</html>

2.外部引用

  • 使用標籤link進行引用,路勁建議設定為相對路徑
  • 缺點:增加了http請求的數量,增加了伺服器的壓力,
  • 優點:樣式可以被多個頁面所使用.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #main{
            color:red;
            background: grey;
        }
    </style>
    <!-- 在請求頁面的時候,CSS被一起請求下來了,不需要單獨的http去請求樣式
    適用於網際網路頁面的首頁
    不會出現頁面出來了,樣式沒有出來
    -->
</head>
<body>
    <div id="main">hello world</div>
</body>
</html>

3.直接在標籤內(屬性)引用

  • 直接在元素的style的屬性中設定樣式
  • 優點:標籤內引用的權值最高(1000)
  • 缺點:結構與樣式混著用,維護性極差.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 樣式和結構混合,維護性極差,css的優先順序最高 -->
    <div id="main" style="color: hotpink;background: indigo;">hello world</div>
</body>
</html>

選擇器(重點+掌握)

選擇器的格式

選擇器{
	樣式1;
	樣式2;
	...
}

1.ID選擇器

  • 如果有的屬性有ID,可以選擇ID對標籤進行控制
    • 選定單個元素
    • 定位選擇器中的單個元素
    • 使用#+ID名進行定義
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* id選擇器
            1>選中單個元素
            2>定位選擇器中的單個元素
         */
        #main{
            color: rgb(101, 206, 31);
            background: red;
            /* 文字對齊方法 */
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="main">你是誰呀!!!!</div>
</body>
</html>

注:元素的ID一定要保持唯一,雖然瀏覽器不會報錯,但是不合規範.

2.類選擇器

  • 當標籤中有 class=“XXX” 屬性的時候,可以使用類選擇器對標籤進行控制.
    • 需要改變多個元素的時候時候
    • 使用 .+class名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .red{
            text-align: center;
            color: greenyellow;
            background: skyblue;
        }
        .green{
            color: indigo;
        }
        .aaa{
            font-style: italic;
        }
    </style>
</head>
<body>
    <!-- 類選擇器的加法操作 -->
    <!-- 後端工程師改別人的程式碼,通常用這個 -->
    <div class="red green aaa">來顆華子?</div>
    <div class="red">來顆華子?</div>
    <div class="red">來顆華子?</div>
    <div class="red">來顆華子?</div>
    <div class="red">來顆華子?</div>
    <div class="red">來顆華子?</div>
    <div class="1">你好呀</div>
    <div class="2">我是你爸爸</div>
    <div class="3">看什麼看</div>
</body>
</html>

注 :類選擇器具有加法操作,一個元素可以指定多個類.

3.標籤名選擇器

  • 在同一頁中所有的標籤名都具有相同的特性.選擇頁面中多個同名元素並且引用樣式.
    • 直接寫樣式名+{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 頁面中同名的所有標籤名都具有相同的樣式 -->
    <style>
        /* 這是後代選擇器 */
        #nav span {
            color: lawngreen;
            background: lightskyblue;
        }
    </style>
</head>
<body>
    <div id="nav">
        <span>hello1</span>
        <span>hello2</span>
        <span>hello3</span>
    </div>
    <div><span>hello4</span></div>
</body>
</html>

4.後代選擇器

  • 有時候需要選擇特定的一些選擇器,可是又不想設定class的時候,可以試一下後代選擇器

    /* 中間是空格 */
選擇器1 選擇器2{
	樣式1;
	樣式2;
	...
}	

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #nav{
            border: 3px red solid;
        }
        #nav span{
            font-size: 20px;
            text-decoration: underline;
            border: 1px blue solid;
        }
        .red-text{
            color: red;
        }
        /* 子選擇器 */
        /* 子選擇器的權值和上面的權值是一樣的,但是他更加接近內容,所以顯示的是該選擇器的樣式 */
        #nav > span{
            border: greenyellow 1px solid;
        }
    </style>
</head>
<body>
    <div id="nav">
        <span class="red-text bold-text">抗擊疫情</span>
        <span class="bold-text">新聞</span>
        <span class="bold-text">hao123</span>
        <span class="bold-text">地圖</span>
        <span class="bold-text">視訊</span>
        <span class="bold-text">貼吧</span>
        <span class="bold-text">學術</span>
        <span>登入</span>
        <span>設定</span>
    </div>
</body>
</html>
  • 只要span作為div main的後代,都會應用該樣式.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #nav span{
            border: solid 2px red;
        }
    </style>
</head>
<body>
    <div id="nav">
        <span>
            <var>你好</var>
        <span>hao123</span>
        </span>
    </div>
</body>
</html>

群組選擇器

  • 當多個選擇器具有相同的樣式的時候,可以相同的樣式抽取出來,將其放到一個群組當中

    • 選擇器1,選擇器2,選擇器3...{
	公共樣式1;
	公共樣式2;
	...
}

選擇器 1 {
特有樣式
}
選擇器 2 {
特有樣式
}
選擇器 3 {
特有樣式
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 使用群組選擇器提供公共的程式碼 */
#main,.red-text,p{
color:blue;
text-decoration: underline;
font-weight: bold;
}
/* 以下寫特有的樣式 */
#main{
font-size: 15px;
}
.red-text{
font-size: 14px;
}
p{
font-size: 13px;
}
</style>
</head>
<body>
<div id="main">hello1</div>
<span class="red-text">hello2</span>
<p>hello3</p>
</body>
</html>

總結: 群組選擇器可以形成css 繼承 ,一般將公共的程式碼寫到群組選擇器裡面去,然後將特有的程式碼寫到特定的選擇器中,群組在前面,特有選擇器在後面.

選擇器的優先順序

1.優先順序權值

  • 一個或者多個元素在CSS的選擇器選擇的過程中,存在多個選擇器選擇同一個元素的時候,此時如果多個選擇器應用了共同的樣式的時候,渲染後的結果由優先順序決定.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#main {
color: blue;
}
div {
color: red;
}
</style>
</head>
<body>
<div id="main">Lorem, ipsum.</div>
</body>
</html>

選擇器優先順序可以分為4種(僅有四種)

選擇器權值描述
style = “”1000標籤內引入
id選擇器100#mian
類選擇器10.class
標籤名選擇器1tag name
  • 哪一種的選擇器的權值高,就按照那個選擇器的樣式進行渲染
  • 當選擇器的權值相同的時候,就按照哪個選擇器離內容的距離最短的選擇器進行渲染.
  • 當選擇器的權值相同的時候,瀏覽器從上到下進行渲染,所以下面渲染的樣式會將上面渲染的樣式進行覆蓋
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body{
            background: green;
        }
        /* 組合選擇器 */
        /* 權值為101 */
        #main span{
            color: red;
        
        }
        /* 權值為110 */
        #main .test{
            color: blue;
        }
        /* 所以hello展示的是選擇器 #main .test的樣式 */
    </style>
</head>
<body>
    <div id="main">
        <span class="test">hello</span>
    </div>
</body>
</html>
  • 組合選擇器的優先順序是由4中優先值的權值相加進行決定的

提升優先順序

  • 方法一:加權值.一般通過後代選擇器進行加權值

  • 方法二:加修飾,一般加類或者ID

  • 方法三:使用!import

方法一;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 提升優先順序方式[1]:加權值 */
.foo{
border: 1px red solid;
}
#main .foo{
border: 1px blue solid;
}
</style>
</head>
<body>
<div id="main">
<span class="foo">hello</span>
</div>
<div class="foo">hello2</div>
</body>
</html>


方法二;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 提升優先順序方式[2]:加修飾--不建議用 */
.foo{
border: 1px red solid;
}
    /*注意:這裡不需要空格*/
span.foo{
border: 1px blue solid;
}
</style>
</head>
<body>
<div id="main">
<span class="foo">hello</span>
</div>
<div class="foo">hello2</div>
</body>
</html>

方法三;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
color: blue !important;
}
#main{
color:red;
background: lightgray;
}
</style>
</head>
<body>
<div>lorem</div>
<div id="main">
test
</div>
</body>
</html>

CSS計本樣式

1.文字的基本設定

  • font-family:設定字型名稱
    • 可以為元素設定多個字型，如果第一個字型沒有找到，嘗試查詢第二個字型，依次類推。如果第一個字型找到，不在尋找下一個字型。
    • win7:預設的字型是微軟雅黑
  • font-size: 設定字型大小.單位有 px|百分比|em|rem。主流瀏覽器預設的字型大小 16px
    • px: 螢幕上具體的畫素，可以認為是一個絕對單位
    • %:百分比，相對單位。相對於該元素的父元素的字型大小。
    • em:一個單位，相對單位。相對於該元素的父元素的字型大小
  • font-style:設定字型風格
    • normal:正常風格，預設值 **font-style:normal;**可以將本來有語義的標籤var/strong/em(表示強調) 降級成為無語義的標籤.從而成為一個容器
    • italic:斜體
  • font-weight: 是否加粗.
    • normal:正常值，不加粗,預設值。
    • bold:加粗
    • number:支援數字，400 表示 normal；700 表示 bold
  • font 是一個複合屬性。也可以簡寫為 font: style|weight|size|family
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#main{
font-family: "微軟雅黑","宋體","Arial";
font-size: 20px;
}
#main span{
/* font-size: 100%; */
/* font-size: 2em; */
/* font-style: italic; */
/* font-weight:bold; */
/* 複合寫法 */
font: italic bold 2em "微軟雅黑","宋體","Arial";
}
</style>
</head>
<body>
<div id="main">
<span>
中國
</span>
</div>
</body>
</html>
  • 樣式具有繼承性,繼承後的標籤的權值會變得很低很低,比1還低,即使加了!import也比1低
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        /* 這裡的樣式顯示了一個正常顯示的"中國",並沒有出現下面的斜體,因為下面的選擇器中,其所控制的span標籤繼承了div的樣式,當一個選擇器中的標籤繼承了父元素的樣式,其權值會變得很小,甚至小於1,所以最終的樣式顯示span下的樣式. */
        span {
            font-style: normal;
        }

        #main {
            font-family: "微軟雅黑", "宋體", "Arial";
            font-size: 30px;
            font-style: italic;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="main">
        <span>
            中國
        </span>
    </div>
</body>
</html>

2.文字的相關設定

  • color:用於設定文字的顏色。

    • 關鍵字:red、green、blue、black、yellow、white、gray/grey、orange、purple、pink、coral、brown、、、
      組合色: greenyellow、orangered、skyblue、darkxxx、lighitxxx
      十六進位制:#000000(黑色) #FFFFFF(白色)
      rgb 三元色:rgb(red,green,blue) red/green/blue 取值範圍[0,255]

  • text-decoration:文字的修飾

    • none:文字無修飾
    • underline:下劃線
    • line-through:中劃線
    • overline:上劃線

  • line-height 本意用於設定行高，支援負值。

    • px:具體的畫素
    • %:百分比,相對單位.相對於該元素的字型大小

  • 實際開發過程中，當容器高度(heigth)和行高(line-heigth)一樣時， 單行文字的垂直居中。
    同時 height 可以省略。

  • text-indent:文字縮排

    • px:具體畫素
    • %:百分比相對於容器的寬度
    • em:一個單位,相對於該元素的字型大小。

  • text-align:文字的水平對齊方式

    • left:左對齊，預設值
    • center:居中對齊
    • right:右對齊
    • 如果用在塊容器上，表示容器中的內容對齊方式。
      對於行內元素無效，只適用於塊元素或者塊容器。

  • vertical-align:文字的垂直對齊方式。

    • top
    • middle
    • bottom

  • 一般對圖片加文字進行使用.

  • 文字相對於圖片對齊的位置

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

        img{
        border:solid 2px red;
            width: 100px;
            height: 100px;
            display: inline-block;
        vertical-align: middle;
    } 
    </style>
   
</head>
<body>
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5f20a62c3d5b3d6806bd51ab6c5dd12.jpg?w=632&h=340" alt="">
    <span>這個是對齊的圖片</span>
</body>
</html>

3.背景相關的設定

  • background-color:背景顏色
  • background-image:設定背景圖片。通過 url(“圖片地址”) 圖片預設平鋪。
  • background-repeat: 背景是否平鋪
    • repeat:水平和垂直方向都平鋪，預設值
    • no-repeat:不平鋪
    • repeat-x:水平平鋪
    • repeat-y:垂直平鋪
  • background-position:背景圖定位
  • background-position:x 軸 y 軸
    • 一般可以先將X軸,y軸設定成為一個大概的值,然後通過開發者工具進行微調
    • x 軸取值/y 軸取值
      px:水平/垂直方向的具體畫素,支援負值。
      百分比:0%最左邊 100%最右邊，相對於容器的剩餘寬度/高度。
      關鍵字:left|center|right / top | center | bottom
  • background 複合屬性 background : color url( ) position repeat
  • 精靈 圖 （sprite image)

4.元素的相關設定 (重點)

  • display: 用於設定元素的呈現方式。也即元素以塊元素呈現還是以行內元素呈現。
    • none:元素不呈現，在頁面不在位置。
    • inline:以行內元素呈現
    • block:以塊元素呈現
    • inline-block:以行內元素呈現，但具有塊特性(能設定寬高)。

盒子模型(box model)

概念

  • ​ 所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。

    CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

在這裡插入圖片描述

  • 盒子模型可以分為4個部分
    • 1.內容自身的寬高
    • 2.內容到邊框的四周的距離 (padding)
    • 3.邊框的粗細程度 (border)
    • 4.盒子到盒子之間的距離 (margin)

margin

  • 在邊框之外的間距(盒子到盒子之間的距離)稱為外邊距/外留白
  • margin有4個方向
    • margin-top
    • margin-left
    • margin-right
    • margin-bottom
  • 塊元素 margin 4 個方向表現良好
  • margin: 0 auto 可以讓塊元素/塊容器在其容器中水平方向居中。垂直方向的 auto 無效。
margin塌陷
  • 兩個 margin 在 垂直方向上會出現塌陷，塌陷的結果以大的 margin 為主。
  • 同級元素塌陷
<style>
#main1{
border: 1px red solid;
margin-bottom: 10px;
}
#main2{
border: 1px red solid;
margin-top: 20px;
}
</style>
、、、
<div id="main1">
main1
</div>
<div id="main2">
main2
</div>
  • 元素包含關係的margin塌陷,以大margin為主,但是同一塌陷到外部
#main1{
width: 100px;
height: 100px;
background-color: lightgray;
margin-top: 10px;
}
#main2{
width: 50px;
height: 50px;
background-color: red;
margin-top: 30px;
}
</style>
、、、
<div id="main1">
<div id="main2">
</div>
    </div>
margin表現
  • margin 在塊元素 4 個方向表現良好。
  • margin 在行內元素左右方向表現良好，垂直方向無效

padding

  • padding 表示內容和邊框之間的間距/留白，也稱內邊距/內留白。盒子的內邊距分為 4 個方向
  • padding-left/padding-rigth/padding-top/padding-bottom
  • 與margin的區別是 padding 在行內元素水平方向表現良好，垂直方向有效但表現不好。

border

  • border 表示邊框,可以設定 4 個方向的邊框。
<style>
#main1 {
/* border-left-width: 1px;
border-left-color: red;
border-left-style: solid; */
/* 複合寫法 */
border-left:1px solid red;
/* border-top-width: 1px;
border-top-color: blue;
border-top-style: dashed;
border-right-width: 1px;
border-right-color: blue;
border-right-style: dotted;
border-bottom-width: 1px;
border-bottom-color: black;
border-bottom-style: double; */
/* 複合寫法 */
border: 1px red solid;
}
、、、
<div id="main1">
main1
</div>
  • 邊框的構成
<style>
body{
background: #f5f5f5;
}
#main1 {
width: 0px;
height:0px;
border-left:10px red solid;
border-right:10px transparent solid;
border-top:10px transparent solid;
border-bottom:10px transparent solid;
}
、、、
<div id="main1">
</div>

小白新手上路,希望大家幫我找一下錯誤.

border 表示邊框,可以設定 4 個方向的邊框。

<style>
#main1 {
/* border-left-width: 1px;
border-left-color: red;
border-left-style: solid; */
/* 複合寫法 */
border-left:1px solid red;
/* border-top-width: 1px;
border-top-color: blue;
border-top-style: dashed;
border-right-width: 1px;
border-right-color: blue;
border-right-style: dotted;
border-bottom-width: 1px;
border-bottom-color: black;
border-bottom-style: double; */
/* 複合寫法 */
border: 1px red solid;
}
、、、
<div id="main1">
main1
</div>
  • 邊框的構成
<style>
body{
background: #f5f5f5;
}
#main1 {
width: 0px;
height:0px;
border-left:10px red solid;
border-right:10px transparent solid;
border-top:10px transparent solid;
border-bottom:10px transparent solid;
}
、、、
<div id="main1">
</div>

小白新手上路,希望大家幫我找一下錯誤.

相關文章