前端 - CSS_ZenDei技術網路在線

CSS簡介 css指的是層疊樣式表(Cascading Style Sheets). CSS語法 CSS語法主要由兩個部分組成：選擇器和聲明(一條或多條聲明). 選擇器一般是自己需要改變樣式的HTML元素；每一條聲明包括屬性和屬性值，屬性和屬性值之間用冒號(: )分開，每個聲明後面用分號(;)結束. ...

CSS簡介

css指的是層疊樣式表(Cascading Style Sheets).

CSS語法

CSS語法主要由兩個部分組成：選擇器和聲明(一條或多條聲明).

選擇器一般是自己需要改變樣式的HTML元素；每一條聲明包括屬性和屬性值，屬性和屬性值之間用冒號(: )分開，每個聲明後面用分號(;)結束.

CSS註釋

註釋是用來解釋你的代碼

CSS註釋：/*註釋內容*/

CSS的幾種引入方式

1. 內聯樣式

內聯樣式是在標記的style屬性中設定css屬性。不推薦大規模使用。

<p style="margin: 20px">
blamekidd
</p>

2. 內部樣式表

當單個文檔需要特殊的樣式的時候，可以考慮使用內部樣式表。

使用<style>標簽在文檔的頭部定義內部樣式表

<head>

<style>
p {
    margin-left: 20px;
}
</style>

</head>

註意：不要在屬性值與單位之間留空格(如：margin: 20 px)，正確的寫法應該是：margin: 20px;

3. 外部樣式表

外部樣式就是將CSS寫在一個單獨的文件中，然後在頁面進行引入即可。推薦使用此方式.

每個頁面使用<link>標簽鏈接到樣式表，<link>標簽在文檔的頭部

<link herf="mystyle.css" rel="stylesheet" type="text/css/">

4. 樣式的優先順序

一般情況下，優先順序如下：

內聯樣式>內部樣式>外部樣式>瀏覽器預設樣式

註意：

如果外部樣式放在內部樣式的後面，則外部樣式將覆蓋內部樣式

CSS選擇器

基本選擇器

1. 元素選擇器

p {
    color: red;
}

2. ID選擇器

id選擇器可以為標有特定id的HTML元素指定特定的樣式。

在CSS中，id選擇器以"#"來定義。

#nav {
    background-color: red;
}

3. class選擇器

class選擇器用於描述一組元素的樣式，class可以在多個元素中使用。

在CSS中，class選擇器以一個點"."來顯示。

.c1 {
    font-size: 14px;
}
/*也可以指定特定的HTML元素使用class*/
p.c1 {
    font-size: 14px;
}

註意：

1. ID屬性和類名不要以數字開頭(在有的瀏覽器中不起作用)
2. 標簽中的class屬性如果有多個，要用空格分隔

4. 通用選擇器

* {
    color: white;
}

組合選擇器

CSS組合選擇器說明瞭兩個選擇器直接的關係。

1. 後代選擇器以空格分隔

後代選擇器用於選取某元素的後代元素。

/*li內部的a標簽設置字體顏色*/
li a {
    color: red;
}

2. 子元素選擇器(兒子選擇器) 以大於號分隔

與後代選擇器相比，兒子選擇器只能選擇作為某元素子元素的元素。

/*選擇所有父級是<div>的<p>元素*/
div>p {
    font-family: "Arial Black";
}

3. 相鄰兄弟選擇器以加號分隔

相鄰兄弟選擇器可選擇緊接在另一元素後的元素，且二者有相同的父元素。

/*選取所有位於<div>元素之後的第一個<p>元素*/
div+p {
    margin: 5px;
}

4. 後續兄弟選擇器(弟弟選擇器) 以破折號分隔

弟弟選擇器選取所有指定元素之後的相鄰兄弟元素。

/*選取所有<div>元素之後的所有相鄰兄弟元素<p>*/
div~p {
    background-color: yellow;
}

屬性選擇器

/*把包含標題(title)的所有元素變為藍色*/
[title]
{
    color: blue;
}

/*把標題(title)=123的所有元素變為藍色*/
p[title="123"] 
{
    color: blue;
}

/*找到所有title屬性以hello開頭的元素*/
[title^="hello"]
{
    color: red;
}

/*找到所有title屬性以hello結尾的元素*/
[title$="hello"]
{
    color: red;
}

