CSS全面介紹

我可是小老虎發表於2020-09-23
CSS

一、css基本介紹

CSS全稱Cascading Style Sheet層疊樣式表，是專用用來為HTML標籤新增樣式的。

# 註釋
/*單行註釋*/
/*
多行註釋
多行註釋
*/

通常我們在寫css樣式的時候也會用註釋來劃定樣式區域(因為HTML程式碼多所以對呀的css程式碼也會很多)
/*這是部落格園首頁的css樣式檔案*/
/*頂部導航條樣式*/
...
/*左側選單欄樣式*/
...
/*右側選單欄樣式*/
...

二、css基本語法

選擇器 {
  屬性1:值1;
  屬性2:值2;
  屬性3:值3;
  屬性4:值4;
}

三、css四種引入方式

# 行內式
<p style="color：red">你好<p> 

# 嵌入式
<head>
	<sttyle>
    	p {
        	color：red;
        }
    </sttyle>    
</head>
    
# 外鏈式
<link rel="stylesheet" herf="css/mycss.css">

# 匯入式
<head>
    <style>
        /*形式一：*/
        @import "css/mystyle.css";
        /*形式二：*/
        @import url("css/mystyle.css");
    </style>
</head>

四、css選擇器

1、基本選擇器

<id選擇器>
<class選擇器>
<標籤選擇器>
<通配選擇器>
<style>
    #d1 {
        color：red;
    }    找到id是d1的標籤
    .p1 {
        color：red;
    }    找到class值裡面包含p1的標籤
    div {
        background-color：red;
    }    找到所有的div標籤
    * {
        color：red；
    }    將html頁面上所有的標籤全部找到!
</style>

2、組合選擇器

<後代選擇器>
<兒子選擇器>
<毗鄰選擇器>
<弟弟選擇器>
    
<style>
    div span {
        color: red;
    }    
    div>span {
        color: red;
    }
    div+span {
        color: red;
    }	同級別緊挨著的下面的第一個
    div~span {
        color: red;
    }	同級別下面所有的
    
</style>

3、屬性選擇器

1、含有某個屬性
2、含有某個屬性並且有某個值
3、含有某個屬性並且有某個值的某個標籤

<!--屬性選擇器是以[]為標誌的-->
<style>
    [username] {
        color: blue;
    }	將所有含有屬性名是username的標籤背景色改為藍色
    [username='niuniu'] {
        color: blue;
    }	找到所有屬性名是username並且屬性值是niuniu的標籤,背景色改為藍色
    iniput[username='niuniu'] {
        background-color:blue;
    }	找到所有屬性名是username並且屬性值是niuniu的input標籤,背景色改為藍色
    
    [^]:以什麼為開頭匹配[username^=n]
    [$]:以什麼為結尾匹配[username$=u]
    [*]:包含匹配[username*=i]
</style>

4、交集與並集選擇器

<style>
    中間有空格，表示包含的關係
    div .box1 {
        color: red;
    }

    逗號表示的同級別的或者的關係
    div,h1 {
    color: red;
    }
    
</style>

5、序列選擇器

<style>
	    --同級別的第一個標籤得是p才生效
        p:first-child {
            color: red;
        }
		--同級別的最後一個標籤得是p才生效
        p:last-child{
            color: red;
        }
		--同級別的第3個標籤得是p才生效
        p:nth-child(3) {
            color: red;
        }

		--同級別的，同類的，第一個標籤得是p才生效
        p:first-of-type{
            color: red;
        }
		--同級別的，同類的，最後一個標籤得是p才生效
        p:last-of-type{
            color: red;
        }
		--同級別的，同類的，第3個標籤得是p才生效
        p:nth-of-type(3){
            color: red;
        }
		--同級別的只有一個標籤的，得是p才生效
        p:only-child {
            color: red;
        }
 		--同級別的，同類的，只有一個標籤的，得是p才生效
        p:only-of-type {
            color: red;
        }
</style>

五、偽類選擇器

