CSS基礎篇（一）

RoddyLD發表於2020-12-19

CSS

CSS基礎篇（一）

一、什麼是 CSS?

CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示HTML元素
樣式通常儲存在樣式表中
把樣式新增到 HTML4.0 中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常儲存在 CSS檔案中

二、樣式表的分類?

行內樣式

第一階段行內樣式表（首次提出結構和樣式相分離)
用法：在標籤內新增一個style屬性

內部樣式

第二階段內部樣式表
用法：在head標籤裡面新增一個style標籤

外部樣式

第三階段外部樣式表（完全實現了結構和樣式的相分離）
用法：在外部新建一個CSS為字尾的檔案然後使用link標籤進行引入。

三種樣式優先順序

行內樣式>內部樣式
行內樣式>外部樣式
內部樣式（style）與外部樣式（link）誰在後面誰的優先順序越高，也就執行誰的樣式，通常可以理解為就近顯示原則
執行順序：從上到下執行，同樣的屬性優先順序高的會覆蓋優先順序低的
程式碼如下（示例）：

//內部樣式與外部樣式的優先順序比較
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            font-size: 20px;
            color: green;
            background-color: red;
        }
    </style>
    <link rel="stylesheet" href="1.css">
</head>
<body>
    <span>內部樣式與外部樣式的優先順序比較</span>
</body>
</html>

1.css中的程式碼

span{
    font-size: 10px;
    color: blue;
}

瀏覽器執行結果如下：

在這裡插入圖片描述

由此可以看出，誰的樣式在後面誰的優先順序越高，同樣的屬性優先順序高的會覆蓋優先順序低的；不同的屬性，不管它的優先順序是高還是低都會顯示出來

顏色表示法

單詞表示法（例如：red、green、blue等）
十六進位制表示法（使用#開頭）
RGB三原色表示法（範圍0-255）
RGBA表示法（在RGB基礎上新新增了a,a是透明度的含義，a的取值範圍是0-1）

程式碼如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            color: red;
        }
        .div2{
            color: #0000FF;
        }
        .div3{
            color: rgb(0, 255,0);
        }
        .div4{
            color: rgba(0, 255,0,0.3);
        }
    </style>
</head>
<body>
    <div class="div1">這是用單詞表示法顯示文字的顏色</div>
    <div class="div2">這是用十六進位制表示法顯示文字的顏色</div>
    <div class="div3">這是用RGB三原色表示法顯示文字的顏色</div>
    <div class="div4">這是用RGBA表示法顯示文字的顏色</div>
</body>
</html>

瀏覽器執行結果如下：
在這裡插入圖片描述

背景樣式

background-color 背景顏色
background-image 背景圖片（ url（裡面填的是背景地址））
background-repeat 背景圖片平鋪

repeat 預設X Y都平鋪
repeat-x 橫向平鋪
repeat-y 縱向平鋪
no-repeat 不平鋪

background-size 背景圖片大小

value1 value2 （寫確切的數值）
% % 寬高（寫百分比的形式）
cover 等比放大鋪滿全部區域為止
contain 等比放大直到背景影像的右邊或者下邊停止

程式碼如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            height: 100px;
            width: 100px;
            background-color: skyblue;
        }
        .div2{
            height: 200px;
            width: 200px;
            border: 1px solid red;
            /* 上面一行程式碼的含義是給div2設定一個寬度為1px、顏色為紅色的實線 */
            background-image: url(狗.jpg);
        }
        .div3{
            height: 300px;
            width: 300px;
            border: 1px solid red;
            background-image: url(狗.jpg);
            background-repeat: no-repeat;
            /*  no-repeat    不平鋪
                repeate      預設x,y都平鋪
                repeat-x     橫向平鋪
                repeat-y     縱向平鋪    */
        }
        .div4{
            height: 400px;
            width: 400px;
            border: 1px solid red;
            background-image: url(狗.jpg);
            background-repeat: no-repeat;
            background-size: 350px,350px;
            /* 上面一行是設定背景圖片的大小 */
        }
    </style>
</head>
<body>
    <div class="div1">這是給div1設定背景顏色</div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</body>
</html>

瀏覽器執行結果如下：
在這裡插入圖片描述

字型樣式

font-size 屬性設定文字的大小。
font-family 屬性設定文字的字型型別。
font-style主要是用於指定斜體文字的字型樣式屬性。字型傾斜(font-style:italic)
color 字型顏色
font-weight 字型得的粗細取值範圍是（100-900）數值越大加粗越明顯，bold等同900效果
text-decoration: 設定字型劃線

none 取消文字下劃線，一般用在取消超連結自帶的下劃線上。
underline 下劃線
overline 上劃線
line-through 中劃線

text-indent: 2em; 首行文字縮排2箇中文字元
text-align 文字的水平對齊方式（center:居中；left:左對齊；right：右對齊）
line-height 文字的垂直對齊方式（當一行的行高等於父級的高度的時候就會產生垂直居中的一個效果）
letter-spacing 設定字型間隙

程式碼如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div2{
            font-size:20px;
            font-family:"宋體";
            font-style:italic;
        }
        .div3{
            font-size:25px;
            font-family:"仿宋";
            color:red;
        }
        .div4{
            font-size:25px;
            font-family:"仿宋";
            color:red;
            font-weight:bold;
        }
        .div5{
            text-decoration: underline;
            text-indent: 1em;
        }
        .div6{
            text-decoration: overline;
            text-indent: 2em;
        }
        .div7{
            text-decoration: line-through;
            text-indent: 3em;
        }
    </style>