/*找到title屬性中包含hello的元素*/
[title*="hello"]
{
    color: red;
}

/*找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素*/
[title~="hello"]
{
    color: red;
}

不怎麼常用的屬性選擇器

分組和嵌套

1. 分組

當多個元素的樣式相同的時候，沒有必要重覆的為每個元素都設置樣式。

為了儘量減少代碼，可以使用分組選擇器。

每個選擇器用逗號分隔

/*將h1、h2、p標簽都設置成紅色*/
/*不使用分組選擇器*/
h1
{
    color: red;
}
h2
{
    color: red;
}
p
{
    color: red;
}

/*使用分組選擇器*/
h1,
h2,
p {
    color: red;
}

2. 嵌套

多種選擇器可以混合起來使用。

/*為所有class="c1"元素內的p元素設置字體顏色為紅色*/
.c1 p {
    color: red;
}

/*為所有class="c1"的p元素設置字體顏色為紅色*/
p.c1 {
    color: red;
}

偽類選擇器

CSS偽類是用來添加一些選擇器的特殊效果。

偽類的語法：

選擇器: 偽類{ 屬性: 屬性值; }

1. anchor偽類：專門控制鏈接屬性

/*未訪問的鏈接(沒有接觸過的鏈接，用於定義鏈接的常規狀態)*/
a:link {
    color: red;
}

/*訪問過的鏈接(能清楚的判斷已經訪問過的鏈接)*/
a:visited {
    color: red;
}

/*滑鼠放在鏈接上(滑鼠放在鏈接上的狀態，用於產生視覺效果)*/
a:hover {
    color: red;
}

/*滑鼠點擊時(用於表現滑鼠按下時的鏈接狀態)*/
a:active {
    color: red;
}

2. :focus選擇器

:focus選擇器用於選擇具有焦點的元素。

/*在文本框中點擊，會看到黃色的背景*/
input:focus {
    background-color: yellow;
}

3. 所有CSS偽類/元素

偽元素選擇器

註意：在CSS1和CSS2中，偽元素用一個冒號表示；在CSS3中，為了區分偽類和偽元素，用兩個冒號表示。

在這裡先統一用一個冒號表示。

1. :after選擇器

:選擇器向選定的元素之後插入內容。使用content屬性來指定要插入的內容。

/*在每個<p>元素後面插入藍色的666*/
p:after {
    content: "666";
    color: blue;
}

2. :before選擇器

選擇器向選定的元素之前插入內容。使用content屬性來指定要插入的內容。

/*在每個<p>元素之前插入內容-*/
p:before {
    content: "-";
    color: red;
}

after和before多用於清除浮動

3. first-letter選擇器(僅適用於塊級元素中)

:first-letter選擇器用來給元素的首字母設置樣式。

p:first-letter {
    font-size: 48px;
    color: red;
}

3. 所有的CSS偽類/元素

CSS選擇器的優先順序

1. CSS繼承

繼承是CSS的一個主要特征，它是依賴於祖先-後代的關係的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。例如一個body定義了的字體顏色值也會應用到段落的文本中。

body {
  color: red;
}

此時頁面上所有標簽都會繼承body的字體顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。

我們只要給對應的標簽設置字體顏色就可覆蓋掉它繼承的樣式。

p {
  color: green;
}

此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什麼能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

2. 選擇器的優先順序

一個HTML頁面中有很多方式找到一個元素並且為其設置樣式，瀏覽器根據不同選擇器的權重來決定應用哪個樣式。

具體的選擇器權重計算方式如下：

內聯樣式：1000

ID選擇器：100

類選擇器：10

元素選擇器：1

權重計算永不進位。

除此之外還可以通過添加 !important方式來強制讓樣式生效，但並不推薦使用。因為如果過多的使用!important會使樣式文件混亂不易維護。萬不得已可以使用!important。

CSS屬性

1. Background(背景)

CSS背景屬性用於定義HTML元素的背景

1.1 背景顏色：background-color

body {
    background-color: red;
}

1.2 背景圖片：background-image

預設情況下，背景圖像進行平鋪重覆顯示

body {
    background-image: url("1.jpeg");
}

1.3 背景重覆：background-repeat

repeat(預設)：背景圖片平鋪排滿整個網頁

repeat-x：背景圖片只在水平方向上平鋪

repeat-y：背景圖片只在垂直方向上平鋪