<style>
    a:link {
        color: red;
    }	點選前
    a:hover {
        color: blue;
    }	懸浮
    a:active {
        color: yellow;
    }	點選不鬆開
    a:visited {
        color: green;
    }	點選後
	
    input:foucs {
        background-color: pink;
        outline: none;
    }	input框獲取焦點
    p {
        color: darkgray;
        font-size: 48px;
    }
    p:hover {
        color: white;
    }
</style>

六、偽元素選擇器

<style>
    p:first-letter {
        font-size: 50px;
        color: orange;
    }
    
    p:before {
        content: '你好呀';
        color: blue;
    }
    
    p:after {
        content: '再見嘍';
        color: yellow;
    }
</style>
ps:before和after通常都是用來清除浮動帶來的影響:父標籤塌陷的問題(後面馬上講)

七、css的三大特性

1、繼承

#1、定義：給某一個元素設定一些屬性，該元素的後代也可以使用，這個我們就稱之為繼承性

#2、注意：
    1、只有以color、font-、text-、line-開頭的屬性才可以繼承
    2、a標籤的文字顏色和下劃線是不能繼承別人的
    3、h標籤的文字大小是不能繼承別人的，會變大，但是會在原來字型大小的基礎上變大
    
    ps:開啟瀏覽器審查元素可以看到一些inherited from。。。的屬性
#3、應用場景：
    通常基於繼承性統一設定網頁的文字顏色，字型，文字大小等樣式

2、層疊

#1、定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理衝突的一種能力，即如果有多個選擇器選中了同一個標籤那麼會有覆蓋效果

#2、注意：
1、層疊性只有在多個選擇器選中了同一個標籤，然後設定了相同的屬性，才會發生層疊性
ps：通過谷歌瀏覽器可以檢視到，一些屬性被劃掉了

3、優先順序

#1、定義：當多個選擇器選中同一個標籤，並且給同一個標籤設定相同的屬性時，如何層疊就由優先順序來確定

#2、優先順序
    整體優先順序從高到底：行內樣式>嵌入樣式>外部樣式

    行內樣式並不推薦使用，所以我們以嵌入為例來介紹優先順序
    
    
1、大前提：直接選中 > 間接選中(即繼承而來的)

2、如果都是間接選中，那麼誰離目標標籤比較近，就聽誰的

3、如果都是直接選中，並且都是同型別的選擇器，那麼就是誰寫的在後面就聽誰的

4、如果都是直接選中，並且是不同型別的選擇器，那麼就會按照選擇器的優先順序來層疊

    id > 類 > 標籤 > 萬用字元(也算直接選中) > 繼承 > 瀏覽器預設（即沒有設定任何屬性）
    
    
5、優先順序之!important
.p1 {
            color: red !important;
            font-size: 20px !important;
        } 
#1、作用：還有一種不講道理的!important方式來強制指定的屬性的優先順序提升為最高，但是不推薦使用。因為大量使用!!important的程式碼是無法維護的。
  
#2、注意：
    1、!important只能用於直接選中，不能用於間接選中
    2、!important只能用於提升被指定的屬性的優先順序，其他屬性的優先順序不會被提升
    3、!important必須寫在屬性值分號的前面
    
6、權重計算
#1、強調
如果都是直接選中，並且混雜了一系列其他的選擇器一起使用時，則需要通過計算機權重來判定優先順序

#2、計算方式
#1、id數多的優先順序高
#2、id數相同，則判定類數多的優先順序高
#3、id數、class數均相同，則判定標籤數多的優先順序高
#4、若id數、class數、標籤數均相同，則無需繼續往下計算了，誰寫在後面誰的優先順序高

css屬性相關

width屬性可以為元素設定寬度。

height屬性可以為元素設定高度。

塊級標籤才能設定寬度，行內標籤的寬度由內容來決定。

一、字型屬性

