CSS頁面佈局及排版

阿新 • • 發佈：2022-05-29

一、CSS簡介

CSS (Cascading Style Sheets) 層疊樣式表，是一個用於修飾文件的語言，可以將文件以更優雅的形式呈現給使用者。

二、CSS使用

根據定義CSS位置不同，分為行內樣式、內部樣式和外部樣式。

1、行內樣式

內聯樣式：直接在標籤中編寫樣式，通過使用標籤標籤內部屬性style。

<html標籤 style="樣式1:值1;樣式2:值2;"></html標籤>
<div class="box" style="height: 2000px; background-color: palegreen;">行內樣式</div>

缺點：只能對當前標籤生效，沒有做到內容與樣式分離，耦合度太高。

2、內部樣式

定義在head標籤內，通過style標籤，該標籤內容就是Css程式碼。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>內部樣式</title>
        <style>
            div{
                color:red;
            }
        </style>
    </head>
    < 
body>
        <div>內部樣式</div>
    </body>
</html>

3、外部樣式

提前定義的CSS資原始檔
在head標籤內，定義link標籤引入外部樣式檔案。

<link rel="stylesheet" href="../樣式.css">

作用域範圍：

外部樣式表>內部樣式表>行內樣式表

優先順序：

外部樣式表<內部樣式表<行內出樣式表

相同的樣式作用在同一個標籤上：就近原則；不同的樣式作用在同一個標籤上：疊加。

載入外部樣式表或者內部樣式表時候，需要注意載入順序：載入html檔案是從上向下載入的，也就是後面載入的樣式會覆蓋前面的樣式。

4、CSS語法

選擇器{
    屬性1：值1;
    屬性2：值2;
    ......
}
選擇器：篩選具有相似特徵的元素
屬性與屬性值之間用冒號分開；不同屬性之間使用分號隔開。
例如：
h1{
    color:red;
    font-size:12px;
}

5、CSS註釋

css註釋以/*開始，*/結束。

/*這是CSS的註釋*/
h1{
    color:red;  /*這是顏色的註釋*/
    font-size:12px;
}

三、基本選擇器

1、id選擇器

選擇具有相同id屬性值的元素，建議html頁面中的id值唯一。

id選擇器可以為標有特定id的html元素指定特定的樣式。

html元素以id屬性來設定id選擇器，CSS中的id選擇器以“#”來定義。

PS：id屬性值不要以數字開頭，數字開頭的id在Firefox/Mozilia中不起作用。

雖然多個元素可以使用同一個id選擇器設定樣式，但是不推薦；如果需要同樣的樣式對多個標籤起作用可以使用類選擇器。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #myDiv{
            color: red;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div id="myDiv">id選擇器 用'#'定義</div>
</body>

2、class選擇器

選擇具有相同class屬性值元素。

class選擇器用於描述一組元素樣式，class選擇器有別於id選擇器，可以在多個元素中使用。

class選擇器在html中以class表示，在css中以一個點"."表示。

PS：class屬性值不要以數字開頭，數字開頭的id在Firefox/Mozilia中不起作用。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .myClass{
            color: red;
        }
    </style>
</head>
<body>
    <div class="myClass">class選擇器用.定義</div>
</body>

3、元素選擇器/標籤選擇器

選擇具有相同標籤名稱的元素。

定義選擇器語法：標籤名稱{}

ps:標籤名稱必須是html提供好的標籤。

使用標籤選擇器：自動使用在所有同名的標籤上

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <div>第一段</div>
    <div>第二段</div>
</body>

4、選擇器優先順序

ID選擇器>class選擇器>標籤選擇器

當多個選擇器作用在同一個標籤上時，如果屬性衝突看優先順序，如果不衝突樣式疊加生效。

特權：！important

權值：

行內樣式：1000
#id：100
.class類、偽類：10
元素、偽物件：1

5、樣式表的優先順序

行內樣式表>內部樣式表>外部樣式表

三個樣式表中都有同樣的內容作用在同一個標籤上時，如果屬性衝突看優先順序，如果不衝突樣式疊加。

6、CSS選擇器總結

核心選擇器

層次選擇器

偽類選擇器（過濾器）

與狀態相關

與子元素相關

偽元素選擇器

屬性選擇器

四、CSS常用樣式

1、color：字型顏色

三種顏色值：

顏色的單詞 red blue......
rgb(紅，綠，藍)三色取值範圍：0-255
rgba(紅，綠，藍，透明度)透明度取值：0-1，0全透明，1不透明，0.5半透明。

#值1值2值3：值的正規化：00-FF 對應關係： #FF0000->rgb(255,0,0)

