• HTML样式表的使用


    层叠样式表: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的不同。

    例题1:内嵌样式表

    内嵌样式表1

    例题2:外部样式表

    外部样表一

    例题3:选择器

    选择器

    选择器css

    例题3复合选择器

    复合选择器复合选择器css

  • 相关阅读:
    Java虚拟机
    Java集合常见面试题一
    5个新自动化测试框架,你值得了解
    Mock工具介绍
    空降,如何做好管理?
    QA在业务变动中如何维护测试用例?
    接口越权扫描平台初探
    程序员删代码泄愤,被判刑5个月,网友:年轻人不讲武德?!
    哪些 Python 库让你相见恨晚?
    两篇毕业论文致谢同一个女朋友?哈哈哈哈!
  • 原文地址:https://www.cnblogs.com/wllhq/p/4234927.html
Copyright © 2020-2023  润新知