• 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

  • 相关阅读:
    mybatis sql xml 字符逃脱
    npp 文本编辑器 开源
    保存分区表时出现错误(0000000001)函数不正确
    常见笔记本进入bios方法
    chrome 字体太浅,如何设置
    Python基础概念
    xp下复制ZIP文件极慢,右键点击也极慢(ZIP文件越大越慢) 解决方法
    联想V460 装XP。记录
    极度诡异的内存问题,这几天遇到。特记录
    时间注意事项
  • 原文地址:https://www.cnblogs.com/wllhq/p/4234927.html
Copyright © 2020-2023  润新知