2、width height：寬高

PS：只有塊狀元素可以設定寬高，行級元素設定寬高不生效。

取值方式兩種：

數值絕對值單位px
百分比佔據父元素比例

3、背景樣式

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .bg{
        /*背景色*/
        background-color: cornflowerblue;
        /*背景圖片：背景圖片小於標籤的寬高時，預設平鋪*/
        background-image: url(../img/1.jpg);
        /* 背景平鋪方式：不設定時候預設xy軸同時平鋪
         repeat-x:橫軸平鋪
         repeat-y:縱軸平鋪
         repeat:xy同時平鋪
         no-repeat:不平鋪
         * */
        background-repeat: no-repeat;
        /*背景位置：第一個單數：x軸上偏移距離，整數向右移動，負數向左移動
                     第二個單數：y軸上的偏移距離，整數向下移動，負數向上移動*/
        background-position: 10% 20px;
    }
    .bg2{
        /*將以上所有跟背景相關樣式縮寫
         縮寫順序：背景色、背景圖片、背景圖片平鋪方式、背景的X軸偏移、背景的y軸偏移
         多屬性之間使用空格隔開
         * */
        background: blanchedalmond url(../img/1.jpg) no-repeat 20px 30px;
    }
    </style>
</head>
<body class="bg2">
</body>

4、文字樣式

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            /*塊狀元素都有寬高屬性；行級元素沒有寬高*/
            width: 90%;
            height: 400px;
            /*背景樣式*/
            background: tan url(../img/1.jpg) no-repeat 10px 10px;
            /*字型*/
            font-size: 18px;
            font-family: "微軟雅黑";
            font-weight: bold;
            /*字型縮寫：粗細 大小 樣式*/
            font: bold 24px "微軟雅黑";
            /*文字樣式*/
            /*劃線位置：line-through 中劃線   underline 下劃線 none 沒有劃線*/
            text-decoration: underline;
            /*文字的水平對齊方式：left right center*/
            text-align: center;
            /*文字的垂直對齊方式：沒有單個屬性可以設定垂直對齊;
             一般單行的時候使用高度等於行高設定垂直居中；
             多行使用盒子模型*/
            line-height: 400px;
            /*文字之間的間隙*/
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
    <div>
        我有一個夢想，i have a dream
    </div>
</body>

5、列表樣式

<style>
    li{
        background-color: lemonchiffon;
        /*列表樣式：常用取值：none-無樣式 square-正方形 circle-空心圓 decimal-數字*/
        list-style-type: circle;
        /*列表樣式為自定義圖片*/
        list-style-image: url(../img/2.jpg);
        /*列表樣式的放置位置*/
        list-style-position: inside;
        /*列表樣式縮寫*/
        list-style: square url(../img/2.jpg) inside;
        /*常用的列表樣式*/
        list-style: none;
    }
</style>

6、邊框樣式

<style>
    .border{
        /*邊框寬度*/
        border-width: 2px;
        /*邊框顏色*/
        border-color: red;
        /*邊框樣式：solid 實線  dotted 點線  dashed 虛線*/
        border-style: dashed;
        /*邊框樣式縮寫：樣式 顏色 寬度*/
        border:solid green 5px;
        /*邊框可以為4個方向分別設定*/
        border-top: dashed black 4px;
        border-right: dashed #FF00FF 4px;
        border-bottom: dotted darkblue 4px;
        border-left: solid fuchsia 5px;
        /*沒有邊框*/
        border: none;
        /*常用的細邊框樣式*/
        border: solid 1px #ccc;
    }
</style>

五、盒子模型

所有的html元素可以看做是盒子，在css中，"box model"是用來設計和佈局時使用。

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

盒子模型允許我們在其他元素和周圍元素邊框之間的空間放置元素。

margin：外邊距，清除邊框外區域，外邊距是透明的。
border：邊框，圍繞在內邊距和內容外的邊框。
padding：內邊距，清除內容周圍區域內邊距是透明的。
content：內容，顯示文字和影象。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    /* border:邊框，分4個方向，同理margin、padding也分為四個方向
    * margin:元素與元素之間對的距離
    * padding:內容與邊框之間的距離
    * 設定的時候順序：上 右 下 左
    */
        .div{
            border: solid red 10px;
            /*四個方向上的元素與元素之間的距離都是50px*/
            margin: 50px;
            /*兩個值的時候：第一個引數表示上下距離都是50px,第二個引數表示左右距離都是100px*/
            margin: 50px 100px;
            padding: 50px;
            /*
             一個元素真正的寬度=width+左右padding值+左右的border值
             一個元素的真正高度=height+上下的padding值+上下的border值
             * */
        }
    </style>
