css基礎1

時間 2019-12-12

標籤 css 基礎欄目 CSS 简体版

原文原文鏈接

今天是2019年6月15日週六，老師給咱們講了css的第一節課：css基礎部分，寫個隨筆留個印記！css

1、css的概念html

css：cascading style sheet 中午翻譯過來就是層疊樣式表，它主要是用於定義HTML的內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等瀏覽器

優點：一、實現了內容與表現的分離佈局

　　　二、提升了代碼的可維護性字體

使用場景：能用css取代Html屬性就要用到css，有些屬性沒法取代：如input屬性的 type ，img屬性的alt。spa

2、css的三種引入方式翻譯

一、行內樣式（內聯樣式）code

語法：新增標籤的style屬性在style屬性的值中寫csshtm

格式：css屬性1：屬性值1；css屬性2：屬性值2；blog

特色：01，沒有實現內容如表現的分離，只針對當前標籤有效。

　　　02，優先級別最高

使用場景：經過js動態給一些元素加樣式

<body>
    <div style="width:100px;height:100px;background:red;">
    </div>          
</body>

二、內部樣式表

語法：在頭部新增style標籤，在style標籤的內容中寫css。

選擇器：規定了頁面上哪些元素可使用定義好的css

格式：選擇器 {

　　　　css屬性：屬性值；

　　　}

特色：01，沒有實現內容與表現的分離

　　 02，有必定的可重用性和可維護性

使用場景：沒有使用場景

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>內部樣式表</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="box">我是div</div>
    </body>
</html>

三、外部樣式表

語法：新建外部以.css結尾的文件，將全部的css代碼寫在外部的文件中，在須要使用的Html中經過link引入。

格式：<link rel="stylesheet" href="css路徑">　

註釋：html註釋 　　css註釋 /*css註釋*/

html部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>外部樣式表</title>
        <link rel="stylesheet" href="css/common.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

css部分：

.box {
    width: 299px;
    height: 200px;
    background: pink;
}

3、css樣式表的特徵

一、繼承性：大多數css屬性是能夠被繼承的，例如字體、文本相關樣式能夠被繼承；寬度、高度、邊框、背景等等不能繼承。因爲標籤嵌套出現父子關係、祖前後代關係（包括父子關係）也能夠被繼承。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>繼承性</title>
        <style>
            div {
                color: purple;
            }
        </style>
    </head>
    <body>
        <div>
            我是div文本內容
            <p>我是p文本內容</p>
        </div>
    </body>
</html>

二、層疊性：若是代碼多處都找到同一個標籤，設置了不少樣式，在不衝突的狀況下，這些樣式會層疊爲一個，共同做用到標籤上。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>層疊性</title>
        <style>
            div {
                width: 400px;
                height: 400px;
                background: pink;
            }
        </style>
    </head>
    <body>
        <div style="width: 300px"></div>
    </body>
</html>

三、優先級別：

01，瀏覽器缺省設置：user agent stylesheet （優先級別最低）

02，內部樣式表和外部樣式表優先級別同樣，採起就近原則，誰在下以誰爲準。

03，內聯優先級別最高

04，！important手動提升優先級別，寫在須要提升優先級css屬性的後面以空格分割，需謹慎使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>important</title>
        <style>
            div {
                width: 400px !important;
                height: 400px;
                background: orange;
            }
        </style>
                <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div style="width: 800px"></div>
    </body>
</html>

4、css選擇器

概念：規定了頁面上哪些元素可使用定義好的樣式

一、通配符：通用選擇器

語法：* {

　　　　　　css代碼

　　}

功能：匹配頁面上全部的元素

注意：要謹慎使用，效率比較低。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>通配符</title>
        <style>
            * {
                color: orange;
            }
        </style>
    </head>
    <body>
        <div>我是div</div>
        <p>我是p段落</p>
        <span>我是span標籤</span>
    </body>
</html>

二、標籤選擇器（元素選擇器）

語法：將標籤名做爲選擇器

使用場景：通常用於定義標籤的默認樣式，或者去除標籤默認樣式，使用場景不多。在Html、css中如Html,body,p,h1-h6,ul,li,ol這些元素都帶有默認的外邊距和內邊距。

三、類選擇器

語法：.class值 {

　　　　　　css代碼

}

屬性：class屬性的功能就是將標籤分類，注意不是以標籤名分類。

