前端學習日記 (三)

時間  2019-11-08
標籤 前端 學習 日記 简体版
原文   原文鏈接

CSS的引入css

在早期,若是要去定義一個H1的標題的顏色、字體、大小和其餘的顯示特徵,就須要用到HTML中的font或其餘樣式的指令,H1只是一個結構指令因此光有它是不夠的。所以若是有多個標籤要去進行處理,就會形成樣式的重複,後期維護的困難。html

那CSS的出現就解決了這一類的問題,CSS(Cascading Style Sheets),即層疊樣式表、階層樣式表,它是一種用來爲結構化文檔(如HTML文檔或XML應用)添加樣式(字體、間距和顏色等)的計算機語言。web

 

CSS的基本引入字體

經過HTML文件中的link標籤引入CSS文件spa

1.經過link引入CSS文件設計

HTML程式碼:3d

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

CSS程式碼:code

p{
    color:red;
}

2.使用style標籤htm

HTML程式碼:blog

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <style>
            p{
                color:red;
            }
        </style>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

3.直接在標籤中更改樣式

HTML程式碼:

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
    </head>
    <body>
        <p style="color:red">Hello World!</p>
    </body>
</html>

 

CSS結構

 

 

選擇器相遇要更改標籤樣式的前提條件

 

CSS基本選擇器

選擇器查找標籤的方式 

1.標籤選擇器

這種選擇器若是對於同一種類的標籤會一塊兒修改相同的樣式,所以對於通用的樣式時候能夠選擇標籤選擇器

HTML程式碼:

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <h1>網頁設計</h1>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
h1{
    color:blue;font-size:48px;
}

網頁效果:

2.ID選擇器

選擇器所表現出的樣式具備獨一無二的效果,ID選擇器優先級比標籤選擇器高

HTML程式碼:

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <h1 id="i1">網頁設計</h1>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
#i1{
    color:orange;font-size:60px;
}

網頁效果:

3.類選擇器

這一類標籤須要用同一種樣式的時候須要用到類選擇器

HTML程式碼:

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <p class="c1">水蜜桃</p>
        <p class="c1">獼猴桃</p>
        <p class="c1">蘋果</p>
        <p class="c1">香蕉</p>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
.c1{
    color:pink;font-size:60px;
}

網頁效果:

4.通用選擇器

默認使用這一種樣式

/*CSS程式碼*/
*｛
    color:black;
｝

 

CSS組合選擇器

1.子代選擇器

HTML程式碼:

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <div id="d1">
            <p>我是嵌套在div中的p標籤</p>
            <span>我是嵌套在div中的span標籤</span>
            <div>
                <p>我是嵌套在div中的div中的p標籤</p>
                <span>我是嵌套在div中的div中的span標籤</span>
            </div>
        </div>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
#d1>p{
    color:blue;font-size:20;
}

網頁效果:

2.兄弟選擇器

以後標籤都會統一更改樣式

HTML程式碼:

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <p>第一段</p>
        <div>div標籤</div>
        <p>第二段</p>
        <p>第三段</p>
        <p>第四段</p>
        <p>第五段</p>
        <hr>
        <p>第六段</p>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
div~p{
    color:green;font-size:20;
}

網頁效果:

3.相鄰兄弟選擇器

這種方式它只會往下找相鄰的標籤

HTML程式碼:

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <p>第一段</p>
        <div>div標籤</div>
        <p>第二段</p>
        <p>第三段</p>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
div+p{
    color:blue;font-size:20;
}

網頁效果:

4.後代選擇器

HTML程式碼:

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <div id="d1">
            <p>我是嵌套在div中的p標籤</p>
            <span>我是嵌套在div中的span標籤</span>
            <div>
                <p>我是嵌套在div中的div中的p標籤</p>
                <span>我是嵌套在div中的div中的span標籤</span>
            </div>
        </div>
    </body>
</html>

CSS程式碼:

這裏對於ID爲d1的標籤的後代只要是p標籤都會用同樣的CSS樣式

/*CSS程式碼*/
#d1 p{
    color:red;font-size:20;
}

網頁效果:

 

css屬性選擇器

能夠給一個標籤去自定義一個屬性,經過這個屬性來改變這一類或這一個標籤的樣式

