武漢科技大學oj 零起點學演算法17

阿新 • • 發佈：2021-01-11

CSS入門

1_CSS概要
- 1.1_CSS引入方式
2_CSS選擇器
3_字型樣式
4_文字樣式
5_邊框
6_列表樣式
6.1_列表項符號（一般不使用此方法）：list-style-type
- 6.2_列表項圖片：list-style-image
7_表格
8_圖片樣式

1_CSS概要

1.1_CSS引入方式

（1）外部樣式表
（2）內部樣式表
（3）行內樣式表

外部樣式表
外部樣式表是最理想的CSS引入方式。所謂的外部樣式表，指的是把CSS程式碼和HTML程式碼都單獨放在不同檔案中

，然後在HTML文件中使用link標籤來引用CSS樣式表。
<link rel="stylesheet" type="text/css" href="檔案路徑" />

內部樣式表
內部樣式表，指的是把HTML程式碼和CSS程式碼放到同一個HTML檔案中。其中，CSS程式碼放在style標籤內，並且style標籤是放在head標籤內部的。
<style type="text/css"> …… </style>

行內樣式表
行內樣式表跟內部樣式表類似，也是把HTML程式碼和CSS程式碼放到同一個HTML檔案。但是兩者有著本質的區別：內部樣式表的CSS是在“style標籤”內定義的，而行內樣式表的CSS是在“標籤的style屬性”中定義的。

外部樣式表：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
</body>
</html>

內部樣式表：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        div{color:red;}
    </style>
</head>
<body>
    <div>綠葉，給你初戀般的感覺。</div>
    <div>綠葉，給你初戀般的感覺。</div>
    <div>綠葉，給你初戀般的感覺。</div>
</body>
</html>

行內樣式表：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <div style="color:red;">綠葉，給你初戀般的感覺。</div>
    <div style="color:red;">綠葉，給你初戀般的感覺。</div>
    <div style="color:red;">綠葉，給你初戀般的感覺。</div>
</body>
</html>

2_CSS選擇器

5種選擇器

3_字型樣式

3.1_字型屬性

表1 字型相關的CSS屬性

屬性	說明
font-family	字型型別
font-size	字型大小
font-weight	字型粗細
font-style	字型風格
color	字型顏色

3.2_字型型別：font-family

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #div1{font-family: Arial;} /*如果字型型別只有一個英文單詞，則不需要加上雙引號*/
        #div2{font-family: "Times New Roman";}
        #div3{font-family: "微軟雅黑";}
        #div4{font-family:Arial,Verdana,Georgia;}
    </style>
</head>
<body>
    <div id="div1">Arial</div>
    <div id="div2">Times New Roman</div>
    <div id="div3">微軟雅黑</div>
    <div id="div4">其實原因是這樣的：每個人的電腦裝的字型都不一樣，
    有些字型有安裝，但也有些字型沒有安裝。
    p{font-family:Arial,Verdana,Georgia;}這一句的意思是：
    p元素優先使用“Aria字型”來顯示，
    如果你的電腦沒有裝“Arial字型”，那就接著考慮“Verdana字型”。
    如果你的電腦還是沒有裝“Verdana字型”，那就接著考慮“Georgia字型”</div>
</body>
</html>

3.3_字型大小：font-size

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {font-size: 10px;}
        #p2 {font-size: 15px;}
        #p3 {font-size: 20px;}
    </style>
</head>
<body>
    <p id="p1">字型大小為10px</p>
    <p id="p2">字型大小為15px</p>
    <p id="p3">字型大小為20px</p>
</body>
</html>

3.4_字型粗細：font-weight

font-weight屬性取值有兩種：一種是“100~900的數值”；另外一種是“關鍵字”。其中，關鍵字取值如下表所示。

表1 font-weight屬性取值

屬性值	說明
normal	正常（預設值）
lighter	較細
bold	較粗（一般我們只會用到bold這一個屬性值）
bolder	很粗（其實效果跟bold差不多）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {font-weight: 100;}
        #p2 {font-weight: 400;}
        #p3{font-weight:bold;}
        #p4{font-weight:bolder;}
    </style>