<style>
    p {
        font-weight: normal;	預設
        font-weight: bord;		粗體
        font-weight: lighter;	細體
        font-weight: 100~900;	設定數值
        font-weight: inherit;	繼承父元素字型的值
    }
    p {
        font-style: normal;	預設
        font-style: italic;	斜體
    }
    p {
        font-size: 1px;
        font-size: inherit;
    }
    p {
        font-family: 字型家族
    }
    p {
        font: bolder italic 3px '隸書'    支援簡寫
    }
    p {
        color: red;
        color: rgb(0, 0, 0);
        color: rgba(0,0,0,0.5);
        color: #0000ff;
    }
</style>

二、文字屬性

<style>
    div {
        text-align: left right center justify; 文字水平方向對齊方式
        text-decoration: none underline overline line-through inherit; 文字裝飾
        text-indent: 2px; 文字首行縮排
        line-height: 10px; 	文字的行高
    }
</style>

三、背景屬性

<!--塊級標籤、行內塊級標籤有寬高，行內標籤沒有-->
<style>
    div {
        background-color: red;
        background-img: url("檔案路徑、URL地址");
        background-size: 100px 100px / 100% 100%;
        background-repeat: repeat/ no-repeat/ repeat-x/ repeat-y;
        background-position: center center/ 50% 50%/ 30px 50px;
        background-attachment: scroll/ fixed; 預設值，圖片隨滾動條滾動/ 不滾動
        background: inherit;
        支援簡寫
    }
</style>

<!--背景圖片和插入圖片的區別
#1、
背景圖片僅僅只是一個裝飾，不會佔用位置，
插入圖片會佔用位置

#2、
背景圖片有定位屬性，可以很方便地控制圖片的位置，
而插入圖片則不可以

#3、
插入圖片語義比背景圖片的語義要強，所以在企業開發中如果你的圖片
想被搜尋引擎收錄，那麼推薦使用插入圖片
-->

ps:rgba只能給背景圖片設定透明度，opacity則是給整個標籤加上透明度

四、盒子模型

<!--
	HTML文件中的每個元素都被比喻成矩形盒子， 盒子模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（內填充），content（內容區域），如果把一個盒子比喻成一個壁掛相片，那麼
        #外邊距margin ===== 一個相框與另外一個相框之間的距離
        #邊框border ====== 邊框指的就是相框
        #內邊距padding ===== 內容/相片與邊框的距離
        #寬度width/高度height ===== 指定可以存放內容/相片的區域
    　　 提示：可以通過谷歌開發者工具檢視盒子的各部分屬性
#如圖所示：
-->

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-VdE2xa9Z-1600860480031)(E:\Python脫產班日記\0917css屬性介紹\assets\1036857-20180510224701794-1434317444.png)]

1、盒子模型的寬度和高度

#1、內容的寬度和高度
    通過標籤的width和height屬性設定

#2、元素/盒子模型的寬度和高度
    寬度= 左邊框 + 左內邊距 + width(內容的寬) + 右內邊距 + 右邊框高度
    高度= 。。。。

#3、元素/盒子模型空間的寬度和高度
    寬度= 左外邊距 + 左邊框 + 左內邊距 + width(內容的寬) + 右內邊距 + 右邊框高度 + 右外邊距
    高度= 。。。。
    
<style>
    * {
        margin: 0 ;
        padding: 0  ;
    }
    div {
        display: inline-block;
        weight: 100px;
        height: 100px;
        border-width: 1px 2px 3px 4px; 上 右 下 左
        border-style: solid dotted dashed double;
        border-radius: 50%;
        border-radius: 25% 50%;  橢圓
        padding: 10px; 內邊距
        box-sizing: border-box;  避免因為盒子的內邊距變動，導致盒子大小變形
        margin: 10px;  外邊距，水平方向上會疊加，垂直和方向上取較大的值
        word-break: break-all; 防止文字溢位
    }

</style>

text-align center；只能讓盒子中儲存的文字、圖片水平居中
如果想讓盒子自己相對於父元素水平居中，需要用到
margin: 0 auto;

2、行內標籤和塊標籤

