返回頂部

扶搖直上九萬里，展翅高飛豈可待。

CSS

CSS 層疊樣式表，能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力 ,簡單來說,美化頁面

1 CSS引入方式

1 行內式,通過元素開始標簽的style屬性引入, 樣式語法為樣式名:樣式值; 樣式名:樣式值;

代碼

    <input 
        type="button" 
        value="按鈕"
        style="
            display: block;
            width: 60px; 
            height: 40px; 
            background-color: rgb(140, 235, 100); 
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隸書';
            line-height: 30px;
            border-radius: 5px;
    "/>

效果

缺點
- html代碼和css樣式代碼交織在一起,增加閱讀難度和維護成本
- css樣式代碼僅對當前元素有效,代碼重復量高,復用度低

2 內嵌式

代碼

<head>
    <meta charset="UTF-8">
    <style>
        /* 通過選擇器確定樣式的作用范圍 */
        input {
            display: block;
            width: 80px; 
            height: 40px; 
            background-color: rgb(140, 235, 100); 
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隸書';
            line-height: 30px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <input type="button" value="按鈕1"/> 
    <input type="button" value="按鈕2"/> 
    <input type="button" value="按鈕3"/> 
    <input type="button" value="按鈕4"/> 
</body>

效果

說明
- 內嵌式樣式需要在head標簽中,通過一對style標簽定義CSS樣式
- CSS樣式的作用范圍控制要依賴選擇器
- CSS的樣式代碼中注釋的方式為 /* */
- 內嵌式雖然對樣式代碼做了抽取,但是CSS代碼仍然在html文件中
- 內嵌樣式僅僅能作用于當前文件,代碼復用度還是不夠,不利于網站風格統一

3 連接式/外部樣式表

可以在項目單獨創建css樣式文件,專門用于存放CSS樣式代碼
在head標簽中,通過link標簽引入外部CSS樣式即可

<head>
    <meta charset="UTF-8">
    <link href="css/buttons.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <input type="button" value="按鈕1"/> 
    <input type="button" value="按鈕2"/> 
    <input type="button" value="按鈕3"/> 
    <input type="button" value="按鈕4"/> 
</body>

說明
- CSS樣式代碼從html文件中剝離,利于代碼的維護
- CSS樣式文件可以被多個不同的html引入,利于網站風格統一

2 CSS選擇器

1 元素選擇器

代碼

<head>
    <meta charset="UTF-8">
   <style>
    input {
        display: block;
        width: 80px; 
        height: 40px; 
        background-color: rgb(140, 235, 100); 
        color: white;
        border: 3px solid green;
        font-size: 22px;
        font-family: '隸書';
        line-height: 30px;
        border-radius: 5px;
    }
   </style>
</head>
<body>
    <input type="button" value="按鈕1"/> 
    <input type="button" value="按鈕2"/> 
    <input type="button" value="按鈕3"/> 
    <input type="button" value="按鈕4"/> 
    <button>按鈕5</button>
</body>

效果

說明
- 根據標簽名確定樣式的作用范圍
- 語法為元素名 {}
- 樣式只能作用到同名標簽上,其他標簽不可用
- 相同的標簽未必需要相同的樣式,會造成樣式的作用范圍太大

2 id選擇器

代碼

<head>
    <meta charset="UTF-8">
   <style>
    #btn1 {
        display: block;
        width: 80px; 
        height: 40px; 
        background-color: rgb(140, 235, 100); 
        color: white;
        border: 3px solid green;
        font-size: 22px;
        font-family: '隸書';
        line-height: 30px;
        border-radius: 5px;
    }
   </style>
</head>
<body>
    <input id="btn1" type="button" value="按鈕1"/> 
    <input id="btn2" type="button" value="按鈕2"/> 
    <input id="btn3" type="button" value="按鈕3"/> 
    <input id="btn4" type="button" value="按鈕4"/> 
    <button id="btn5">按鈕5</button>
</body>

效果

說明
- 根據元素id屬性的值確定樣式的作用范圍
- 語法為 #id值 {}
- id屬性的值在頁面上具有唯一性,所有id選擇器也只能影響一個元素的樣式
- 因為id屬性值不夠靈活,所以使用該選擇器的情況較少

3 class選擇器

代碼

<head>
    <meta charset="UTF-8">
   <style>
    .shapeClass {
        display: block;
        width: 80px; 
        height: 40px; 
        border-radius: 5px;
    }
    .colorClass{
        background-color: rgb(140, 235, 100); 
        color: white;
        border: 3px solid green;
    }
    .fontClass {
        font-size: 22px;
        font-family: '隸書';
        line-height: 30px;
    }

   </style>
