CSS3-02 樣式 1

時間 2019-12-09

標籤 css3 css 樣式欄目 CSS 简体版

原文原文鏈接

概述

上一篇博客中，概述瞭如何在 HTML 文檔中使用 CSS，以及如何選擇 HTML 元素，而且在文檔的最後以表格的形式給出了 CSS 中全部的屬性。在接下來的這篇博客中，將闡述主要 HTML 元素的可控制 CSS 樣式，並以示例的方式展現如何使用 CSS 設置 HTML 元素的樣式。

一個 HTML 元素，默認狀況下是沒有渲染效果的，一般須要藉助 CSS 來賦予其華麗的樣式。可是 CSS 的屬性衆多，如何去學習，並在實踐中快速的運用這些屬性顯得尤其重要。接下來會對這些屬性，按照本身的思惟進行簡單的梳理，但願能夠拋磚引玉，啓發你們的思惟。

你們能夠思考一下：咱們使用 CSS 來幹什麼？設置 HTML 元素的樣式。在這裏我以爲 HTML 元素是首要的核心，然而展現在 Web 頁面上的 HTML 元素，是以一個個盒子的形式展現的。那麼咱們就首先來介紹一下盒模型，以此爲基礎逐漸地切入到 HTML 元素的樣式。

盒模型

如圖css

代碼html

HTML 文檔瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 連接到外部樣式表 -->
    <link rel="stylesheet" href="mystyle.css">
    <title>CSS 樣式（初級）</title>
</head>
<body>
    <!-- 盒模型 -->
    <div id="margin">Margin
        <div id="border">Border
            <div id="padding">padding
                <div id="content">Content
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS 文件學習

#margin
{
    background-color: lightgray;
    width: 500px;
    height: 350px;
    margin: 100px;
    padding-top: 10px;
    padding-left: 25px;
}
#border
{
    background-color: blue;
    width: 450px;
    height: 300px;
    padding-top: 10px;
    padding-left: 25px;
    text-align: center;
}
#padding
{
    background-color: orange;
    width: 400px;
    height: 250px;
    padding-top: 10px;
    padding-left: 25px;
    text-align: right;
}
#content
{
    background-color: white;
    width: 350px;
    height: 200px;
    padding-top: 10px;
    padding-left: 25px;
    text-align: left;
}

各個組件
- Margin：邊框外部包裹的區域，徹底透明
- Border：邊框，會受到盒子的背景顏色的影響
- Padding：元素內容與邊框之間填充的間距，會受到盒中填充的背景顏色的影響
- Content：盒子的內容，即元素的內容
注意
- 元素的高度計算公式
  - 元素的總寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
  - 元素的總高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

Margin

外邊距的可能取值
- 可變外邊距（不知這樣說是否恰當）
  - auto：基於瀏覽器自動調整外邊距
- 固定外邊距
  - 使用像素、pt、em
  - 使用百分比

設置外邊距的方式

簡寫

一個參數

做用：設置四個方向上的外邊距（四個方向上的外邊距爲同一個值）

代碼url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 連接到外部樣式表 -->
    <link rel="stylesheet" href="mystyle.css">
    <title>CSS 樣式（初級）</title>
</head>
<body>
    <div id="container">
        <div id="content">
            注意 外邊距的變化
        </div>
    </div>
</body>
</html>

body
{
    background-color: lightgray;
}
#content
{
    width: 300px;
    height: 230px;
    /*指定四個方向的外邊距都爲 25px*/
    margin: 25px;
    background-color: white;
}

兩個參數
- 做用：分別指定上下、左右兩個外邊距值（上下邊距值必須相等，左右邊距值必須相等）
- 代碼spa
```
#content
{
    width: 300px;
    height: 230px;
    margin: 25px 50px;
    background-color: white;
}
```
三個參數3d
- 做用：分別設置上、下、左右三個外邊距值（上下邊距值可不等，左右邊距值必須相等）
- 代碼code
```
#content
{
    width: 300px;
    height: 230px;
    margin: 25px 50px 100px;
    background-color: white;
}
```
四個參數htm
- 做用：設置上、下、左、右四個外邊距值（四個外邊距值都可不等）
- 代碼blog
```
#content
{
    width: 300px;
    height: 230px;
    margin: 25px 50px 100px 125px;
    background-color: white;
}
```

普通寫法

#content
{
    width: 300px;
    height: 230px;
    margin-top: 50px;
    margin-left: 60px;
    background-color: white;
}

Border

Border 的可設置屬性

樣式（border-style）、顏色（border-color）、寬度（border-width）

border-style

樣式	含義
dotted	點線框
dashed	虛線框
solid	實線框
double	上邊界，每一個邊界的寬度等於 border-width
groove	3D 溝槽邊框
ridge	3D 脊邊框
inset	3D的嵌入邊框
outset	3D突出邊框

border-color
- 邊框顏色的取值
  - name，顏色的名稱，如："red"
  - RGB，RGB 值，如：rgb(255,0,0)
  - Hex，16 進制值，如："#ff000"
- 注意
  - 必須首先設置 border-style 屬性，border-color 屬性的設置纔會有效果
border-width
- 邊框寬度的取值
  - 長度值，如：px、em 等
  - 關鍵字，如：thin，medium、thick。
- 注意
  - 表示寬度值得三個關鍵字，沒有固定的寬度，由瀏覽器的設置屬性決定。

示例

代碼

HTML 文檔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 連接到外部樣式表 -->
    <link rel="stylesheet" href="mystyle.css">
    <title>CSS 樣式（初級）</title>
</head>
<body>
    <div id="border1"></div>
    <br>
    <div id="border2"></div>
</body>
</html>

CSS 文件