class屬性的值命名規範：由字母數字下劃線分隔符組成，儘可能不要使用拼音，英文名應見名知意。注意：當這個類由多個單詞組成，中間使用下劃線或分隔符隔開。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>類選擇器</title>
        <style>
            .zhy {
                width: 300px;
                height: 300px;
                background: pink;
            }
            .zy {
                width: 400px;
                height: 400px;
                background: blue;
            }
            .zjx {
                width: 500px;
                height: 500px;
                background: orange;
            }
        </style>
    </head>
    <body>
        <div class="zhy">我是zhy</div>
        <div class="zy">我是zy</div>
        <div class="zjx">我是zjx</div>
    </body>
</html>

四、分類選擇器

語法：將標籤選擇器和類選擇器結合起來使用，從而實現對於一些元素不一樣屬性精肯定義。

格式：標籤選擇器.class值 {

　　　　　　css代碼

}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>分類選擇器</title>
        <style>
            .box {
                width: 200px;
                height: 200px;
                background: orange;
            }
            p.zhy {
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="box">div標籤</div>
        <p class="zhy">p標籤</p>
    </body>
</html>

五、多類選擇器

定義：class屬性能夠定義多個值，多個值之間以空格分割。

含義：一個標籤具備class屬性且值爲多個。

使用場景：用於提高選擇器的優先級

格式：.屬性值1.屬性值2.屬性值3 {

　　　　　　css樣式

}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>分類選擇器</title>
        <style>
            .box {
                width: 200px;
                height: 200px;
                background: orange;
                margin-top: 10px;
            }
            .zy {
                color: black;
            }
            .zhy {
                color: red;
            }
            .zjx {
                color: purple;
            }
            .box.zjx.zxm {
                font-size: 25px;
            }
        </style>
    </head>
    <body>
        <div class="box zy">div1</div>
        <div class="box zhy">div2</div>
        <div class="box zjx zxm">div3</div>
    </body>
</html>

六、id選擇器

定義：給一個標籤設置一個id屬性，經過選擇id屬性的值來選擇這個標籤。

注意：一個id屬性只能有一個值，不能和其餘標籤的id屬性重複。id屬性是一個標籤獨一無二的身份證實。

語法：#id值 {

　　　　css代碼

}

使用場景：在靜態頁佈局中用於最外層的盒子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>id選擇器</title>
        <style>
            #box {
                width: 200px;
                height: 200px;
                background: orange;
            }
        </style>
    </head>
    <body>
        <div id="box">我是div</div>
    </body>
</html>

七、羣組選擇器

功能：定義多個選擇器的公共樣式

語法：選擇器1，選擇器2，選擇器3...選擇器 {

　　　　　　　　css樣式

}

八、子代選擇器：因爲標籤的嵌套，標籤之間會產生兩種關係：父子關係和祖前後代（包含父子）的關係。

格式：選擇器1>選擇器2

注意：選擇器1和選擇器2之間的關係是父子的關係，最終選中的是選擇器2。

九、後代選擇器

格式：選擇器1 選擇器2

注意：選擇器1和選擇器2之間的關係是祖前後代關係，最終選中的是選擇器2。

備註：祖前後代是包含子代的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>子後代選擇器</title>
        <style>
            #box>div {
                color: red;
            }
            #box div {
                color: blue;
            }
            #box .zhy {
                color: orange;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div class="zhy">
                子代div標籤
                <div>
                    後代div標籤
                    <span>我是
                        <a href="#">a標籤</a>
                    </span>
                </div>
            </div>
        </div>
    </body>

</html>

十、僞類選擇器：正常狀況下選擇的是元素，僞類選擇器選中的是選中的一種狀態。

動態僞類：一、hover：匹配元素鼠標移入時的狀態

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hover</title>
        <style>
            #box { 
                width: 200px;
                height: 200px;
                background: orange;
            }
            #box:hover {
                width: 300px;
                height: 300px;
                background: purple;
            }
        </style>
    </head>
    <body>
        <div id="box" class="zhy"></div>
    </body>
</html>

二、focus：獲取焦點時的狀態，匹配的是表單控件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>focus</title>
        <style>
            input:focus {
                width: 400px;
            }
        </style>
    </head>
    <body>
        <input type="text">
    </body>
</html>

三、active：匹配元素激活時的狀態，通常用於a標籤。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>active</title>
        <style>
            a:active {
                color: green;
            }

            a:link {
                color: red;
            }

            a:visited {
                color: pink;
            }
    </style>
    </head>
    <body>
        <a href="#">我是超連接</a>
    </body>
</html>