HTML程式碼: 

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <p attribute>Hello CSS!</p>
        <p attribute="abc">Hello CSS!-abc</p>
        <p attribute="abc123">Hello CSS!-abc123</p>
        <p attribute="123abc">Hello CSS!-123abc</p>
        <p attribute="abcabcabc">Hello CSS!-abcabcabc</p>
        <p attribute="   abc   ">Hello CSS!-   abc   </p>
        <p attribute="xsdda">Hello CSS!-xsdda</p>
    </body>
</html>

1.查找標籤元素裏有"attribute"的屬性

CSS代碼:

/*CSS程式碼*/
[attribute]{
    color:blue;
}

網頁效果:

2.查找屬性是"abc"的標籤

CSS代碼:

/*CSS程式碼*/
[attribute="abc"]{
    color:blue;
}

網頁效果:

3.查找屬性使用空白分開的字串中其中是「abc」

CSS代碼:

/*CSS程式碼*/
[attribute~="abc"]{
    color:blue;
}

網頁效果:

4.查找屬性是以"abc"開頭的元素

CSS代碼:

/*CSS程式碼*/
[attribute^="abc"]{
    color:blue;
}

網頁效果:

5.查找屬性是以"abc"結尾的元素

CSS代碼:

/*CSS程式碼*/
[attribute$="abc"]{
    color:blue;
}

網頁效果:

6.查找屬性至少出現過一次"abc"

CSS代碼:

/*CSS程式碼*/
[attribute*="abc"]{
    color:blue;
}

網頁效果:

 

分組和嵌套

當有不一樣的標籤樣式有重複的時候能夠用到分組

HTML程式碼:

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>分組和嵌套示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <div id="d1">這是一個div標籤</div>
        <p>這是一個p標籤</p>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
#d1,
p{
    color:gold
}

網頁效果:

 

把多種選擇器混合起來使用就是嵌套

HTML程式碼:

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>分組和嵌套示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <div class="c1">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
.c1 p{
    color:red
}

網頁效果:

像上面的組合選擇器也都是有用到嵌套

 

CSS選擇器的優先級

樣式文件優先級:選擇器都同樣的狀況下,誰靠近標籤誰就生效,例一:

HTML程式碼:

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>選擇器的優先級</title>
        <link rel="stylesheet" href="webCSS.css">
        <link rel="stylesheet" href="webCSS2.css">
    </head>
    <body>
        <div id="d1">我是一個div標籤</div>
        <p>我是一個p標籤</p>
    </body>
</html>

第一個CSS檔程式碼:

/*CSS程式碼*/
#d1,
p{
     color:red;
}

第二個CSS檔程式碼:

/*CSS程式碼*/
#d1,
p{
     color:gold;
}

網頁效果:

那若是把p標籤中語句稍加改動

<p style="color:blue">我是一個p標籤</p>

那這裏的p標籤就會變爲藍色,所以像這種內聯樣式(直接在標籤裏面寫style)它的優先級最高

例二，HTML程式碼:

<!DOCTYPE html>
<html>      　　　　
    <head>
        <meta charset="UTF-8">
        <title>選擇器的優先級</title>
        <link rel="stylesheet" href="webCSS.css">
        <link rel="stylesheet" href="webCSS2.css">
    </head>
    <body>
        <div id="d1">我是一個div標籤</div>
        <p id="p1">我是一個p標籤</p>
    </body>
</html>

第一個CSS檔程式碼:

/*CSS程式碼*/
/*權重值爲100 + 1*/
#d1,
p{
     color:red;
}
/*權重值爲100*/
#p1{
    color:deeppink;
}

第二個CSS檔程式碼:

/*CSS程式碼*/
/*權重100 + 1*/
#d1,
p{
     color:gold;
}

網頁效果:

由於ID選擇器的權重比元素選擇器的權重更高因此最後的顏色是deepink,可是權重計算永不進位,好比說寫了十個類選擇器加起來就是100,可是按照規則它仍是沒有ID選擇器來得大

另外若是想要讓一種樣式強制生效就可使用!important(不推薦使用),會致使後期維護麻煩

/*CSS程式碼*/
#d1,
p{
     color:blue!important;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程