• <sup id="mk476"></sup>
    <dl id="mk476"></dl>
  • <progress id="mk476"><tr id="mk476"></tr></progress>
    <div id="mk476"><tr id="mk476"></tr></div>
    <sup id="mk476"><ins id="mk476"></ins></sup>
  • <progress id="mk476"></progress>
    <div id="mk476"></div>
    <div id="mk476"><tr id="mk476"></tr></div>
  • <div id="mk476"></div>
    <dl id="mk476"><s id="mk476"></s></dl><dl id="mk476"></dl><div id="mk476"></div>
  • <div id="mk476"></div>
    <dl id="mk476"><ins id="mk476"></ins></dl>

    CSS入門(二)

    一、組合選擇器

    每個選擇器位可以是任意基礎選擇器或選擇器組合

    1.群組選擇器

    • 可以一次性控制多個選擇器
    • 選擇器之間用逗號(,)隔開
    div,.d1,#div{
        color:red;
    }

    2.子代(后代)選擇器

    • 一次性控制一個選擇器(邏輯最后的那個選擇器),前置位的選擇器是修飾性選擇器
    • 子代選擇器必須為一級父子關系,后代選擇器可以為一級,也可以多級父子嵌套關系
    子代選擇器用>連接
    body>div{
        color:red;
    }
    注:控制body下的div選擇器
    后代選擇器用空格連接
    div .d2{
        color:red;
    }
    注:控制div下只要有d2的選擇器

    3.相鄰(兄弟)選擇器

    • 一次性控制一個選擇器(邏輯最后的那個選擇器),前置位的選擇器是修飾性選擇器
    • 相鄰選擇器必須為直接相鄰關系,兄弟選擇器可以為直接相鄰或間接相鄰關系
    相鄰選擇器用+連接
    .d11+.d22{
        color:red;
    }
    注:控制的是d22選擇器
    兄弟選擇器用~連接
    .d11~.d33{
        color:yellow;
    }
    注:控制的是d33選擇器

    4.交集選擇器

    • 選擇器之間沒有任何的連接符
    • 了解即可
    div.s{
        color: yellow;
    }
    注:既是div選擇器又是s選擇器
    html:
    <div class="s">這是交集選擇器</div>

    5.多類名選擇器

    • 一次性控制一個選擇器(邏輯最后的那個選擇器),前置位的選擇器是修飾性選擇器
    • 只是為了更精確
    .d1.d2{
        color: tan;
    }
    .d1.d2.d3{
        color: #123
    }

    二、組合選擇器的優先級

    1.同目錄結構下

    1. 子代與后代優先級相同

      例子:body>div == body div

    2. 相鄰與兄弟優先級相同

      例子:div+span == div~span

    2.不同目錄下

    根據選擇器的權值進行比較,權值為標簽權重之和

    選擇器 權重
    通配(*) 1
    標簽(div) 10
    類、屬性(class) 100
    id 1000
    !import 10000

    注:只有控制的是同一目標才具有可比性

    • 權值比較時,關心的是值的大小,不關心位置與具體選擇器名
    • id永遠比class大,class永遠比標簽大。
            /*10*/
            div{
                color: red;
            }
            /*20*/
            div div{
                color: yellow;
            }
            .d2{
                color: blue;
            }
            /*.d2抵消,剩10*/
            div .d2{
                color: orange;
            }
            /*等價與div .d2,權值相同,位置決定*/
            .d1 div{
                color: pink;
            }
            /*又多10*/
            div .d1 div{
                color: tan;
            }
            /*不具有可比性*/
            div .d1 >div{
                color: green;
            }
            /*高于一切class及標簽*/
            #dd1 div {
                color: #000;
            }

    三、屬性選擇器

    屬性選擇器的權值 == class選擇器的權重

    有屬性class的所有標簽
    [class]{
        color: orange;
    }
    /*有屬性class且值為d2的所有標簽(值不影響權重)*/
    [class="d2"]{
        color: pink;
    }
    
    /*是div且class="d2",增加了權重*/
    div[class="d2"]{
        color: blue;
    }

    子串匹配屬性選擇器

    模糊搜索

    [calss ^= 'he']{
        color: yellow;
    }
    [calss $= 'ld']{
        color: tan;
    }
    [class *= 'ow']{
        color: cyan;
    }
    • [attr]:匹配擁有attr屬性的標簽
    • [attr=val]:匹配擁有attr屬性,屬性值為val的標簽
    • [attr^=val]:匹配擁有attr屬性,屬性值以val開頭的標簽
    • [attr$=val]:匹配擁有attr屬性,屬性值以val結尾的標簽
    • [attr*=val]:匹配擁有attr屬性,屬性值包含val的標簽

    四、盒模型

    • 廣義:文檔中所有功能性及內容性標簽,及文檔中所有顯示性標簽
    • 狹義:文檔中以塊級形式存在的標簽

    盒模型由四個成員組成:margin+border+padding+content

    • 四個成員均有自身獨立顯示區域,相互之間不影響(視覺上感覺有影響)
    • margin(外邊距),padding(內邊距),他們兩個負責控制布局
    • border控制邊框
    • content控制內容

    塊級元素和內聯元素

    塊級元素:

    • 總是在新行上開始,占據一整行
    • 高度,行高以及外邊距和內邊距都可控制;
    • 寬度缺省是它的容器的100%,除非設定一個寬度
    • 它可以容納內聯元素和其他塊元素。

    內聯元素:

    • 和其他元素都在一行上
    • 高,行高及外邊距和內邊距部分可改變;
    • 寬度只與內容有關;
    • 行內元素只能容納文本或者其他行內元素。
    • 外邊界只能對左右起作用,內邊距都起作用

    display:顯示方式

    • 塊:block
    • 內聯:inline
    • 內聯塊:inline-block

    1.content

    • 通過設置width與height來規定content
    • 塊級標簽可以設置自身寬高,默認寬為父級寬、高為0,高度可以由內容決定
    • 內聯標簽不可以設置自身寬高,默認均為0,寬高由內容決定(可以通過設置display:block改成塊標簽)

    2.border

    • border組成:border-width(寬度),border-color(顏色),border-style(風格)三部分組成。
    • border-width成員:border-left-width、border-right-width、border-top-width、border-bottom-width
    • border-color成員:border-left-color、border-right-color、border-top-color、border-bottom-color
    • border-style成員:border-left-style、border-right-style、border-top-style、border-bottom-style
    風格 解釋
    solid 實線
    dashed 虛線
    dotted 點狀線
    double 雙實線
    groove 槽狀線
    ridge 脊線
    inset 內嵌效果線
    outset 外凸效果線

    border整體設置:border:1px solid red;

    設置border-color: transparent;會透出背景顏色

    3.padding和margin

    • padding和margin都具有的成員:X-left、X-right、X-top、X-bottom
    • 整體設置
    賦值個數 方位
    1 上下左右
    2 上下 | 左右
    3 上 | 左右 | 下
    4 上 | 右 | 下 | 左

    規律:從上開始,順時針賦值,不足找對面

    使用谷歌瀏覽器頁面調試工具

    .box{
        width: 100px;
        height: 100px;
        padding: 10px;
        background: red;
    }
    html:
    <div class="box"></div>

    通過上圖可以看出:

    padding與content公有背景顏色,紅色區域為102*120

    content區域為100*100

    五、邊界圓角

    border-radius(含義是“邊框半徑”)

    1.整體設置

    border-radius可以同時設置一個到四個值,如果設置1個值,表示四個圓角都使用這個值,如果設置2個值,表示左上左上角和右下角使用第1個值,右上角和左下角使用第二個值。如果設置三個值,左上角第1個值,右上角,左下角第2個值,右下角第三個值。值設置的是圓角的水平半徑和垂直半徑,單位可以是任意css合法度量值。

    賦值個數(值類型:長度 | 百分比) 解釋
    1 左上 右上 左下 右下
    2 左上 右下 | 右上 左下
    3 左上 | 右上 左下 | 右下
    4 左上 | 右上 | 右下 | 左下

    border-radius:30px;

    總結:左上為第一個角,順時針,不足找對角

    使用斜杠(/)可以設置第二組值,第一組值表示水平半徑,第二組值表示垂直半徑,分別可以設置一到四個值。

    border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px;

    2.單角設置

    成員 解釋
    border-top-left-radius 左上 方位
    border-top-right-radius 右上 方位
    border-bottom-left-radius 左下 方位
    border-bottom-right-radius 右下 方位

    六、a,img,list標簽

    1.超鏈接

    <a href='要跳轉的地址'>超鏈接文字</a>

    1.1 a標簽的屬性

    • href:代表鏈接一個url地址
    url除了可以是網頁外,還可以是其它的文件。還可以設置為網頁中的某一個位置(錨點).
    還可以是Email地址(mailto),電話(tel),短信(sms)
    • title:鼠標懸浮的文本提示
    • target:規定何處打開鏈接文檔
    target=_blank: 將鏈接內容在新的瀏覽窗口中打開。 
    target=_self:  將鏈接的內容,顯示在目前的窗口中。 
    target=_parent:將鏈接的內容,當成文件的上一個畫面。 
    target=_top:這個參數可以解決新內容被舊框窗包圍的困擾,使用這參數,會將整個畫面重新顯示成鏈接的畫面內容。

    1.2 相對路徑:

    ./或省略代表當前文件所在路徑,可以訪問與該文件同路徑下的所有文件及文件夾
    ../代表上一級目錄

    1.3 a標簽的reset操作

    a {
        color: #333;
        text-decoration: none;
        outline: 0;
    }

    1.4 錨點

    用<a name=“”>定義,例如:<a name=“here1”>第一部分</a>,
    使用<a href=“#here1”>跳轉到第一部分</a>超鏈接就可以定位到網頁中的“第一部分”這個位置。

    1.5 鼠標樣式

    {
        cursor: pointer;
    }
    常用:
    text  文字選擇器
    crosshair   十字架
    wait  等待
    help  幫助
    pointer 小手

    2.圖片

    <img src="圖片地址" title="" alt="">

    2.1 常用屬性

    • alt -- 代表圖像的替代文字(異常解釋)
    • src -- 代表一個圖像源(就是圖像的位置)
    • title 提示信息
    • border – 代表圖片邊框的寬度
    • height -- 代表一個圖像的高度
    • width -- 代表一個圖像的寬度
    • usemap 將圖像定義為客戶器端圖像映射。

    3.列表

    3.1 html列表標簽

    • <ul></ul> 代表HTML無序列表 ,里面每一列表項使用<li>標簽定義

    • <ol></ol> 代表HTML有序列表 ,里面每一列表項使用<li>標簽定義

      屬性
      start 規定有序列表的起始值。
      type   規定在列表中使用的標記類型。(1 a A  i  I)
      reversed  H5新添加 降序
    • <li></li> 代表HTML列表項目,每個列表項使用一對<li></li>標記

    • <dl></dl> 定義了定義列表(definition list)

    • <dt></dt> 標簽定義了定義列表中的項目(即術語部分)

    • <dd></dd> 在定義列表中定義條目的定義部分。

    3.2 css列表屬性

    • list-style-type
    disc        實心點
    circle      圓圈
    square      小方框
    decimal     數字
    lower-roman 小寫羅馬字
    upper-roman 大寫羅馬字
    lower-alpha 小寫字母
    upper0alpha 大寫字母
    • list-style-position 位置
    inside   標示在li里面
    outside  標示在li外面
    • list-style-image 使用圖片 url(./123.gif)
    • list-style 復合屬性
    list-style: type position image
    list-style: none

    七、偽類選擇器

    偽類以冒號(:)開頭

    1.a標簽的四大偽類

    • :link:未訪問狀態
    • :hover:懸浮狀態
    • :active:活躍狀態(鼠標按下不動的狀態)
    • :visited:已訪問狀態(瀏覽器緩存)

    普通標簽也可以運用 :hover :active

    .box{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .box:hover{
                background-color: orange;
                cursor: pointer;
            }
            .box:active{
                width: 400px;
                border-radius: 50%;
            }

    2.內容偽類

    結合content使用,可以單獨出現

    • :before:內容之前
    • :after:內容之后
    .txt:before{
        content: "我真帥~~~"
    }
    .txt:after{
        content: "~~~我是真的帥"
    }
    *:after{
        content:"hehe"
    }

    3.位置(索引)偽類

    位置從1開始

    • :nth-child(n):位置優先,再匹配類型
    • :nth-of-type(n):類型優先,再匹配位置
    注:找到所有結構下的第2個標簽,如果剛好是div那么匹配成功
    div:nth-child(2){
        color: green;
    }
    注:先將頁面中所有div找出,在匹配哪些在自己結構層次下的第二個div
    div:nth-of-type(2){
        color: cyan;
    }

    應用場景:

    在同一目錄下都是同一類型,用 :nth-child(n)

    在同一目錄下有多種類型的標簽,用 :nth-of-type(n)

    4.取反偽類

    • :not(a):對a進行取反
    [d]{
        color:red;
    } d標簽控制的是紅色
    :not([d]){
        color:red;
    } 除了d標簽控制的其它都是紅色
    span:not([d]){
        color:red;
    } 是sapn標簽并且沒有d的,都是紅色

    八、盒模型布局

    • 布局方位:margin-left、margin-right、margin-top、margin-bottom
    • 影響自身布局:margin-left、margin-top(自身位置改變)
    • 影響兄弟布局:margin-right、margin-bottom(自身位置不變)

    margin-bottom影響上下兄弟,盡量別對margin-right進行設置

    margin-right影響左右兄弟,盡量別對margin-bottom進行設置

    布局坑

    盒模型布局坑只出現在margin-top相關的地方

    1.兄弟坑

    上下兩個模型重疊時取最大值(這里取30px)
    .s1{
        margin-bottom: 20px;
    }
    .s2{
        margin-top: 30px;
    }

    2.父子坑

    將子模型移動到中間

    html:
    <div class="sup">
        <div class="sub"></div>
    </div>
    .sup{
        width: 200px;
        height: 200px;
        background-color: cyan;
    }
    .sub{
        width: 100px;
        height: 100px;
        background-color: orange;
    }

    坑:

    .sup{
        margin-top:50px;
    }
    .sub{
        margin-top50px;
        margin-left:50px;
    }
    父子top重疊,取最大值。

    解決盒模型經典布局坑:

    方法1.將父級固定(子級無法拖動)
    .sup{
        border-top:1px solid transparent;
        /*保證顯示區域200*200*/
        height:199px; 
    }
    方法2.通過padding
    .sup{
        padding-top:50px;
        height:150px;
    }
    posted @ 2018-09-22 20:16 學一點也是好 閱讀(...) 評論(...) 編輯 收藏
    江苏11选5软件