"""
在HTML中HTML將所有標籤分為兩類，分別是容器級和文字級
在CSS中CSS也將所有標籤分為兩類，分別是容器級是塊級元素和行內元素

#1、HTML中容器級與文字級

    容器級標籤：可以巢狀其他的所有標籤
    div、h、ul>li、ol>li、dl>dt+dd

    文字級標籤：只能巢狀文字、圖片、超連結
    span、p、buis、strong、em、ins、del

#2、CSS中塊級與行內

    塊級：塊級元素會獨佔一行，所有的容器類標籤都是塊級，文字標籤中的p標籤也是塊級
    div、h、ul、ol、dl、li、dt、dd   還有標籤p


    行內：行內元素不會獨佔一行，所有除了p標籤以外的文字標籤都是行內
    span、buis、strong、em、ins、del



#3、塊級元素與行內元素的區別

    1、塊級元素block
        獨佔一行
        可以設定寬高
            若沒有設定寬度，那麼預設和父元素一樣寬（比如下例中的div的父元素是body，預設div的寬就是body的寬）
            若沒有設定寬高，那麼就按照設定的來顯示

    2、行內元素inline
        不會獨佔一行
        不可以設定寬高
            盒子寬高預設和內容一樣

    3、行內塊級元素inline-block
        不會獨佔一行
        可以設定寬高
"""

"""
佈局都是用塊級元素，而行內元素是控制內容顯示的。
1、div標籤
   一般用於配合css完成網頁的基本佈局

2、span標籤
  一般用於配合css修改網頁中的一些區域性資訊，比如一行文字我們只為一部分加顏色<p>我是<span>egon</span></p>

3、div和span有什麼區別？
    div一般用於排版，而span一般用於區域性文字的樣式
    1、站在HTML的角度：div是一個塊級元素、獨佔一行，而span是一個行內元素、不會單獨佔一行
    2、站在CSS的角度：div是一個容器級標籤，而span是一個文字級標籤
"""

3、css顯示模式轉換

<style>
    div {
        display: none/ block/ inline/ inline-block;  隱藏不佔位
        visibility: hidden;  隱藏佔位
    }
</style>

CSS頁面佈局

一、頁面佈局的方式

1、標準流

2、浮動流

3、定位流

二、標準流

# 1、標準流是瀏覽器預設的排版方式
# 2、標準流的排版方式有兩種，垂直和水平

三、浮動流

1、什麼是脫離文件流

"""
	標籤懸浮起來，可以理解為Z座標增大，不再受到平面的制約，可以設定大小，原來所在的文件位置空了出來，會被垂直方向上的其他標籤佔據。
	懸浮以後，只能一直向左或者向右，直到遇到另一個標籤停下，無法設定具體的位置，意味著此，如果改標籤有父標籤，之前設定的margin: 0 auto(自動居中)將會失效。
"""

2、什麼是半脫離文件流

"""
	標籤浮動後的位置取決於他之前在文件中的位置：
	1、同一方向上，誰先浮動，誰在前面
	2、不同方向上，左浮動找左浮動，右浮動找右浮動
"""

3、浮動元素貼靠問題