no-repeat：背景圖片不平鋪

body {
    background-image: url("1.jpeg");
    background-repeat: no-repeat;
}

1.4 背景圖像是否固定：background-attachment

scroll(預設): 背景圖片隨頁面的其餘部分滾動

fixed: 背景圖片是固定的

inherit: 指定background-attachment的設置應該從父元素繼承

body{
    height: 5000px;
    background-image:url("1.jpeg");
    background-repeat: no-repeat;
    background-attachment:scroll;
}

1.5 背景定位：background-position

可以利用background-position屬性改變圖像在背景中的位置。

有四個值：left、right、top、bottom

body {
    background-position: top right;
}

支持簡寫：

body {
    background: #ffffff url("1.jpeg") no-repeat right top;
}

使用背景圖片的一個常見案例就是很多網站會把很多小圖標放在一張圖片上，然後根據位置去顯示圖片。減少頻繁的圖片請求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滾動背景圖示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center;
            background-attachment: fixed;
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

滾動背景圖示例

2. Text(文本)

2.1 文本對齊：text-align

text-align屬性規定元素中的文本的水平對齊方式

值	描述
left	左對齊（預設值）
right	右對齊
center	居中對齊
justify	兩端對齊(左右外邊距是對齊)

div {
    text-align: center;
}

2.2 文本修飾：text-decoration

text-decoration屬性用來給文本添加特殊效果。

主要是用來刪除鏈接的下劃線。不建議強調指出不是鏈接的文本，因為這常常混淆用戶。

a {
    text-decoration: none;
}

其他屬性值：

underline：定義文本下的一條線。

overline：定義文本上的一條線。

line-through：定義穿過文本下的一條線。

2.3 文本顏色：color

顏色屬性用來設置文本的顏色。

h1 {
    color: red;
}

2.4 文本縮進：text-indent

text-indent屬性用來指定文本的第一行的縮進。

/*將段落的第一行縮進32像素*/
p {
    text-indent: 32px;
}

3. Fonts(字體)

3.1 設置字體系列：font-family

font-family屬性用於設置文本的字體系列

font-family可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可以識別的第一個值。

簡單實例：

body {
    font-family: "Microsoft Yahei", "微軟雅黑", "sans-serif";
}

3.2 設置字體大小：font-size

font-size屬性設置字體的大小。

p {
    font-size: 10px;
}

3.3 設置字體粗細：font-weight

font-weight屬性設置字體的粗細

值	描述
normal	預設值，標準粗細
bold	粗體
bolder	更粗
lighter	更細
100-900	設置具體粗細，400等同於normal，700等同於bold
inherit	繼承父元素字體的粗細值

4. 尺寸

width屬性可以設置元素的寬度。塊級標簽才能設置寬度，內斂標簽的寬度由內容來決定.

height屬性可以設置元素的高度

所有CSS尺寸屬性：

屬性	描述
height	設置元素的高度
line-height	設置行高
max-height	設置元素的最大高度
min-height	設置元素的最小高度
width	設置元素的寬度
max-width	設置元素的最大寬度
min-width	設置元素的最小寬度

5. Border(邊框)

邊框屬性：

border-width: 用於為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度。

border-style: 用於設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。

border-color: 設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色。

#b1 {
    border-width: 2px;
    border-style: solid;
    border-color: red;
}

一般使用簡寫形式：

#b1 {
    border: 2px solid red;
}

邊框樣式：

border-style屬性用來定義邊框的樣式

border-style的值：

值	描述
none	預設無邊框
dotted	定義一個點狀邊框
dashed	定義一個虛線邊框
solid	定義實線邊框
inset	定義一個3D的嵌入邊框

除了可以統一設置邊框，還可以單獨為某一個邊框設置樣式：

#d1 {
    border-top-style: solid;
    border-bottom-style: inset;
    border-top-style: red;
}

border-radius

用這個屬性可以實現圓角邊框的效果，圓形的頭像框。

將border-radius設置為長或高的一半，border-radius: 50%;

6. Display(顯示)

display屬性控制一個元素應該怎麼顯示。

display的值：

值	描述
none	HTML中元素存在，但是在瀏覽器中不顯示，且隱藏的元素不會占用任何的空間。一般用於配合JavaScript代碼使用。
block	預設占滿整個頁面寬度。如果設置了指定寬度，則會用margin填充剩下的部分。
inline	按照行內元素顯示。此時再設置元素的width、height、margin-top、margin-bottom、float屬性都不會有什麼影響。
inline-block	使元素同時具有行內元素和塊級元素的特點