</head>
<body>
    <div class="div">111111111112222222222223333333333333333</div>
</body>

1、盒子的寬高

元素的實際寬度和高度：

計算一個元素在實際在頁面佔據的總寬度=元素寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

元素實際在頁面佔據的總高度=元素高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

2、設定寬度=元素實際寬度，box-sizing屬性。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* box-sizing:確認元素的大小
        content-box: 實際寬度=width+左右的psdding值+上下的border值
                     實際高度=height+上下的padding值+上下的border值
        border-box:實際寬度=width;實際高度=height
                    padding和border不會影響元素的實際寬高
        * */
        .box{
           width: 100px;
           height: 200px;
           border: 5px solid;
           padding: 5px;
           box-sizing: content-box;
        }
    </style>
</head>
<body>
    <div class="box">你好中國</div>
</body>

六、更多常用樣式

1、float

CSS的float會使得元素向左或者向右移動，其周圍的元素也會重新排列。

float往往應用於影象，但它在佈局時候一樣有用。

塊元素脫離預設文件流，預設寬度為0，失去了對父元素支撐的能力。在浮動流中，多個同級別浮動元素在一行中顯示，當這一行容納不下，會自動換行。

1.1 元素怎樣浮動

元素的左右方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或者向右移動，直到它的外邊緣碰到包含框或者另一個浮動框為止。

浮動元素之後的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

1.2 彼此相鄰的浮動元素

如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相連。

1.3 清除浮動

元素浮動之後，周圍元素將重新排列，為了避免這種情況，使用clear屬性清除浮動。

clear屬性指定元素兩側不能出現浮動。

<head>
<meta charset="UTF-8">
<title></title>
<style>
    div{
        width: 400px;
        height: 200px;
        margin-bottom: 10px;
    }
</style>
</head>
<body>
    <!--
    沒有浮動屬性的元素都屬於常規文件流，從上往下從左往右依次顯示
    浮動的元素都脫離了常規文件流；
    為了好理解：大家可以認為浮動元素屬於一層，非浮動元素屬於一層
    如果想要非浮動元素不受浮動元素影響，需要使用clear屬性。
    -->
    <div style="background: rgba(255,0,0,0.5);float: left;">
        div1-左浮動，脫離常規文件流，緊貼父元素或者上一個同方向浮動
    </div>
    <div style="background: lawngreen;width: 600px;height: 350px;">
        div2-未浮動，常規文件流，<br/>
        PS:此時div1在div2的上方顯示，因為div1和div2是不同文件流中的元素，顯示互不影響。
        如果不想讓div2被浮動元素影響，需要新增clear屬性。
        新增clear：left;之後div2就會忽略div1浮動的影響，在div1後面顯示，不會重疊
    </div>
    <div style="background: lightblue;float: right;width: 1800px;">
        div3-右浮動，脫離常規文件流，緊貼父元素或者上一個同方向浮動
    </div>
    <div style="background: lightcoral;width: 600px;height: 350px;">
        div4-未浮動，常規文件流，<br/>
        PS:此時div3在div4的上方顯示，因為div3和div4是不同文件流中的元素，顯示互不影響
        如果不想讓div4被浮動影響，需要新增clear屬性。
        新增clear:right;之後div4就會忽略div3浮動影響，在div3後面顯示，不會重疊了。
        clear屬性有三個取值：left、right、both;分別是去除左浮動、右浮動和所有浮動影響。
    </div>
    <div style="background: lavender;">
        div5-未浮動，常規文件流。
    </div>
</body>

清理浮動，為容器內部新增一個子元素，一般使用偽元素較方便。

div::after {
    content:"";
    display:block;
    clear:both;
}

2、Overflow

控制內容溢位元素框時顯示方式。

overflow屬性有如下值：

注意：overflow屬性只作用於規定高度的塊元素上。

在Mac系統中，滾動條預設是隱藏的，使用的時候才顯示。

3、Display和Visibility

3.1 兩者之間的區別

display設定一個元素應該如何顯示，visibility設定一個元素可見還是隱藏。

隱藏一個元素可以通過把display設定為“none”或者visibility設定為“hidden”。但是這兩種方法會產生不同的結果。

visibility:hidden可以隱藏某個元素，但隱藏的元素任然佔用與未影藏之前一樣的空間。該元素雖然被隱藏了但任然影響佈局。

display：none也會隱藏某個元素，且隱藏的元素不會佔用任何空間。該元素不僅被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失。

3.2 display樣式

display:block；顯示為塊元素