<--
	當父元素的寬度足夠顯示所有元素時，浮動的元素就會並列顯示
	當父元素的寬度不足夠顯示所有元素時，浮動的元素就貼前一個元素，如果還不夠，就會再貼前一個元素直到貼到父元素左邊，此時無論是否寬度足夠都會在這一行顯示了
	沒有浮動的文字、圖片、超連結等元素會給浮動的元素讓位置，並圍繞在浮動元素的周圍 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動貼靠</title>
    <style>
        .d1 {
            width: 500px;
            height: 500px;
            background-color: red;
        }
        .d2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: left;
        }
        .d3 {並列的情況
            width: 300px;
            height: 300px;
            background-color: green;
            float: left;
        }			
        .d3 {貼靠的額情況
            width: 400px;
            height: 400px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2"></div>
        <div class="d3"></div>
    </div>
</body>
</html>

4、浮動造成父標籤塌陷的問題


	1、父標籤如果沒有設定大小，則其大小取決於子標籤的額大小
	2、如果字標籤浮動，則父標籤再次回到沒有大小的狀態
-->
<!--
	1、給父標籤設定大小(不靈活)

=================================================================================


    2、清除浮動方式二：
    clear : none | left | right | both    
    注意：clear這個屬性必須設定在塊級、並且不浮動的元素中

	取值：
    none : 預設值。允許兩邊都可以有浮動物件
    left : 不允許左邊有浮動物件
    right : 不允許右邊有浮動物件
    both : 不允許左右有浮動物件

	把握住兩點：
    1、元素是從上到下、從左到右依次載入的。
    2、clear: left;對自身起作用，而不會影響其他元素。一旦左邊有浮動元素，即切換到下一行來保證左邊元素不是浮動的，依據這一點解決父級塌陷問題。

 
=================================================================================

    3、清除浮動的方式三：隔牆法
	外牆法
     在兩個盒子中間新增一個額外的塊級元素
     給這個額外新增的塊級元素設定clear：both；屬性
     注意：
         外牆法它可以讓第二個盒子使用margin-top屬性
         外牆法不可以讓第一個盒子使用margin-bottom屬性，所以我們通常用牆的高度作margin的替代品



	內牆法
    在第一個盒子中所有子元素最後新增一個額外的塊級元素
    給這個額外新增的塊級元素設定clear：both；屬性
     注意：
         內牆法它可以讓第二個盒子使用margin-top屬性
         內牆法可以讓第一個盒子使用margin-bottom屬性


	內牆法與外牆法的區別？
    1、外牆法不可以撐起第一個盒子的高度，而內牆可以

    2、在企業開發中清除浮動，內牆法與外牆法都不常用，因為新增一個無用的牆
        在前端開發中推崇結構與樣式分離，而隔牆法需要新增大量的沒有意義的空標籤div


=================================================================================

4、偽元素+clear
#通用寫法
.clearfix {
    *zoom:1 	<----相容ie6,否則偽類選擇器只能在谷歌瀏覽器中生效，其餘沒用
}

.clearfix:before,.clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}
 	整段程式碼就相當於在浮動元素前、後面跟了個寬高為0的空table，然後設定它clear:both來達到清除浮動的效果。
    之所以用它，是因為，你不必在html檔案中寫入大量無意義的空標籤，又能清除浮動。



=================================================================================
5、清除浮動的方式五：
    overflow:hidden，但其實它除了清除浮動還有其他方面的用途

    #1、可以將超出標籤範圍的內容裁剪掉
    #2、清除浮動
    #3、可以通過overflow：hidden，讓裡面的盒子設定margin-top屬性後，外面的盒子不被頂下來，這樣就不用為外邊的盒子新增邊框了

一、css定位

1、相對定位（relative）

div {
    position: relative;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
}
相對定位是相對於原始的位置定位的，沒有脫離文件流，同一方向上的屬性只能出現一個，若果設定了margin屬性，則是相對於原始的位置做出改動

2、絕對定位(absolute)

1、預設情況下，都是以body作為參考
2、絕對定位脫離了文件流
3、如果父級標籤中有已經定位過得標籤(相對、絕對、固定)，則以該標籤為準，有多個父級標籤都定位過得前提下，以最近的為準，進行絕對定位
4、如果一個絕對定位的元素是以body作為參考點, 那麼其實是以網頁首屏的寬度和高度作為參考點, 而不是以整個網頁的寬度和高度作為參考點，該標籤會隨著頁面的滾動而滾動
5、一個絕對定位的標籤會忽略父級標籤的padding屬性
6、絕對定位後，margin：0 auto；不在生效，但是可以是使用以下方法居中
	left: 50%;
	margin-left: -元素寬度的一半px；

3、固定定位(fixed)

1、固定定位相對於瀏覽器當前頁面固定，不隨滾動條移動
2、固定定位脫離文件流

4、z-index

1、類似於z軸座標，越大，離使用者越近，前提是必須要定位
2、覆蓋效果取決於父標籤的z-index值大小，如果都一樣，在比較子標籤的，都相同的情況下，後面的覆蓋前面的

相關文章