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>
    显示效果背景色为黑色.

  • 相关阅读:
    Squid代理上网服务
    设置PyCharm创建py文件时自动添加头内容
    kubernetes容器集群管理启动一个测试示例
    kubernetes容器集群管理部署node节点组件
    kubernetes容器集群管理部署master节点组件
    kubernetes容器集群管理创建node节点kubeconfig文件
    kubernetes容器集群部署Flannel网络
    kubernetes容器集群部署Etcd集群
    kubernetes容器集群自签TLS证书
    kubernetes(k8s)容器集群管理
  • 原文地址:https://www.cnblogs.com/zcz527/p/3100119.html
Copyright © 2011-2022 走看看