zoukankan      html  css  js  c++  java
  • 蔷薇教我的调CSS样式的方法

    1.每个div的css最好加浮动 要么就清除浮动
    2.如果只是一个浏览器不兼容你就可以用每个浏览器专门识别的符号控制
    3.!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权(参见:W3.org的解释)。语法格式{ sRule!important },即写在定义的最后面,例如:

    box{color:red !important;}
    最重要的一点是:IE一直都不支持这个语法,而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义,例如,我们定义这样一个样式:

    .colortest {
    border:20px  solid #60A179 !important;
    border:20px  solid #00F;
    padding: 30px;
    width : 300px;
    }
    在Mozilla中浏览时候,能够理解!important的优先级,因此显示#60A179的颜色:

    4.可以用margin、padding定位
    5.在大的div层里用了浮动后,小层div如果出问题,可能是需要清除浮动clear:left/right/both;
    6.div中一般要加浮动;
    7.有时候需要加margin:0px;padding:0px;是因为有些浏览器的margin、padding的值不为0;
    8.IE更新的速度实在太快了,ie7还未普及,ie8就来了,这样广大的站长朋友就有的辛苦了,要计划网站的重新改版了,而这篇文章就是寻求最简单的方法解决ie8兼容问题,当然这只是最简单的方法解决了兼容问题,而不是从根本上解决了兼容问题。众所周之,符合编码规范才能真正解决浏览器兼容问题。

    方法一、要在页面中加入如下HTTP meta-tag:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 

    只要IE8一读到这个标签,它就会自动启动IE7兼容模式,保证页面完整展示。
    更多:http://www.okajax.com/a/200811/112b2262008.html
    CSS浏览器兼容方案
    http://www.okajax.com/a/200904/css.html
    9.Word-spacing 定义了各个单词之间的间距 Normal<length>必须以长度为单位
    Letter-spacing 定义了每个字母之间的间距 同上
    Text-decoration 定义文字的“装饰”样式 None|underline|overline|

    Vertical-align 定义了元素在垂直方向上的位置
    Baseline|sub|super|top|text-top|middle|bottom|text-bottom

    text-transform 使文本转换为其它形式 Capitalize|uppercase|lowercase|none
    Text-align 定义了文字的对齐方式 Left|right|center|justify
    Text-indent 定义了文本的首行的缩进方式 <length>|<percentage>
    Line-height 定义了文本的行高 Normal|<unmber>|<length>|

    例子:p style="letter-spacing:5px;text-align:justify;text-indent: 4em;line-height:17pt">我们看到经过文本属性处理的文本字与字之间多了间距,行与行之间多了行高,对齐方式变成了两端对齐,并且段首又多缩进了两格。</p>
    解释:letter-spacing设置了字间距为5px,其中5px为一个长度单位;text-align设置了对齐方式为两端对齐;indent设置了缩进格为4em;line-height设置了行高为17pt

    9.background-color:没有none这个值

    10.CSS透明度原理
    .transparent_class {
     filter:alpha(opacity=50);
     -moz-opacity:0.5;
     -khtml-opacity: 0.5;
     opacity: 0.5;
    }

    上面的几个属性分别是:

    •opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持firefox, Safari和 Opera.
    •filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1.
    •-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
    •-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。

    CSS透明度继承问题
    但CSS的透明属性涉及到一个继承问题,当为父级元素设置透明度后,子元素将自动继承其透明度


     


     

  • 相关阅读:
    Set the Welcome Page in SharePoint through Code
    调试工具
    Sublime Text 3编译Sass
    js储存参数的数组arguments
    js 判断客户端浏览器
    手机设计尺寸
    required
    前端工具HBuilder安装Sass插件
    apache极简配置虚拟机
    跳转输入框按键操作
  • 原文地址:https://www.cnblogs.com/thinksasa/p/2946897.html
Copyright © 2011-2022 走看看