zoukankan      html  css  js  c++  java
  • 《精通CSS》——个人总结

    【属性选择器】

    属性选择器可以根据某个属性是否存在或属性的值来寻找元素。

    只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

    事例:将带有 title 属性的所有元素设置样式

    [title]{
       color:red;  
    }

    【盒模型】

    在IE中,width中包括了内边距(padding),而在其他大多数浏览器中,width不包括内边距,所以在设置width时需注意兼容性。

    当两个或者更多垂直外边距(margin)相遇时,它们将形成一个外边距,这个外边距的高度等于两个发生叠加的外边距的高度中较大者。

    【定位】

    CSS中有普通流、浮动和绝对定位三种基本的定位机制。除非专门所指,否则所有框都在普通流中定位。

    有相对定位,绝对定位(使元素的位置与文档流无关,因此不占据空间)。

    浮动:会让元素脱离文档流。

    clear属性:清除浮动。

    overflow属性:值为hidden或auto。也会自动的清理包含的任何浮动元素。

    【背景图像效果】

    不要将像素或百分数等单位与关键字混合使用。

     投影方法:box-shadow(垂直和水平偏移,投影的宽度,颜色这四个值)。

    【不透明度的设置】

    css:opacity(除了对背景生效外,应用它的元素的内容也会继承它)。

    RGBa:background-color:ragb();值为0代表完全透明,为1代表100%不透明。

    PNG透明度:PNG文件支持alpha透明度。例;

    .img-wrapper div{
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
        (src='图片地址',sizingMethod='crop');
        backgrnund:none;
    }

    【伪类】

    伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。

    实例:

    //锚伪类
    a:link {color: #FF0000}        /* 未访问的链接 */
    a:visited {color: #00FF00}    /* 已访问的链接 */
    a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
    a:active {color: #0000FF}    /* 选定的链接 */

    在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。a:active 必须被置于 a:hover 之后,才是有效的。

    css2::first-child伪类:表示第一个元素;:lang伪类:向带有指定 lang 属性的元素添加样式。

    css3允许使用:target伪类,为目标元素设置样式。

    【对链接应用样式】

    突出显示不同类型的链接:使用属性选择器。

    类似按钮的链接:链接应该只用于GET请求,决不要用于POST请求。

    翻转:css3包含text-shadow、box-shadow和border-radius等属性。Safari 4 beta专有值-webkit-gradient,Safari还提供了一个box-reflect的专有属性。例:

    a{
        display: block;
        width: 6.6em;
        line-height: 1.4;
        text-align: center;
        text-decoration: none;
        border:1px solid #66a300;
        color: #fff;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius: 6px;
        background-image: -webkit-gradient(linear,left top,left bottom,from(#abe142),to(#67a400));
        background-color: #8cca12;
        text-shadow: 2px 2px 2px #66a300;
        -moz-box-shadow:2px 2px 2px #ccc;
        -webkit-box-shadow:2px 2px 2px #ccc;
        box-shadow: 2px 2px 2px #ccc;
        -webkit-box-reflect:below 2px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(0.52,transparent),to(white));
    }

    结果如下:

    纯css提示工具:用锚进行定位。

    【表单及数据表格】

    summary属性:应用于表格标签,用来描述表格的内容。

    表格标题可以设置值为row或col的scope属性,定义他们是行标签还是列标签。

    border-spacing属性可以控制单元隔之间的距离,但是IE7及以下版本不支持,所以可以用cellspacing属性。

    【表单元素】

    fieldset元素:用来对相关的信息块进行分组。会在周围加上一个细边框,若不要,可以设置border。

    legend元素:识别每个fieldset

    label标签极其重要,可以帮助添加结构和增加表单的可用性和可访问性。增加了表单对于使用辅助设备的用户的易用性。

    表单控件包含name和id属性。在表单输入控件和标签之间创建关联需要id属性,而将表单数据发挥服务器需要name属性。

    可以使用for属性将标签和表单控件关联起来。

    标签在默认情况下是行内元素,但是,将它们的display属性设置为block会使他们产生自己的块框,迫使输入元素转到下一行。

    提交按钮:可以在button标签中放一个图像,让图像成为控件。

  • 相关阅读:
    LeetCode0350.两个数组的交集 II
    LeetCode0055.跳跃游戏
    LeetCode0739.每日温度
    LeetCode面试题46.把数字翻译成字符串
    LeetCode0128.最长连续序列
    LeetCode面试题29.顺时针打印矩阵
    LeetCode0238.除自身以外数组的乘积
    2020软件工程最后一次作业
    如何防止XSS攻击
    需求规格说明书
  • 原文地址:https://www.cnblogs.com/wlfsmile/p/5950958.html
Copyright © 2011-2022 走看看