CSS頁面布局

2.1 什么是CSS

作用：美化頁面和布局。（Cascading Style Sheets 層疊樣式表）
層疊：層層疊加，多個樣式可以同時作用在同一個html元素上，同時生效。如果沒有沖突的部分就共同作用，有沖突的部分以優先級高的為主。
樣式表：多個樣式的集合。
css不能單獨使用，要和html結合使用。

2.2 css和html結合的3種方式

2.2.1 內嵌樣式

語法：在標簽中通過style屬性引入css樣式。
特點：只對當前的元素有效果，不方便復用，屬于結構和表現耦合，不方便后期的維護

例：

    <p style="background-color: green;font-size: 30px;color: red;">鋤禾日當午</p>
    <p>鋤禾日當午</p>
    <p style="background-color: green;font-size: 30px;color: red;">鋤禾日當午</p>
    <p style="background-color: green;font-size: 30px;color: red;">鋤禾日當午</p>
    <p style="background-color: green;font-size: 30px;color: red;">鋤禾日當午</p>
    <p style="background-color: green;font-size: 30px;color: red;">鋤禾日當午</p>

2.2.2 內部樣式

語法：在head標簽的內部通過style標簽來引入css樣式。
選擇器{
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
.....
}
特點：可以同時為多個元素設置樣式,可以實現了樣式的復用。表現和結構進一步分離
作用范圍：僅僅在當前頁面中有效

例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
           p{
               background-color:pink;
               color:darkorange;
               font-size: 20px;
           }
        </style>
    </head>

    <body>

        <p>一行白鷺上青天</p>
        <p>一行白鷺上青天</p>
        <p>一行白鷺上青天</p>
        <p>一行白鷺上青天</p>
        <p>一行白鷺上青天</p>

        <b>哈哈哈</b>
    </body>
</html>

2.2.3 外部樣式

單獨創建一個css文件，在這個文件中編寫 css樣式。然后在需要樣式的文件中引入該css文件

通過link標簽引入
rel:引入文件和當前文件的關系
type:告知瀏覽器引入文件的類型
href:引入文件的路徑

特點：完全使表現和結構分離，可以使得樣式可以復用。使用link引入，可以利用瀏覽器的緩存，加快了用戶訪問的速度，提高了用戶體驗。
作用范圍：引入的文件

例：a.css

p{
    color: red;
    font-size: 50px;
}

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入外部的a.css-->
    <link rel="stylesheet" type="text/css" href="../css/a.css">
</head>
<body>
    <p>英雄不問出處  電纜不問來處</p>
</body>
</html>

2.3 CSS的語法

選擇器{
css樣式；
}

選擇器：選擇具有相同或者相似特征的一類元素。

css的樣式；
屬性1：屬性值1;
屬性2：屬性值2;
屬性2：屬性值2;

css的注釋： /*注釋的內容*/

2.4 塊元素和內聯元素

塊元素：
獨占一行的元素，無論內容有多少他們都會獨占一行。 p h1 h2 h3 div
(div沒有任何的效果，不會為元素設置樣式，一般是用于布局)

內聯元素：
只占本身大小的元素a img span b i
span標簽也沒有任何效果，一般用于選中文字給文字添加樣式。

div塊元素主要是用于布局。span內聯元素主要是用于選中文字，給文字設置樣式。

使用時：
1.塊元素可以包含內聯元素內聯元素不能包含塊元素。
2.a元素可以包含任意元素。【任何內容都可以作為超鏈接使用】但是除了本身。
3.p元素不可以包含其他的塊元素。

2.5 css中的選擇器

2.5.1基礎選擇器

2.5.1.1 元素選擇器

標簽選擇器：選擇具有相同標簽名的元素
語法：標簽名{css樣式}

例:

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

    <style type="text/css">
        p{
          background-color:pink;
        }

        h4{
            background-color:green;
        }
    </style>
</head>
<body>
    <p>鋤禾日當午</p>
    <p>鋤禾日當午</p>
    <p>鋤禾日當午</p>
   
    <h4>汗滴禾下土</h4>
    <h4>汗滴禾下土</h4>
    <h4>汗滴禾下土</h4>
