zoukankan      html  css  js  c++  java
  • 复习 层叠样式表

    层叠样式表:CSS Cascading Style Sheet。V2.1
    控制页面样式外观。

    一、样式表分三类:
    1.内联样式表。——放在元素的开始标记中。——只对当前元素起作用。
    <input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" />

    2.内嵌样式表。——放在页面的<head></head>中间。——可以对整个页面。
    <head>
    ...
    <style type="text/css">
    input
    {
    border:0px;
    border-bottom:1px solid red;
    }
    </style>
    </head>

    3.外部样式表。——放在一个单独的.css样式表文件中。——可以对整个网站。
    (1)外部样式表的定义

    (2)外部样式表的调用


    二、样式表的选择器:
    内嵌、外部样式表的一般语法:
    选择器

    样式=值;
    样式=值;
    样式=值;
    ....

    1.基本:
    (1)标签选择器:用标记名称来当选择器。
    input{.....}
    div{...}
    span{...}
    td{...}
    (2)类别选择器:在HTML元素中使用class对元素进行分类,然后使用这个class的值作为选择器。
    .class的名{.....}
    (3)ID选择器:针对HTLM中相应ID的元素起作用。
    #ID的名{...}
    #d1{font-size:48px;}
    #dd{border:5px dotted red;}

    2.复合:
    (1)用逗号隔开。——并列关系,同时起作用。
    input,#dd,.yellow,.uu
    {
    color:gray;
    line-height:28px;

    }

    (2)用空格隔开。——后代关系。
    div uu
    {
    background-color:blue;
    }

    <input name="txt" type="text" class="uu"/>
    <div>
    <input name="txt" type="text" />
    <input name="txt" type="text" class="uu" value="******"/>
    <span>
    <input name="txt" type="text" class="uu" value="******"/>
    </span>
    </div>
    什么是后代???

    (3)class二次筛选。
    标签选择器.class选择器{....}
    input.uu
    {
    border:5px double red;
    }

    例:

    对比:div .uu与div.uu的不同。

     ------------------------------------------------------

    -----------------------------------------------------------------------

    ----------------------------------------------------------

  • 相关阅读:
    html5画布
    html5标签及语义化
    MarkDown:基础知识
    20180624_Git分支管理之多人协作
    20180624_Git管理之Feature分支
    20180619_Git 分支管理之bug分支
    20180618_Git分支管理策略, 不使用Fast forward模式.
    20180618_Git分支管里之解决冲突
    20180618_Git的分支管理
    20180618_在githhub上创建远程仓库,再克隆远程仓库的代码
  • 原文地址:https://www.cnblogs.com/981971554nb/p/4518258.html
Copyright © 2011-2022 走看看