zoukankan      html  css  js  c++  java
  • HTML基础知识总结二

    1、CSS(层叠样式表)

    有三种使用方式:元素内联、页面嵌入和外部引用
    元素内联:直接将样式写入元素的style属性中,这种方式适用于没有可复用性的场合.
    例如:
    <input type="text" readonly="readonly" style="background-color:red">
    页面嵌入:表示页面中所有某一元素都是采用指定的样式,适合于样式复用,减小页面体积.
    例如:
    在head中加入
    <style type="text/css">
    input{border-color:Yellow;color:Red;}
    </style>
    外部引用:将css内容写入css后缀的文件中,textarea{background:yellow}然后在页面中引用,
    在head中加入<link type="text/css" rel="Stylesheet" href="s1.css"/>,适合于多个页面共享css.

    2、层(Div)、块(Span)

    (1)、<div></div>将内容放到层中,就以将这些内容当成一个整体进行处理,比如整体隐藏、整体移动等.
    div非常强大和常用,类似于WinForm的Panel.
    (2)、span:div是将内容放到一个矩形的区块中,会影响布局,而span只是把一段内容定义成一个整体进
    行操作,但不影响布局、显示.

    3、常见样式

    (1)、css计量单位:css中表示宽度、距离时有多种计量单位:px(像素)、30%(百分比)、em(相对单位)等.
    (2)、background-color:背景颜色;color:文本颜色.
    (3)、border-style:solid;边框风格,实线(默认是没有),还有dotted(点)等值;border-color:边框颜色;border-width:边框宽度(默认是0).
    例如:
    style="border-color:Red;border-1px;border-style:dotted;"
    (4)、display:元素是否显示,可选值none(不显示)、block(显示为块级元素,此元素前后会带有换行符)、
    inline(显示为内联元素,元素前后没有换行符)等.
    (5)、cursor:鼠标在元素上时显示的光标图标,可选值:cursor(默认光标)、pointer(超链接上的手)、
    text(输入Bean)、wait(忙沙漏)、help(帮助)、光标变成图案cursor:url()等.
    (6)、LI不显示圆点:LIST-STYLE-TYPE:none;一般设在li或ul上.

    4、样式选择器

    对于非元素内联的样式需要定义样式选择器,有三种:标签选择器、class选择器和id选择器
    标签选择器:对于指定的标签采用统一的样式
    例如:input{border-color:Yellow;color:Red;}
    class选择器:以定义一个命名的样式,然后在用到它的时候设定元素的class属性为样式的名称,还可以同时设定多个class,名称之间加空格
    例如:.warning{background:yellow;}
    .highlight{font-size:xx-large;cursor:help;}
    <table>
    <tr><td class="highlight">aaa</td>
    <td class="warning">bbb</td>
    <td class="highlight warning">ccc</td></tr>
    </table>
    id选择器:为指定id的元素设定样式,id前加#
    例如:#username{font-size:xx-large;}
    <input id="username" type="text" value="aaaa"/>

    5、伪选择器

    为标签的不同样式设定不同的样式
    例如:
    A:visited:超链接点击过的样式;A:active:选中超链接时的样式;A:link:超链接未被访问过的状态;
    A:hover:鼠标移到超链接时的状态.
    A:visited{text-decoration:none}
    A:active{text-decoration:none}
    A:link{text-decoration:none}
    A:hover{text-decoration:underline}

    6、样式优先级

    class选择器和style可以同时使用,当两者设定的样式有冲突时,style里的样式会覆盖class里的样式.
    例如:.warning{background:yellow;}
    <table>
    <td class="warning" style="background:black;">bbb</td>
    </table>
    显示效果背景色为黑色.

  • 相关阅读:
    什么是webview
    juqery.fn.extend和jquery.extend
    LeetCode
    5. Longest Palindromic Substring
    42. Trapping Rain Water
    11. Container With Most Water
    621. Task Scheduler
    49. Group Anagrams
    739. Daily Temperatures
    3. Longest Substring Without Repeating Characters
  • 原文地址:https://www.cnblogs.com/zcz527/p/3100119.html
Copyright © 2011-2022 走看看