#border1
{
    width: 100px;
    height: 80px;
    /*邊框 普通寫法*/
    border-style: solid;
    border-width: 2.5px;
    border-color: red;
}
#border2
{
    width: 100px;
    height: 80px;
    /*邊框 簡寫形式*/
    border: solid 2.5px red;
}

效果

邊框圓角（border-radius）

邊框圓角的取值
- 長度值，如：px、em 等

設置圓角的值

普通寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 連接到外部樣式表 -->
    <link rel="stylesheet" href="mystyle.css">
    <title>CSS 樣式（初級）</title>
</head>
<body>
    <div id="border1"></div>
    <br>
    <div id="border2"></div>
    <br>
    <div id="border3"></div>
    <br>
    <div id="border4"></div>
</body>
</html>

簡寫（四個值分別對應與：左上、右上、右下、左下）

#border1
{
    width: 60px;
    height: 35px;
    /*邊框 普通寫法*/
    border-style: solid;
    border-width: 2.5px;
    border-color: red;
    /*邊框圓角*/
    border-radius: 8px 3px 12px 20px;
}
#border2
{
    width: 60px;
    height: 35px;
    /*邊框 簡寫形式*/
    border: solid 2.5px red;
    /*邊框圓角*/
    border-radius: 8px 5px 20px;
}
#border3
{
    width: 60px;
    height: 35px;
    /*邊框 簡寫形式*/
    border: solid 2.5px red;
    /*邊框圓角*/
    border-radius: 8px 20px;
}
#border4
{
    width: 60px;
    height: 35px;
    /*邊框 簡寫形式*/
    border: solid 2.5px red;
    /*邊框圓角*/
    border-radius: 8px;
}

效果

邊框陰影（box-shadow）

語法

box-shadow: h-shadow v-shadow blur spread color inset;

各個屬性的含義

屬性	含義	可選
h-shadow	水平陰影的位置（能夠爲負值）	必需
v-shadow	垂直陰影的位置（能夠爲負值）	必需
blur	模糊距離	可選
spread	陰影的大小	可選
color	陰影的顏色	陰影的顏色
inset	從外層的陰影（開始時）改變陰影內側陰影	可選

示例

HTML 文檔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 連接到外部樣式表 -->
    <link rel="stylesheet" href="mystyle.css">
    <title>CSS 樣式（初級）</title>
</head>
<body>
    <div id="border1"></div>
</body>
</html>

CSS 文件

#border1
{
    width: 60px;
    height: 35px;
    /*邊框 普通寫法*/
    border-style: solid;
    border-width: 2.5px;
    border-color: red;
    /*邊框圓角*/
    border-radius: 8px 3px 12px 20px;
    box-shadow: 15px -8px 8px black;
}

效果

邊框圖片（border-img）

語法

border-image: source slice width outset repeat;

各個屬性的含義

屬性	含義
source	指定要用於繪製邊框的圖像的位置
slice	圖像邊界向內偏移
width	圖像邊界的寬度
outset	指定在邊框外部繪製 border-image-area 的量
repeat	如何延展和鋪排邊框圖像的邊緣和中間部分

repeat 屬性的取值

取值	含義
stretch	拉伸圖像來填充區域（默認值）
repeat	平鋪圖像來填充區域
round	相似 repeat 值。若是沒法完整平鋪全部圖像，則對圖像進行縮放以適應區域
space	相似 repeat 值。若是沒法完整平鋪全部圖像，擴展空間會分佈在圖像周圍
initial	將此屬性設置爲默認值
inherit	從父元素中繼承該屬性

示例(一個經典的例子)

HTML 文檔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 連接到外部樣式表 -->
    <link rel="stylesheet" href="mystyle.css">
    <title>CSS 樣式（初級）</title>
</head>
<body>
    <div id="border2"></div>
    <br>
    <div id="border3"></div>
    <br>
    <div id="border4"></div>
</body>
</html>

CSS 文件

#border2
{
    width: 100px;
    height: 70px;
    border-width: 30px;
    border-image: url("border.png") 30 30 round;
}
#border3
{
    width: 100px;
    height: 70px;
    border-width: 30px;
    border-image: url("border.png") 30 30;
}
#border4
{
    width: 100px;
    height: 70px;
    border-width: 30px;
    border-image: url("border.png") 90 90;
}

效果

Padding

概述
- Padding 使用來設置邊框與內容之間的填充區域。設置方式和規則與 Margin 相同，在此就不在贅述了。

領悟

由以上 Margin、Padding、Border 三個樣式的介紹，你是否發現了某些類似的地方。他們均可以設置不一樣方向上（上下左右，）的屬性值，在未指定特定方向的狀況下，默認按照順時針的方向匹配，且遵循中間對稱原則（即簡寫時，若只有三個值，則中間的那個值表示 左右（或 右上，左下） 兩個邊框的屬性值）。

你是否還發現他們有一些通用的屬性，好比說：width、color；並且還有一些特有屬性，好比說：border-style、border-image、border-radius。但願你對這些屬性逐漸地敏感起來，從而能夠推測出一些 HTML 元素所具備的屬性（儘管你不肯定）。好比說：對於文本（包含文本的 HTML 元素，好比：<p>），都具備 color、font-size、font-family 等屬性。不要問我問什麼，這是常識。

你是否感受到 Margin、Padding、Border 這些樣式實際上是 HTML 元素額外的裝飾品。盒模型的內容纔是真正的 HTML 元素定義的內容。在下一篇博客中，會詳述盒模型的內容，在那裏你會看到更多關於盒模型的思考。

多思考，你會發現不少有趣的事情，好比說：天才和逗比真的能夠是一我的（你的生活中遇到這樣的人了嗎？）。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。