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

    层叠样式表:CSS Cascading Style SheetV2.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)外部样式表的调用

    wps4191.tmp[4] 

    关掉样式表依然可以看到

    wps41B1.tmp[4] 

     

    二、样式表的选择器:

     

     

     

    内嵌、外部样式表的一般语法:

    选择器

       样式=;

       样式=;

       样式=;

       ....

    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;}

     

    wps4200.tmp[4] 

    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 .uudiv.uu的不同。

     

     

     

     

     

     

     

     

  • 相关阅读:
    hdu 4302 Holedox Eating 夜
    poj 1947 Rebuilding Roads 夜
    hdu 4303 Hourai Jeweled 夜
    poj 1286 Necklace of Beads 夜
    poj 2057 The Lost House 夜
    hdu 4301 Divide Chocolate 夜
    poj 3140 Contestants Division 夜
    BOM(二)
    Str的方法
    求出字符窜的字母的个数
  • 原文地址:https://www.cnblogs.com/981971554nb/p/4308589.html
Copyright © 2011-2022 走看看