註意：

display屬性設置一個元素應該怎麼顯示，
visibility屬性指定一個元素是可見的還是隱藏的。
區別：
display: none -- 隱藏一個元素，且隱藏的元素不會占有任何空間。
visibility: hidden -- 隱藏一個元素，但是隱藏的元素仍然占用與未隱藏之前一樣的空間。
也就是說該元素雖然被隱藏了，但是仍然會影響佈局。

7. CSS盒子模型

所有 HTML模型都可以看作盒子。它包括外邊距、邊框、內邊距、實際內容。

說明：

margin(外邊距)：用於控制元素與元素之間的距離。margin最基本的用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。外邊距是透明的。

border(邊框)：圍繞在內邊距和內容外的邊框。

padding(內邊距)：用於控制內容和邊框之間的距離，內邊距是透明的。

content(實際內容)：盒子的內容，主要用來顯示文本和圖像

8. Margin(外邊距)

它接受任何長度單位、百分數值以及負數。

margin屬性的值：

值	描述
auto	設置瀏覽器的邊距，這樣做的結果會依賴瀏覽器。
length	定義一個固定的margin。
%	定義一個使用百分比的邊距。

.margin-text {
    margin-top: 20px;
    margin-right: 30px;
    margin-bottom: 40px;
    margin-left: 50px;
}

當使用簡寫時：
margin: 20px 30px 40px 50px;
順序為：上 右 下 左
-----------------------------------------
margin: 20px 30px 40px;
順序為：上 左右 下
-----------------------------------------
margin: 20px 30px;
順序為：上下 左右

/* 常見居中 */
.mycenter {
    margin: 0 auto;
}

9. Padding(內邊距、填充)

元素的內邊距指的是在邊框和內容之間。

.padding-text {
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 40px;
    padding-left: 50px;
}

/* 當使用簡寫時，順序和margin一樣 */


padding: 20px 30px 40px 50px;
順序為：上 右 下 左
/* ---------------------------------------- */

padding: 20px 30px 40px
順序為：上 左右 下
/* ---------------------------------------- */


padding: 20px 30px;
順序為：上下 左右

10. Float(浮動)

在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，無論它是何種元素。

浮動的特點：

float會使元素向左或者向右移動，浮動元素之後的元素將圍繞它；浮動元素之前的元素將不會受到影響。

一個浮動元素會儘量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

元素設置水平方向浮動，意味著元素只能左右移動而不能上下移動。

三種取值：

left：向左浮動

right：向右浮動

none：預設值，不浮動

更多詳細介紹

11. Clear(清除浮動)

clear屬性指定元素的某一側不能有浮動元素。

元素浮動之後，周圍的元素會重新排列，為了避免這種情況，可以使用clear屬性。

值	描述
none	預設值，允許浮動元素出現在兩側
left	在左側不允許出現浮動元素
right	在右側不允許出現浮動元素
both	在左右兩側均不允許出現浮動元素
inherit	從父元素繼承clear屬性的值

註意：clear只會對自身起作用，不會影響其他元素。

清除浮動的副作用：

主要有三種方式：

1. 固定高度

2. 偽元素清除法

3. overflow: hidden

其中，偽元素清除法使用較多：

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

12. Overflow(溢出)

overflow 屬性可以控制內容溢出元素框時在對應的元素區間內如何顯示。

值	描述
visible	預設值，內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，且其餘內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以查看其餘的內容。
auto	如果內容會被修剪，則瀏覽器會顯示滾動條以查看其餘的內容。
inherit	從父元素繼承overflow屬性的值

overflow: 水平垂直都設置

overflow-x: 設置水平方向

overflow-y: 設置垂直方向

圓形頭像示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>圓形頭像</title>
    <style>
        body {
            margin: 0;
        }

        .ava {
            width: 200px;
            height: 200px;
            border: 2px solid white;
            border-radius: 50%;
            overflow: hidden;
        }
        .ava>img {
            max-width: 100%;
        }
    </style>
</head>
<body>

<div class="ava">
    <img src="http://img3.duitang.com/uploads/item/201506/30/20150630195944_VJhkw.thumb.700_0.jpeg" alt="">