</head>
<body>
    <input  class ="shapeClass colorClass fontClass"type="button" value="按鈕1"/> 
    <input  class ="shapeClass colorClass" type="button" value="按鈕2"/> 
    <input  class ="colorClass fontClass" type="button" value="按鈕3"/> 
    <input  class ="fontClass" type="button" value="按鈕4"/> 
    <button class="shapeClass colorClass fontClass" >按鈕5</button>
</body>

效果

說明
- 根據元素class屬性的值確定樣式的作用范圍
- 語法為 .class值 {}
- class屬性值可以有一個,也可以有多個,多個不同的標簽也可以是使用相同的class值
- 多個選擇器的樣式可以在同一個元素上進行疊加
- 因為class選擇器非常靈活,所以在CSS中,使用該選擇器的情況較多

3 CSS浮動

CSS 的 Float（浮動）使元素脫離文檔流，按照指定的方向（左或右發生移動），直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動設計的初衷為了解決文字環繞圖片問題，浮動后一定不會將文字擋住，這是設計初衷。

1 浮動的樣式名:float

通過代碼感受浮動的效果

代碼

<head>
    <meta charset="UTF-8">
   <style>
    .outerDiv {
        width: 500px;
        height: 300px;
        border: 1px solid green;
        background-color: rgb(230, 224, 224);
    }
    .innerDiv{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
        float: left;
    }
    .d1{
        background-color: greenyellow;
       /*  float: right; */
    }
    .d2{
        background-color: rgb(79, 230, 124);
    }
    .d3{
        background-color: rgb(26, 165, 208);
    }
   </style>
</head>
<body>
   <div class="outerDiv">
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
   </div> 
</body>

效果

4 CSS定位

position 屬性指定了元素的定位類型。

這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。
元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非是先設定position屬性。他們也有不同的工作方式，這取決于定位方法。

1 靜態定位

說明
- 不設置的時候的默認值就是static，靜態定位，沒有定位，元素出現在該出現的位置，塊級元素垂直排列，行內元素水平排列
代碼

<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{
                width: 100px;
                height: 100px;
        }
        .d1{
            background-color: rgb(166, 247, 46);
            position: static;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
</body>

效果

2 絕對定位

說明
- absolute ,通過 top left right bottom 指定元素在頁面上的固定位置
- 定位后元素會讓出原來位置,其他元素可以占用
代碼

<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{
                width: 100px;
                height: 100px;
        }
        .d1{
            background-color: rgb(166, 247, 46);
            position: absolute;
            left: 300px;
            top: 100px;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
</body>

效果

3 相對定位

說明
- relative 相對于自己原來的位置進行地位
- 定位后保留原來的站位,其他元素不會移動到該位置
代碼

<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{
                width: 100px;
                height: 100px;
        }
        .d1{
            background-color: rgb(166, 247, 46);
            position: relative;
            left: 30px;
            top: 30px;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
</body>

效果

4 固定定位

說明
- fixed 失蹤在瀏覽器窗口固定位置,不會隨著頁面的上下移動而移動
- 元素定位后會讓出原來的位置,其他元素可以占用
代碼

<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{
                width: 100px;
                height: 100px;
        }
        .d1{
            background-color: rgb(166, 247, 46);
            position: fixed;
            right: 30px;
            top: 30px;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
    </style>
</head>
<body>
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
        br*100+tab
</body>

效果

5 CSS盒子模型

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

說明：
- Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
- Border(邊框) - 圍繞在內邊距和內容外的邊框。
- Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
- Content(內容) - 盒子的內容，顯示文本和圖像。
代碼

    <head>
        <meta charset="UTF-8">
       <style>
        .outerDiv {
            width: 800px;
            height: 300px;
            border: 1px solid green;
            background-color: rgb(230, 224, 224);
            margin: 0px auto;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            float: left;
            /* margin-top: 10px;
            margin-right: 20px;
            margin-bottom: 30px;
            margin-left: 40px; */
            margin: 10px 20px 30px 40px;
           
        }
        .d1{
            background-color: greenyellow;
            /* padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 40px; */
            padding: 10px 20px 30px 40px;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
       </style>
    </head>
    <body>
       <div class="outerDiv">
            <div class="innerDiv d1">框1</div>
            <div class="innerDiv d2">框2</div>
            <div class="innerDiv d3">框3</div>
       </div> 
    </body>

效果

在瀏覽器上,通過F12工具查看盒子模型狀態

posted @ 2025-04-08 22:50 朱嘯毅閱讀(16) 評論(0) 收藏舉報

刷新頁面返回頂部

朱嘯毅

CSS

CSS

1 CSS引入方式

2 CSS選擇器

3 CSS浮動

4 CSS定位

5 CSS盒子模型

公告