</head>
<body>
    <p id="p1">字型粗細為:100（lighter）</p>
    <p id="p2">字型粗細為:400（normal）</p>
    <p id="p3">字型粗細為:700（bold）</p>
    <p id="p4">字型粗細為:900（bolder）</p>
</body>
</html>

3.5_字型顏色：color

color屬性取值有兩種：**一種是“關鍵字”、另外一種是“16進位制RGB值”。**除了這兩種，其實還有RGBA、HSL等，不過後面那幾個都是屬於CSS3的內容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{color:gray;}
        #p2{color: #048C02;}
    </style>
</head>
<body>
    <p id="p1">字型顏色為灰色</p>
    <p id="p2">#048C02</p>
</body>
</html>

3.6_總結

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p{
            font-family:Arial,Verdana,Georgia;
            color:blue;
            font-size:14px;
            font-weight:bolder;
        }
    </style>
</head>
<body>
    <p>“有規劃的人生叫藍圖，沒規劃的人生叫拼圖。</p>
</body>
</html>

4_文字樣式

4.1_文字樣式屬性

表1 文字樣式屬性

屬性	說明
text-indent	首行縮排
text-align	水平對齊
text-decoration	文字修飾
text-transform	大小寫轉換
line-height	行高
letter-spacing	字母間距
word-spacing	詞間距

4.2_首行縮排：text-indent

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p
        {
            font-size:14px;
            text-indent:28px;/*首行縮排28畫素*/
        }
    </style>
</head>
<body>
    <h3>愛蓮說</h3>
    <p>水陸草木之花，可愛者甚蕃。晉陶淵明獨愛菊。自李唐來，世人甚愛牡丹。予獨愛蓮之出淤泥而不染，濯清漣而不妖，中通外直，不蔓不枝，香遠益清，亭亭淨植，可遠觀而不可褻玩焉。</p>
    <p>予謂菊，花之隱逸者也；牡丹，花之富貴者也；蓮，花之君子者也。噫！菊之愛，陶後鮮有聞；蓮之愛，同予者何人? 牡丹之愛，宜乎眾矣。</p>
</body>
</html>

4.3_水平對齊：text-align

表1 text-align屬性取值

屬性值	說明
left	左對齊（預設值）
center	居中對齊
right	右對齊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{text-align:left;}
        #p2{text-align:center;}
        #p3{text-align:right;}
    </style>
</head>
<body>
    <p id="p1"><strong>左對齊</strong>:好好學習，天天向上。</p>
    <p id="p2"><strong>居中對齊</strong>:好好學習，天天向上。</p>
    <p id="p3"><strong>右對齊</strong>:好好學習，天天向上。</p>
</body>
</html>

4.4_文字修飾（劃線）：text-decoration

表1 text-decoration屬性取值

屬性值	說明
none	去除所有的劃線效果（預設值）
underline	下劃線
line-through	中劃線
overline	頂劃線

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{text-decoration:underline;}
        #p2{text-decoration:line-through;}
        #p3{text-decoration:overline;}
    </style>
</head>
<body>
    <p id="p1">這是“下劃線”效果</p>
    <p id="p2">這是“刪除線”效果</p>
    <p id="p3">這是“頂劃線”效果</p>
</body>
</html>

4.5_大小寫：text-transform

在CSS中，我們可以使用text-transform屬性來將文字進行大小寫轉換。text-transform屬性是針對英文而言，因為中文不存在大小寫之分。

表1 text-transform屬性取值

屬性值	說明
none	無轉換（預設值）
uppercase	轉換為大寫
lowercase	轉換為小寫
capitalize	只將每個英文單詞首字母轉換為大寫

4.6_行高：line-height

line-height屬性涉及的理論知識非常多，也極其重要，這一節只是簡單接觸一下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{line-height:15px;}
        #p2{line-height:20px;}
        #p3{line-height:25px;}
    </style>
