CSS基礎part1

時間  2019-12-11
標籤 css 基礎 part1 欄目 CSS 简体版
原文   原文鏈接

CSS 概述
CSS 指層疊樣式表 (Cascading Style Sheets)，樣式定義瞭如何顯示 HTML文件中的標籤元素，CSS是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化。css

CSS語法html

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。瀏覽器

selector1{
        property: value;
        property: value;
        property: value;
}
selector2{
        property: value;
        property: value;
        property: value;
}

示例：網絡

h1{
　　color:red;
　　font-size:14px;
}

 

CSS引入方法ide

行內式佈局

行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優點，不推薦使用。測試

<div style="color: red; line-height: 1.5 !important;">>DIV</div>

 

 

嵌入式spa

嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。code

<head>
    <style>
        div{
            color: red;
            font-size: 30px;
            font-weight: 800;
        }
        p{
            color: aqua;
            background-color: bisque;
        }
    </style>
</head>

 

 

連接式htm

將一個.css文件引入到HTML文件中，如定義文件csstest.css

/*csstest.css，註釋行*/
/*該文件內爲純粹的CSS樣式代碼，不須要style標籤聲明*/
div{
    color: red;
    font-size: 30px;
    font-weight: 800;
}
p{
    color: aqua;
    background-color: bisque;
}

 

示例：

<link rel="stylesheet" href="csstest.css" type="text/css">

 

 

 

導入式

相似於連接式，都是導入外部的css文件

<head>
    <style>
        @import "csstest.css";
    </style>
</head>

 

注意：導入式會在整個網頁裝載完後再裝載CSS文件，所以若是網頁比較大或網絡不穩定則會兒出現先顯示無樣式的頁面，閃爍一下以後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用連接式時與導入式不一樣的是它會以網頁文件主體裝載前裝載CSS文件，所以顯示出來的網頁從一開始就是帶樣式的效果的，這是連接式的優勢。

 

CSS選擇器-基本選擇器

基本選擇器包括：標籤選擇器、id選擇器、class選擇器、通配選擇器

標籤選擇器

按照標籤名字進行匹配，上述的嵌入式、連接式和導入式使用的css代碼所使用的選擇器就是標籤選擇器，會匹配html文件中全部的div標籤和p標籤進行樣式渲染。

 

id選擇器

按照標籤的id進行匹配，將匹配到的id進行渲染，每一個html文件中的id在根本上就禁止衝突，因此id是惟一的，因此一條css聲明只能匹配一個id

示例：

<head>
    <style>
        /*id選擇器*/
        p2{     
            background-color: red;
        }
    </style>
</head>
<body>
        <p id="p2">I am P</p>
</body>

 

 

class選擇器

同id選擇器，只不過是將id名字改爲class名字，類不惟一，因此可以匹配多條

示例：

<head>
    <style>
        /*類選擇器*/
        .p_ele{
            background-color: bisque;
        }
    </style>
</head>
<body>
        <div class="p_ele">我是第一個p_ele類</div>
        <div class="p_ele">我是第二個p_ele類</div>
</body>

 

 

通配選擇器

匹配全部的html文件中的標籤元素

示例：

<head>
    <style>
        /*通用選擇器*/
        *{
            background-color: green;
        }
    </style>
</head>
<body>
        <p id="p2">I am P</p>
        <div class="p_ele">我是第一個p_ele類</div>
        <div class="p_ele">我是第二個p_ele類</div>
        <p>I am P2</p>
</body>

 

 

CSS選擇器-組合選擇器

包括：多元素選擇器、後代選擇器、子代選擇器、毗鄰選擇器、普通兄弟選擇器