</body>
</html>

2.5.1.2 id選擇器

id選擇器：根據id的值選擇到對應的元素
語法：#id屬性值{css樣式}

在同一個頁面中 id屬性值需要保證唯一。

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

    <style type="text/css">
        #d1{
          color:red;
        }

        #d2{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p>鋤禾日當午</p>
    <p>鋤禾日當午</p>
    <p id="d1">鋤禾日當午3</p>
    <p>鋤禾日當午</p>
    <p>鋤禾日當午</p>
    <p>鋤禾日當午</p>
    <p>鋤禾日當午</p>

    <h4>汗滴禾下土</h4>
    <h4 id="d2">汗滴禾下土2</h4>
    <h4>汗滴禾下土</h4>
    <h4>汗滴禾下土</h4>
    <h4>汗滴禾下土</h4>
</body>
</html>

2.5.1.3 類選擇器

類選擇器：選擇具有相同class屬性值的一類元素【class屬性值可以重復】
語法：.class屬性值{css樣式}

例：

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

    <style type="text/css">
        .c1{
            color: yellow;
            font-size: 60px;
        }
    </style>
</head>
<body>
    <p>鋤禾日當午</p>
    <p>鋤禾日當午</p>
    <p id="d1">鋤禾日當午3</p>
    <p>鋤禾日當午4</p>
    <p>鋤禾日當午</p>
    <p class="c1">鋤禾日當午AAA</p>
    <p>鋤禾日當午</p>

    <h4>汗滴禾下土</h4>
    <h4 id="d2">汗滴禾下土2</h4>
    <h4>汗滴禾下土</h4>
    <h4>汗滴禾下土</h4>
    <h4 class="c1">汗滴禾下土AAA</h4>
</body>
</html>

注意：

優先級：id選擇器 > 類選擇器  > 標簽選擇器

2.5.2 擴展選擇器

2.5.2.1 選擇所有元素

*號表示通配符,能選擇到頁面中的所有元素

*{
    css樣式
}

2.5.2.2 并集選擇器

語法:選擇器1,選擇器2....{css樣式}
多個選擇器之間使用逗號隔開

2.5.2.3 子選擇器[后代選擇器]

祖先元素 后代元素{
	css樣式
}

2.5.2.4 父選擇器

選擇器1(父)> 選擇器2(子){
 	css樣式;
}

2.5.2.5 屬性選擇器

元素名稱[屬性="屬性值"]{
	css樣式;
}

2.6 css的屬性

2.6.1 文字屬性

color:文字顏色 red green #00ff00 rgb(0,255,0);
font-size:文字大小
font-family：字體
text-align:文字的對齊方式：left center right
text-decoration：文字的下劃線屬性:none沒有下劃線 underline表示有下劃線
line-height:行高

2.6.2 背景屬性

background-color:設置背景顏色
background-image:設置背景圖片
background-repeat：設置背景圖片的平鋪方式

no-repeat：不平鋪
repeat-x:橫向平鋪
repeat-y:縱向平鋪
repeat:平鋪

2.6.3 尺寸屬性

width:設置元素的寬度
height:設置元素的高度

2.6.4 列表屬性;

list-style-type 設置列表項前面的標識
list-style-image:設置列表項前面的圖片:url:指定圖片的路徑

2.6.5 顯示屬性

display:設置內容隱藏或者顯示

none:表示隱藏
inline:表示顯示,行級顯示
block:表示顯示,換行顯示

2.6.6 浮動屬性

float:浮動屬性 left right
clear:清除浮動 left right both

2.6.7 邊框屬性

border-width:邊框粗細
border-color:邊框顏色
border-style:邊框線型：solid(實線) dotted(點線) dashed(虛線)
border:同時設置粗細顏色線型
邊框是一個復合屬性,可以單獨設置某一個條邊框

posted @ 2025-07-27 15:52 汣姒閱讀(23) 評論(0) 收藏舉報

刷新頁面返回頂部

jiusi-94