</head>
<body>
    <p id="p1">水陸草木之花，可愛者甚蕃。晉陶淵明獨愛菊。自李唐來，世人甚愛牡丹。予獨愛蓮之出淤泥而不染，濯清漣而不妖，中通外直，不蔓不枝，香遠益清，亭亭淨植，可遠觀而不可褻玩焉。</p><hr/>
    <p id="p2">水陸草木之花，可愛者甚蕃。晉陶淵明獨愛菊。自李唐來，世人甚愛牡丹。予獨愛蓮之出淤泥而不染，濯清漣而不妖，中通外直，不蔓不枝，香遠益清，亭亭淨植，可遠觀而不可褻玩焉。</p><hr/>
    <p id="p3">水陸草木之花，可愛者甚蕃。晉陶淵明獨愛菊。自李唐來，世人甚愛牡丹。予獨愛蓮之出淤泥而不染，濯清漣而不妖，中通外直，不蔓不枝，香遠益清，亭亭淨植，可遠觀而不可褻玩焉。</p>
</body>
</html>

4.7_間距：letter-spacing、word-spacing

字間距
letter-spacing: 畫素值;

詞間距
word-spacing: 畫素值;

字間距：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{letter-spacing:0px;}
        #p2{letter-spacing:3px;}
        #p3{letter-spacing:5px;}
    </style>
</head>
<body>
    <p id="p1">Rome was't built in a day.羅馬不是一天建成的。</p><hr/>
    <p id="p2">Rome was't built in a day.羅馬不是一天建成的。</p><hr/>
    <p id="p3">Rome was't built in a day.羅馬不是一天建成的。</p>
</body>
</html>

詞間距：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{word-spacing:0px;}
        #p2{word-spacing:3px;}
        #p3{word-spacing:5px;}
    </style>
</head>
<body>
    <p id="p1">Rome was't built in a day.羅馬不是一天建成的。</p><hr/>
    <p id="p2">Rome was't built in a day.羅馬不是一天建成的。</p><hr/>
    <p id="p3">Rome was't built in a day.羅馬不是一天建成的。</p>
</body>
</html>

5_邊框

5.1_邊框的屬性

想要為一個元素定義邊框樣式，必須要同時設定border-width、border-style、border-color屬性才會有效果。

表1 邊框樣式屬性

屬性	說明
border-width	邊框的寬度
border-style	邊框的外觀
border-color	邊框的顏色

5.2_邊框屬性詳細使用

border-width
border-width屬性用於定義邊框的寬度，取值是一個畫素值。

border-style
border-style屬性用於定義邊框的外觀，常用取值如下表所示。

表1 border-style屬性取值

屬性值	說明
none	無樣式
dashed	虛線
solid	實線

除了上表列出這幾個，還有hidden、dotted、double等取值。不過其他取值幾乎用不上，可以直接忽略

border-color
border-color屬性用於定義邊框的顏色，取值可以是“關鍵字”或“16進位制RGB值”。

簡寫形式：

border: 1px solid red;

5.3_區域性樣式

一個元素其實有4條邊（上、下、左、右），上一節我們學習的是4條邊的整體樣式。那麼如果想要對某一條邊進行單獨設定，這該怎麼實現呢？

在這裡插入圖片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width: 100px;                       /*div元素寬為100px*/
            height: 60px;                       /*div元素高為60px*/
            border-top: 2px solid red;          /*上邊框樣式*/
            border-right: 2px solid yellow;     /*右邊框樣式*/
            border-bottom: 2px solid blue;      /*下邊框樣式*/
            border-left: 2px solid green;       /*左邊框樣式*/
         }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

6_列表樣式

6.1_列表項符號（一般不使用此方法）：list-style-type

在CSS中，不管是有序列表還是無序列表，我們都是使用list-style-type屬性來定義列表項符號。
語法：
list-style-type: 取值;

表1去除列表項符號

屬性值	說明
none	無符號由於列表項符號比較醜，因此在實際開發中，大多數情況下我們都需要使用list-style-type:none;去掉。

表2 ol的list-style-type屬性取值

屬性值	說明
decimal	阿拉伯數字：1、2、3…（預設值）
lower-roman	小寫羅馬數字：i、ii、iii…
upper-roman	大寫羅馬數字：I、II、III…
lower-alpha	小寫英文字母：a、b、c…
upper-alpha	大寫英文字母：A、B、C…