display:inline；顯示為內聯元素

display:inline-block 顯示為內聯塊元素，表現為同行顯示並且可以修改寬高內外邊距等屬性。

七、複合選擇器

由兩個或多個基礎選擇器，通過不同方式組合而成。

可以更準確更細緻的選擇目標元素標籤。

1、全域性選擇器

*{} 一般去掉標籤的一些預設效果時候使用，或者整站通用效果時使用。但是不推薦使用。

2、並集選擇器

並集選擇器是各選擇器通過連線形成的，通常用於集體宣告。

語法：選擇器1,選擇器2,...,選擇器n{}

任何形式選擇器都可以作為並集選擇器的一部分(標籤選擇器、class選擇器、id選擇器)。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div,p,ul,li,ol,dl,dd,dt{
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div>111111111</div>
    <p>22222222</p>
    <ul><li>333333333</li></ul>
</body>

3、交集選擇器

條件：交集選擇器又兩個選擇器構成，找到的標籤必須滿足，既有標籤一的特點，也有標籤二的特點。

語法：h3.class{color:red}

其中第一個選擇器為標籤選擇器，第二個為類選擇器。兩個選擇器之間不能有空格。

交集選擇器是並且的意思，即...又...的意思。

4、後代選擇器

概念：後代選擇器又稱為包含選擇器。

作用：用來選擇元素或者元素組的子孫後代。

將外層元素寫在外面，內層元素寫在後面，中間用空格分開。爺爺，父親，兒子，孫子...

格式：父親兒子{屬性:屬性值;屬性:屬性值} 例如：.class h3{color:red;font-size:16px}

當標籤發生巢狀時，內層標籤就成為外層標籤的後代。

5、子元素選擇器

作用：子元素選擇器只能選擇作為某個元素子元素(親兒子)的元素。

寫法：父元素寫在前面，子元素寫在後面，中間用>連線。

例如：.class>h3{color:red;font-size:16px}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>複合選擇器</title>
        <style>
        /*全域性選擇器：一般去表標籤的一些預設效果時候使用，或者整站通用效果時候使用。但是不推薦這麼設定。
         */    
         *{
             color: #333;
         }
         /*並集選擇器：通常使用者集體宣告
          * 替換全域性選擇器
          */
         div,p,dl,dt,dd{
             margin: 0px;
             padding: 0px;
             color: #333;
         }
         /*交集選擇器*/
        li.myli{
            color: green;
        }
        /*後代選擇器*/
        ul li{
            font-size: 28px;
        }
        .myUL li{
            font-family: "微軟雅黑";
        }
        .myUL li a{
            text-decoration: line-through;
        }
        /*子元素選擇器*/
        .demo>h3{
            color: blue;
        }
        </style>
    </head>
    <body>
        <ul>
            <li>1111111111111111111</li>
            <li class="myli">2222222222222222222</li>
            <li>3333333333333333333</li>
            <li>4444444444444444444<a href="#">click me</a></li>
            <li class="myUL">
                        <ul>
                        <li>li1111111111111111</li>
                        <li class="myli">li2222222222222222</li>
                        <li>li3333333333333333</li>
                        <li>li4444444444444444<a href="#">click me</a></li>
                        </ul>
            </li>
        </ul>
        <ol>
            <li>111111111111111111</li>
            <li>222222222222222222</li>
            <li>333333333333333333</li>
            <li>444444444444444444</li>
        </ol>
        <div class="demo">
            <h3>靜夜思</h3>
            <ul>
                        <li><h3>床前明月光</h3></li>
            </ul>
        </div>
    </body>
</html>

6、偽類選擇器

和類選擇器相比，類選擇器使用.class{}，偽類選擇器使用:link{}

作用：用於向某些選擇器天長假特殊效果。比如向連結新增特殊效果。

偽類選擇器很多：連結偽類、結構偽類等。

連結偽類：

a:link /*未訪問的連結*/
a:visited /*已訪問的連結*/
a:hover /*滑鼠移動到連結上*/
a:active /*選定的連結*/

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*偽類選擇器*/
        a:link{
            color: red;/*預設樣式*/
        }
        a:visited{
            color: blue;/*訪問過的樣式*/
        }
        a:hover{
            color: green;/*滑鼠懸浮的樣式*/
            font-size: 28px;
        }
        a:active{
            color: gold;/*按下滑鼠不放手樣式*/
            font-family: "微軟雅黑";
        }
    </style>
</head>
<body>
    <a href="1.html" target="_blank">1.html</a>
    <a href="2.html" target="_blank">3.html</a>
    <a href="3.html" target="_blank">3.html</a>
</body>