</div>

</body>
</html>

圓形頭像示例

13. Position(定位)

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

13.1 static定位

預設值，沒有定位

13.2 fixed定位

固定。元素的位置相對於瀏覽器的視窗是固定位置。即使視窗滾動它也不會移動。

fixed的定位使元素位置與文檔流無關，所以不占據空間。

fixed定位的元素會和其它元素重疊。

在理論上，被設置為fixed的元素會被定位於瀏覽器視窗的一個指定坐標，不論視窗是否滾動，它都會固定在這個位置。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .c1 {
            height: 1500px;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .back-top {
            text-align: center;
            background-color: bisque;
            padding: 10px;
            position: fixed;
            right: 10px;
            bottom: 20px;
        }
    </style>
</head>
<body>

<div class="c1">123</div>
<div class="back-top">返回頂部</div>

</body>
</html>

返回頂部按鈕示例

13.3 relative定位

相對定位。相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。但是，即使設定了元素的相對定位以及偏移值，元素還占有著原來的位置，即占據文檔流空間。

註意：position：relative的一個主要用法：方便絕對定位元素找到參照物。

13.4 absolute定位

絕對定位。絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於<html>。

元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

重點：如果父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然後Top、Right、Bottom、Left用百分比寬度表示。

14. z-index

#d1 {
    z-index: 999;
}

設置對象的層疊順序。

z-index 值表示誰壓著誰，數值大的壓蓋住數值小的，
只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index
z-index值沒有單位，就是一個正整數，預設的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那麼誰寫在HTML後面，誰在上面壓著別人，定位了元素，永遠壓住沒有定位的元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定義模態框</title>
    <style>
        .modal {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 99;
        }
        .cover {
            position: absolute;
            width: 700px;
            height: 380px;
            background-color: white;
            top: 50%;
            left: 50%;
            margin-top: -190px;
            margin-left: -350px;
            z-index: 100;
        }
    </style>
</head>
<body>
<div class="modal"></div>
<div class="cover"></div>

</body>
</html>

自定義模態框示例

15. opacity(不透明度)

opacity屬性用來定義透明效果。取值範圍是0~1,0

前端 - CSS

CSS簡介

CSS語法

CSS註釋

CSS的幾種引入方式

1. 內聯樣式

2. 內部樣式表

3. 外部樣式表

4. 樣式的優先順序

CSS選擇器

基本選擇器

1. 元素選擇器

2. ID選擇器

3. class選擇器

4. 通用選擇器

組合選擇器

1. 後代選擇器 以空格分隔

2. 子元素選擇器(兒子選擇器) 以大於號分隔

3. 相鄰兄弟選擇器 以加號分隔

4. 後續兄弟選擇器(弟弟選擇器) 以破折號分隔

屬性選擇器

分組和嵌套

1. 分組

2. 嵌套

偽類選擇器

2. :focus選擇器

3. 所有CSS偽類/元素

偽元素選擇器

1. :after選擇器

2. :before選擇器

3. first-letter選擇器(僅適用於塊級元素中)

3. 所有的CSS偽類/元素

CSS選擇器的優先順序

1. CSS繼承

2. 選擇器的優先順序

CSS屬性

1. Background(背景)

1.1 背景顏色：background-color

1.2 背景圖片：background-image

1.3 背景重覆：background-repeat

1.4 背景圖像是否固定：background-attachment

1.5 背景定位：background-position

2. Text(文本)

2.1 文本對齊：text-align

2.2 文本修飾：text-decoration

2.3 文本顏色：color

2.4 文本縮進：text-indent

3. Fonts(字體)

3.1 設置字體系列：font-family

3.2 設置字體大小：font-size

3.3 設置字體粗細：font-weight

4. 尺寸

5. Border(邊框)

邊框屬性：

邊框樣式：

border-radius

6. Display(顯示)

註意：

7. CSS盒子模型

8. Margin(外邊距)

9. Padding(內邊距、填充)

10. Float(浮動)

三種取值：

11. Clear(清除浮動)

清除浮動的副作用：

12. Overflow(溢出)

圓形頭像示例

13. Position(定位)

13.1 static定位

13.2 fixed定位

13.3 relative定位

13.4 absolute定位

14. z-index

15. opacity(不透明度)

1. 後代選擇器以空格分隔

3. 相鄰兄弟選擇器以加號分隔