表1 ul的list-style-type屬性取值

屬性值	說明
disc	實心圓●（預設值）
circle	空心圓○
square	正方形■

6.2_列表項圖片：list-style-image

在CSS中，我們可以使用list-style-image屬性來定義列表項圖片，也就是使用圖片來代替列表項符號。
語法：
list-style-image: url(圖片路徑);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ul{list-style-image: url(img/leaf.png);}
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

list-style-image屬性實際上就是把列表項符號改為一張圖片，而引用一張圖片就要給出圖片的路徑。在真正的開發專案中，一般情況下我們都不會用list-style-image屬性來實現，而是使用更為高階的iconfont圖示技術來實現，這個自行百度。

7_表格

7.1_表格標題位置

預設情況下，表格標題是在表格的上方。如果想要把表格標題放在表格的下方，應該怎麼去實現呢？
在CSS中，我們可以使用caption-side屬性來定義表格標題的位置。
語法：
caption-side: 取值;

表1 caption-side屬性取值

屬性值	說明
top	標題在頂部（預設值）
bottom	標題在底部

7.2_表格邊框合併：border-collapse

從前面的學習中可以知道，表格加入邊框後的頁面效果中，單元格之間是有一定空隙的。但是在實際開發中，為了讓表格更加美觀，我們都是要把單元格之間的空隙去除。
在CSS中，我們可以使用border-collapse屬性來去除單元格之間的空隙，也就是將兩條邊框合併為一條。
語法：
border-collapse: 取值;

表1 border-collapse屬性取值

屬性值	說明
separate	邊框分開，有空隙（預設值）
collapse	邊框合併，無空隙

7.3_表格邊框間距：border-spacing

上一節介紹瞭如何去除表格邊框間距，但是在實際開發中，有時候我們卻需要定義一下表格邊框的間距。
在CSS中，我們可以使用border-spacing屬性來定義表格邊框間距。
語法：
border-spacing: 畫素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,th,td{border:1px solid silver;}
        table{border-spacing: 8px;}/**/
    </style>
</head>
<body>
    <table>
        <caption>表格標題</caption>
        <!--表頭-->
        <thead>
            <tr>
                <th>表頭單元格1</th>
                <th>表頭單元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>錶行單元格1</td>
                <td>錶行單元格2</td>
            </tr>
        </tbody>
        <!--表腳-->
        <tfoot>
            <tr>
                <td>錶行單元格5</td>
                <td>錶行單元格6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

8_圖片樣式

8.1_圖片大小

語法：
width: 畫素值;height: 畫素值;

8.2_圖片邊框：border

語法
border: 1px solid red;

8.3_圖片或文字對齊：text-align

水平對齊
text-align屬性一般只用於兩個地方：文字水平對齊和圖片水平對齊。
語法：
text-align: 取值;
很多人以為圖片的水平對齊是在img元素中定義，其實這是錯的。圖片是在父元素中進行水平對齊，因此我們當然是在圖片的父元素中定義啦。

表1 text-align屬性取值

屬性值	說明
left	左對齊（預設值）
center	居中對齊
right	右對齊

垂直對齊
語法：
vertical-align: 取值;

表2 vertical-align屬性取值

屬性值	說明
top	頂部對齊
middle	中部對齊
baseline	基線對齊
bottom	底部對齊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img{ width: 60px; height: 60px; }
        #img1{ vertical-align: top; }
        #img2{ vertical-align: middle; }
        #img3{ vertical-align: bottom; }
        #img4{ vertical-align: baseline; }
    </style>
</head>
<body>
    綠葉學習網<img id="img1" src="img/girl.gif" alt=""/>綠葉學習網（top）
    <hr/>
    綠葉學習網<img id="img2" src="img/girl.gif" alt=""/>綠葉學習網（middle）
    <hr/>
    綠葉學習網<img id="img3" src="img/girl.gif" alt=""/>綠葉學習網（bottom）
    <hr/>
    綠葉學習網<img id="img4" src="img/girl.gif" alt=""/>綠葉學習網（baseline）
</body>
</html>