1. 程式人生 > >CSS樣式表知識總結

CSS樣式表知識總結

adf aid 大於 d+ pre sheet 選擇 order 重用

技術分享圖片

技術分享圖片

分類

|------內聯 寫在標簽裏面,控制精確,代碼重用性差

|---------style=樣式

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

技術分享圖片

|------內嵌 嵌在頁面的<head></head>裏,控制沒有內聯的精確,代碼重用性好

|---------<style type="text/css"></style>

<style>
            #first{background: pink; width: 200px; height: 100px;}
            #second{background: blue; width: 200px; height: 100px;}
        </style>
<div id="first">
            
        </div>
        <div id="second">
            
        </div>

技術分享圖片

|------外部 單獨的樣式文件,控制沒有內聯的精確,代碼重用性最好

|---------<link href="" rel="stylesheet" type="text/css"/>

#third{
    background: purple;
    width: 200px;
    height: 300px;
}
<link rel="stylesheet" href="1111.css" />
<div id="third">
            
        </div>

技術分享圖片

選擇器 樣式表用來選取元素 標簽:根據標簽名選中元素

|------class

|---------.點

|---------根據class名來篩選元素

|---------可以有重復的名字

.common{
            width: 100px;
            height: 100px;
            background-color: black;
            color: white;
        }
        .common:hover{
            background-color: red;
            color: black;
<div class="common">
            我是第一個common
        </div>
        <div class="common">
            我是第二個common
        </div>
        <div class="common">
            我是第三個common
        </div>

技術分享圖片

|------id

|---------#

|---------根據id名來篩選唯一的元素

|---------不能有重復的名字

#third{
              width: 100px;
              height: 100px;
              background-color: green;
          }
<div id="third">
            
        </div>

技術分享圖片

|------復合

|---------逗號:並列 div,span

|---------空格:後代 #list li

|---------大於號:子元素選擇器 div>p div中所有p標簽

div,p{
            border: 1px solid red;
            
        }
        #third,#fourth{
            border: 1px solid black;
        }
        #first_ul li{
            color:brown;
        }
        #second_ul li{
            color: darkblue;
        }
        #div_p>p{
            color: green;
        }
<div id="third">
            
        </div>
        <div id="fourth">
            
        </div>
<ul id="first_ul">
            <li>無序一</li>
            <li>無序一</li>
            <li>無序一</li>
        </ul>
        <ul id="second_ul">
            <li>無序二</li>
            <li>無序二</li>
            <li>無序二</li>
        </ul>
        <div id="div_p">
            <p>我是div中的第一行p元素</p>
            <p>我是div中的第二行p元素</p>
            <p>我是div中的第三行p元素</p>
            <div>我是div中的第四行div元素</div>
        </div>

技術分享圖片

|------屬性選擇器

|---------[屬性名 = 屬性值]{} 屬性名後邊可以加 |、*等 代表匹配所有屬性有屬性值的元素

|---------表單元素的屬性選取

[href="aa.html"]{
            color: red;
        }
        input[type="text"]{
            background-color: gainsboro;
        }
<a href="aa.html">跳轉</a>
        <input type="text" name="" id="" value="" /><br />
        <input type="password" name=""id=""value="" />

技術分享圖片

|------偽類

|---------a標簽的四個偽類

|------------a:link 未訪問的鏈接

|------------a:visited 已訪問的鏈接

|------------a:hover 鼠標劃過鏈接

|------------a:active 已選中的鏈接

a:link{
            color:red
        }
        a:visited{
            color: black;
        }
        a:hover{
            color: blue;
        }
        a:active{
            color: yellow;
        }
<a href="https://www.baidu.com">跳轉到百度</a>

技術分享圖片技術分享圖片

技術分享圖片技術分享圖片

CSS樣式表知識總結