• Css 应用一


    1. Placeholder使用

    CSS3里有相应的通用的对Placeholder提示信息美化的方法。你可以设置提示信息文字的颜色,透明度,背景色等。

    为了最大化的兼容所有浏览器,给CSS里的placeholder属性添加浏览器引擎前缀还是有必要的。

    示例:修改文字颜色。

    /* WebKit browsers */

    ::-webkit-input-placeholder {

         color: #fff;

    opacity: 1;

    }

    /* Mozilla Firefox 4 to 18 */

    :-moz-placeholder {

         color: #fff;

         opacity: 1;

    }

    /* Mozilla Firefox 19+ */

    ::-moz-placeholder {

         color: #fff;

         opacity: 1;

    }

    /* Internet Explorer 10+ */

    :-ms-input-placeholder {

         color: #fff;

         opacity: 1;

    }

    1. background 背景设置

    background-image  设置背景图片;

    background-repeat  设置背景图片平铺顺序;

    background-position  定位背景图片;

    background-size     设置背景图片的大小;

    background-color    设置背景的颜色。

             背景可以连写,也可以分开写。

             如:

    { background:url(路径) no-repeat/repeat-x/repet-y 20px 20px;}或

    {

    Background-image: url(路径);

    Background-repeat: no-repeat/repeat-x/repet-y;

    Background-position: 20px 2px;

    Backgjround-size: 20px 20px;

    }

    1. float 的应用

    float属性定义元素在哪个方向浮动。

    Left 左浮动;

    Right 右浮动;

    None 默认,不浮动;

    Inherit 继承父元素float属性。

    浮动属性是把元素变成一个块级元素,通过边距可以控制它的位置。

    1. position 属性应用

    relative 定义父级元素.

    Absolute 定义子级元素。

    Fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。

    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

            

    Relative 生成相对定位的元素,相对于其正常位置进行定位。

    Static 默认值。没有定位,元素出现在正常的流中

    该属性可以让元素不按正常的流式布局进行排列,可以通过left ,top,right,bottom进行位置定位,通过z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。可以使用负值,但是只能在定位元素中使用。

    1. css样式的优先级顺序

    css样式的调用分为:内部样式,外部样式,内联样式;

    内联样式的级别最高>内部样式>外部样式。

    Css样式选择器的优先级:

    内联样式表的权值最高 1000;

    ID 选择器的权值为 100

    Class 类选择器的权值为 10

    HTML 标签选择器的权值为 1

    CSS 优先级法则

    选择器都有一个权值,权值越大越优先;

    当权值相等时,后出现的样式表设置要优于先出现的样式表设置;

    创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;

    继承的CSS 样式不如后来指定的CSS 样式;

    <body>

               <div id=”span”>

    <p class=”spanCon”>

                  <span>123</span>

    </p>

    </div>

    </body>

    上面例子我们来定义123的字体颜色;

    A  <span style=”color:#000”>123</span> 此时颜色为#000,且级别最高。

    B  .spanCon span{ Color:#000;}

    C  #span .spanCon span{ Color:#000;}

    D  span{Color:#000;}

    顺序为A > B > C > D 。

    使用脚本添加样式

    IE 浏览器下载或者渲染的顺序可能如下:

    IE 下载的顺序是从上到下;

    JavaScript 函数的执行会阻塞IE 的下载;

    IE 渲染的顺序也是从上到下;

    IE 的下载和渲染是同时进行的;

    在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(但并不是说所有相关联的元素都已经下载完。)

    在下载过程中,如果遇到某一标签是嵌入文件,并且文件是具有语义解释性的(例如:JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。并且在下载后进行解析,如果JS、CSS中如有重定义,后面定义的函数将覆盖前面定义的函数。

    解析过程中,停止页面所有往下元素的下载。样式表文件比较特殊,在其下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行样式渲染。并以此方式一直渲染下去,直到整个页面渲染完成。

    Firefox 处理下载和渲染的顺序大体相同,只是在细微之处有些差别,例如:iframe 的渲染。

  • 相关阅读:
    [NOI2004]cashier 郁闷的出纳员
    [HNOI2004]宠物收养所
    [HNOI2002]营业额统计
    浅谈算法——莫比乌斯反演
    浅谈算法——splay
    [POI2006]Tet-Tetris 3D
    BZOJ2733 [HNOI2012]永无乡 【线段树合并】
    UOJ279 【UTR #2】题目交流通道
    UOJ278 【UTR #2】题目排列顺序
    POJ2761 Feed the dogs
  • 原文地址:https://www.cnblogs.com/wuph/p/5004549.html
Copyright © 2020-2023  润新知