後代選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /*後代選擇器,指定了一個標籤，匹配它下面的全部元素*/
        .outer p{
            color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <div class="inner">
            <p>p2</p>
        </div>
        <p class="p3">p3</p>
        <p>p4</p>
    </div>
    <p>p5</p>
    <div>
        <p>p6</p>
    </div>
</body>

 

子代選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /*子代選擇器，指定一個標籤，匹配該標籤下面的第一級子標籤進行匹配渲染*/
        .outer > p{
            color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <div class="inner">
            <p>p2</p>
        </div>
        <p class="p3">p3</p>
        <p>p4</p>
    </div>
    <p>p5</p>
    <div>
        <p>p6</p>
    </div>
</body>

 

多元素選擇器

<head>
    <style>
        /*多元素選擇器，匹配包括.inner p（後代）或.p3的元素*/
        .inner p, .p3{
            color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <div class="inner">
            <p>p2</p>
        </div>
        <p class="p3">p3</p>
        <p>p4</p>
    </div>
    <p>p5</p>
    <div>
        <p>p6</p>
    </div>
</body>

 

 

毗鄰選擇器

<head>
    <style>
        /*不經常使用*/
        /*毗鄰選擇器，匹配同級的下面一個標籤，只會向下找，不會向上找*/
        .outer+p{
            color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <div class="inner">
            <p>p2</p>
        </div>
        <p class="p3">p3</p>
        <p>p4</p>
    </div>
    <p>p5</p>
    <div>
        <p>p6</p>
    </div>
</body>

 

 

普通兄弟選擇器

<head>
    <style>
        /*不經常使用*/
        /*普通兄弟選擇器，匹配同級的全部元素，只能向下，不能向上匹配*/
        .outer~p{
            color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <div class="inner">
            <p>p2</p>
        </div>
        <p class="p3">p3</p>
        <p>p4</p>
    </div>
    <p>p5</p>
    <div>
        <p>p6</p>
    </div>
</body>

 

 

補充

<head>
    <style>
        /*補充，精確匹配，匹配ul標籤包含.item類的*/
        ul.item{
            color: red;
        }
    </style>
</head>
<body>
    <ul class="item">
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>

    <ol class="item">
        <li>222</li>
        <li>222</li>
        <li>222</li>
        <li>222</li>
    </ol>

    <ul>
        <li>333</li>
        <li>333</li>
        <li>333</li>
        <li>333</li>
    </ul>
</body>

注意，關於標籤嵌套：

通常，塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。須要注意的是，p標籤不能包含塊級標籤。

 

CSS選擇器-屬性選擇器 

標籤中的屬性能夠本身定義，定義的屬性能夠沒有任何功能，只是爲了進行匹配查詢

匹配全部帶有指定屬性的元素

<head>
    <style>
　　　　 div[sha]{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="item1 item2">DIV1</div>
    <div class="C2" id="D2">DIV2</div>
    <div>sha</div>
    <div sha="alex">sha jiejie</div>
    <div sha="yuan alvin">sha jiejie</div>
    <div sha="123">sha gg</div>
</body>

 

 

匹配全部指定的key:value的元素

<head>
    <style>
        div[sha='alex']{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="item1 item2">DIV1</div>
    <div class="C2" id="D2">DIV2</div>
    <div>sha</div>
    <div sha="alex">sha jiejie</div>
    <div sha="yuan alvin">sha jiejie</div>
    <div sha="123">sha gg</div>
</body>

 

 

匹配一個屬性有多個值，只包含其中一個值的屬性

<head>
    <style>
        div[class~='item1']{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="item1 item2">DIV1</div>
    <div class="C2" id="D2">DIV2</div>
    <div>sha</div>
    <div sha="alex">sha jiejie</div>
    <div sha="yuan alvin">sha jiejie</div>
    <div sha="123">sha gg</div>
</body>

 

 

匹配屬性值以某個字符串開頭的元素

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div[sha^='1']{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="item1 item2">DIV1</div>
    <div class="C2" id="D2">DIV2</div>
    <div>sha</div>
    <div sha="alex">sha jiejie</div>
    <div sha="yuan alvin">sha jiejie</div>
    <div sha="123">sha gg</div>
</body>

 

 

匹配屬性值以某個字符串結尾的元素

<head>
    <style>
        div[sha$='3']{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="item1 item2">DIV1</div>
    <div class="C2" id="D2">DIV2</div>
    <div>sha</div>
    <div sha="alex">sha jiejie</div>
    <div sha="yuan alvin">sha jiejie</div>
    <div sha="123">sha gg</div>
</body>

 

 

匹配屬性值中包含某個字符串的元素

<head>
    <style>
        div[sha*='2']{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="item1 item2">DIV1</div>
    <div class="C2" id="D2">DIV2</div>
    <div>sha</div>
    <div sha="alex">sha jiejie</div>
    <div sha="yuan alvin">sha jiejie</div>
    <div sha="123">sha gg</div>
</body>

 

 

CSS選擇器-僞類選擇器 

僞類：僞類指的是標籤的不通的狀態

anchor僞類

專用於控制連接的顯示效果

<head>
    <style>
        a:link{     /*默認的連接顏色，沒有點擊過的狀態*/
            color: green;
        }
        a:hover{    /*鼠標放到超連接上變色，放到超連接上的狀態*/
            color: goldenrod;
        }
        a:active{   /*點擊後，即訪問的時候變色，點擊的狀態*/
            color: blue;
        }
        a:visited{  /*超連接訪問成功過一次後變色，訪問後的狀態*/
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">URL</a> /*井號爲不跳轉頁面，只爲當前測試使用*/
</body>

 

注：hover並非連接專有的屬性

<head>
    <style>
        .a{
            height: 100px;
            width: 400px;
            background-color: blue;
        }
        .b{
            height: 200px;
            width: 200px;
            background-color: gold;
        }
        .all{
            width: 1000px;
            border: 1px solid red;
        }
        /*當鼠標放到.all類的div範圍內，.a的div變色，注意操做的標籤必定是被包含在內的子元素*/
        .all:hover .a{
            background-color: bisque;
        }
        /*.b:hover .a{*/
            /*background-color: plum;*/
        /*}*/
    </style>
</head>
<body>
    <div class="all">
        <div class="a">AAAAAAAAA</div>
        <div class="b">BBBBBBBBB</div>
    </div>
</body>
hover示例

 

before/after僞類 

:before 在元素以前插入內容

:after 在元素以後插入內容

<head>
    <style>
        div:before{
            content:"hello";    /*插入的值*/
            color:red;
            display: block; /*設置爲塊級*/
        }
        p:after{    /*默認爲內聯*/
            content:"byby";    /*插入的值*/
            color:blue;
        }
    </style>
</head>
<body>
    <div>divdiv</div>
    <p>hi</p>
</body>

通常用於佈局使用

 

選擇器優先級

優先級

所謂CSS優先級，便是指CSS樣式在瀏覽器中被解析的前後順序。

樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：

　　1 內聯樣式表的權值最高               style=""－－－－－－－－－－－－1000

　　2 統計選擇符中的ID屬性個數。       #id －－－－－－－－－－－－－－100

　　3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10

　　4 統計選擇符中的HTML標籤名個數。 p －－－－－－－－－－－－－-－1

按這些規則將數字符串逐位相加，就獲得最終的權重，而後在比較取捨時按照從左到右的順序逐位比較。

示例：能夠再加一個行內式測試

<head>
    <style>
        p{
             color: red;
         }
        #d1{
            color: gold;
        }
        .c1{
            color: green;
        }
    </style>
</head>
<body>
    <p class="c1" id="d1">PPP</p>
</body>

 

1 文內的樣式優先級爲1,0,0,0，因此始終高於外部定義。
2 有!important聲明的規則高於一切。
3 若是!important聲明衝突，則比較優先權。
4 若是優先權同樣，則按照在源碼中出現的順序決定，後來者居上。
5 由繼承而獲得的樣式沒有specificity的計算，它低於一切其它規則(好比全局選擇符*定義的規則)。
注意

 

.c1{
     color: red!important;    /*無敵的聲明*/
}

 

 

繼承

繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。

<head>
    <style>
        .c2{
            color: red;
        }
    </style>
</head>
<body>
    <div class="c2">
        <div>
            <p>P4</p>
        </div>
    </div>
</body>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程