</head>
<body>
    <div class="div1">這是一段沒有設定任何樣式的div標籤</div>
    <div class="div2">font-size:20px;（文字大小）font-family:"宋體";（文字型別）font-style:italic;（文字傾斜）</div>
    <div class="div3">font-size:25px;font-family:"仿宋";color:red;（文字顏色）</div>
    <div class="div4">font-size:25px;font-family:"仿宋";color:red;（文字顏色）;font-weight:bold;（字型加粗）</div>
    <div class="div5">這是設定了字型下劃線，首行文字縮排1箇中文字元的一段內容</div>
    <div class="div6">這是設定了字型上劃線，首行文字縮排2箇中文字元的一段內容</div>
    <div class="div7">這是設定了字型中劃線，首行文字縮排3箇中文字元的一段內容</div>
</body>
</html>

瀏覽器執行結果如下：
在這裡插入圖片描述
程式碼如下（示例）：

// 設定文字的水平垂直位置和文字的字型間隙
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            text-align: center;
        }
        .div2{
            text-align: center;
            letter-spacing:2px;
        }
        .div3{
            text-align: center;
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 為了使水平垂直效果明顯，我們給該div設定了寬度高度和背景顏色 */
            line-height: 200px;
            /* 當一行的行高等於父級的高度的時候 就會產生垂直居中的一個效果 */
        }
    </style>
</head>
<body>
    <div class="div1">使用{text-align:center}讓文字對齊</div>
    <div class="div2">使用{text-align:center}讓文字對齊,並且設定字型之間的間隙為2px</div>
    <div class="div3">文字水平垂直居中</div>
</body>
</html>

瀏覽器執行結果如下：
在這裡插入圖片描述

CSS中的基礎選擇器

標籤選擇器

 直接寫上標籤名

id選擇器

 1.在標籤中設定一個通用屬性 id  並且給好id名
 2.在樣式表中   通過  #id名{}  進行使用
 *注意*：
    1.id選擇器是唯一的，但是這個唯一不是說一個id名只能出現一次，而是說一個標籤裡面只能有id名
    2.要注意按照程式設計規範，id名在一個檔案中有且只有一個（存在）

類選擇器

 又稱class選擇器
 1.在標籤中設定一個通用屬性class  並且給好類名
 2.在樣式表中  通過 .class名{}  進行使用
 *注意*
    class選擇器 可以有多個類名  不同類名可以寫不同的樣式

萬用字元選擇器

 可以改變所有標籤的樣式 用法：  *{}

優先順序

    id選擇器  >  類選擇器 （class） > 標籤   >  萬用字元選擇器（*）

選擇器的命名規範

 1.  要做到見名知意,採用駝峰式命名，可以使用字母、數字、下劃線（_）、短線（-）相結合命名
 2.  不能以數字開頭(class選擇器必須以字母開頭)
 3.  不能用中文字元

前端基礎面試題@CSS篇
2018-05-14
前端面試題CSS
css預編譯--sass基礎篇
2018-05-14
CSS編譯
【基礎篇索引】索引基礎（一）
2010-07-07
索引
HTML/CSS基礎課程筆記————CSS結束篇
2021-09-09
HTMLCSS筆記
vue系列基礎篇（一）
2018-08-29
Vue
前端開發基礎知識整理–css篇
2018-03-09
前端CSS
CSS——CSS基礎(1)
2022-07-07
CSS
W3school的CSS筆記(基礎篇）
2019-02-12
CSS筆記
Html與css基礎知識介紹(必看篇)
2019-01-14
HTMLCSS
Java面試題-基礎篇一
2019-04-04
Java面試題
JS基礎入門篇（一）
2019-02-16
JS
影像處理基礎篇（一）
2020-10-08
JS基礎入門篇（一）
2018-05-27
JS
Java面試題基礎篇（一）
2018-03-28
Java面試題
NIO相關基礎篇一
2017-12-11
基礎篇
2009-11-23
【WEB基礎】HTML & CSS 基礎入門（9）CSS盒子
2019-05-30
WebHTMLCSS
好程式設計師web前端分享CSS基礎篇
2019-04-29
程式設計師Web前端CSS
iOS逆向之旅（基礎篇） — 彙編（一）— 彙編基礎
2018-10-25
iOS
前端基礎_CSS
2019-03-02
前端CSS
CSS基礎分享
2021-07-13
CSS
css基礎1
2024-09-28
CSS
css基礎2
2024-09-29
CSS
一起學 TypeScript 基礎篇
2019-11-21
TypeScript
Dagger2基礎篇（一）
2018-08-16
深入淺出RxJava(一：基礎篇)
2016-04-27
RxJava
bootstrap基礎學習一篇
2016-02-26
boot
CSS基礎篇–CSS3圖片翻轉動畫技術詳解
2018-03-29
CSSS3動畫
【基礎篇索引】索引基礎（四）
2010-07-14
索引
【基礎篇索引】索引基礎（三）
2010-07-10
索引
【基礎篇索引】索引基礎（二）
2010-07-08
索引
vuex - 基礎篇
2019-02-26
Vue
Docker|基礎篇
2019-04-13
Docker
Maven——基礎篇
2021-07-06
Maven
Git——基礎篇
2021-07-11
Git
Hbase基礎篇
2018-08-22
Java基礎篇
2020-11-15
Java
redis基礎篇
2020-10-13
Redis

CSS基礎篇（一）