zoukankan      html  css  js  c++  java
  • 我的CSS学习笔记

    1.文字修饰中text-decoration:blink(文字闪烁)在现在的浏览器中已经无法显示效果.

    2.排列元素中的文本text-align:justify的效果为使文字行两端对齐.但是要注意的是,不足一行的文字无法显示该效果,且段落的最后一行也无法显示该效果.

    3.设置文字阴影与模糊效果text-shadow,是控制网页中文字阴影属性的样式(Style),但是,目前只有Safari浏览器支持text-shadow。如果是其他浏览器想实现文字阴影效果,必须使用一些其他的技术或是属性。当然,纯“CSS”也是可以的。其语法为:
    text-shadow : color  length length opacity
    其中,
    color :  设置阴影颜色;
    length :  设置阴影水平方向的延长值;
    length :  设置阴影垂直方向的延长值;
    opacity :  由浮点数字和单位标识符组成的长度值.不可为负值.指定模糊效果的作用距离.如果你仅仅需要模糊效果,将前两个length全部设定为0.
    注意:此属性只支持Safari浏览器.
    注意:上述4个属性是写在一起的.
    注意:可以被用于伪类:first-letter :first-line.

    4.white-space:pre 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐.但是实际上并看不到效果,多个空格还是会被合并成一个,因为ie对white-space:pre的解析不符合css1标准,是个bug.

    5.text-underline-position只能与text-decoration:underline联用才能有效果,与其他属性,例如text-decoration:overline,text-decoration:line-through等都不能产生效果.text-underline-position:above的效果等同于text-decoration:overline.

    6.border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
    none :  无边框。与任何指定的border-width值无关
    hidden :  隐藏边框。IE不支持
    dotted :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
    dashed :  在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
    solid :  实线边框
    double :  双线边框。两条单线与其间隔的和等于指定的border-width
    groove :  根据border-color的值画3D凹槽
    ridge :  根据border-color的值画菱形边框
    inset :  根据border-color的值画3D凹边
    outset :  根据border-color的值画3D凸边
    说明:
    如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框。
    如果只提供一个,将用于全部的四条边。
    如果提供两个,第一个用于上-下,第二个用于左-右。
    如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
    要使用该属性,必须先设定对象的heightwidth属性,或者设定position属性为absolute。
    如果border-width不大于0,本属性将失去作用.
    对应的脚本特性为borderStyle.

    7.border-bottom : border-width || border-style || border-color
    其中border-width : medium | thin | thick | length 的参数有:
    medium :  默认宽度
    thin :  小于默认宽度
    thick :  大于默认宽度
    length :  由浮点数字和单位标识符组成的长度值。不可为负值.
    注意:
    如果提供全部四个参数值,将按上-右-下-左的顺序作用于四个边框.
    如果只提供一个,将用于全部的四条边.
    如果提供两个,第一个用于上-下,第二个用于左-右.
    如果提供三个,第一个用于上,第二个用于左-右,第三个用于下.
    要使用该属性,必须先设定对象的heightwidth属性,或者设定position属性为absolute.
    如果border-style设置为none,本属性将失去作用.
    对应的脚本特性为borderWidth.

    8.margin又名外补丁,表示边距,定义元素周围的空间;padding又名内补丁,表示填充,定义元素边框与元素内容之间的空白.

    9.list-style:list-style-type|list-style-position|list-style-image
    同时使用所有属性的例子:list-style:disc inside url("xx.jpg")

    10.list-style-type设置列表项标记的类型(以下标记有CSS1的是可以使用的值):
    disc :  CSS1 实心圆
    circle :  CSS1 空心圆
    square :  CSS1 实心方块
    decimal :
     CSS1 阿拉伯数字
    lower-roman :
     CSS1 小写罗马数字
    upper-roman :
     CSS1 大写罗马数字
    lower-alpha :
     CSS1 小写英文字母
    upper-alpha :
     CSS1 大写英文字母
    none :
     CSS1 不使用项目符号
    armenian :  CSS2 传统的亚美尼亚数字
    cjk-ideographic :  CSS2 浅白的表意数字
    georgian :  CSS2 传统的乔治数字
    lower-greek :  CSS2 基本的希腊小写字母
    hebrew :  CSS2 传统的希伯莱数字
    hiragana :  CSS2 日文平假名字符
    hiragana-iroha :  CSS2 日文平假名序号
    katakana :  CSS2 日文片假名字符
    katakana-iroha :  CSS2 日文片假名序号
    lower-latin :  CSS2 小写拉丁字母
    upper-latin :  CSS2 大写拉丁字母
    说明:
    list-style-image属性为none或指定图像不可用时,list-style-type属性将发生作用.
    仅作用于具有display值等于list-item的对象(如li对象).
    注意:ol对象和ul对象的type特性为其后的所有列表项目(如li对象)指明列表属性.
    IE5.5尚不支持所有CSS2的值.
    对应的脚本特性为listStyleType.

    11.list-style-position:inside|outside设置列表中列表项标记被放置的位置
    outside :  列表项目标记放置在文本以外,且环绕文本不根据标记对齐
    inside :  列表项目标记放置在文本以内,且环绕文本根据标记对齐
    说明:
    仅作用于具有display值等于list-item的对象(如li对象).
    注意:ol对象和ul对象的type特性为其后的所有列表项目(如li对象)指明列表属性.
    对应的脚本特性为listStylePosition.

    12.line-height:number设置一个数字,此数字会与当前的字体尺寸相乘来设置行间距.

    13.clip:rect(top,right,bottom,left)
    Clipping的中文解释就是剪辑的意思,这个属性决定了对象的哪个部位可以被看到.它不会改变任何对象的性质.
    Clipping 的区域是一个矩形, 而这个矩形的尺寸取决于于四个边的位置.
    这四个边用 top, right, botton, left 来表示.
    请注意:这四个边的位置是相对于对象的而不是相对于窗口的,且这个属性要和position:absolute一起用才有效果.例如:
    img
    {
    position:absolute;
    clip:rect(0px,50px,200px,0px)
    }
    脚本语法:object.style.clip="rect(0px,50px,200px,0px)"


    14.IE不支持伪类:lang

     

    15.设置宽度以自适应分辨率

    min-760px;

    expression(document.body.clientWidth < 840? "800px": "85%" );

     

     16.让超出table 中td宽度的文字自动生成“...”

    首先在table的style中加上“table-layout:fixed”,然后在td的style中加上“overflow:hidden; text-overflow:ellipsis; white-space:nowrap”即可实现。


     

     

  • 相关阅读:
    web项目优化
    mysql 优化笔记
    Java 调用 google 翻译
    Git回滚merge操作
    mybatis 批量插入 返回主键id
    idea tomcat debug 失效
    mysql 常用语句
    xstream 解析xml报文
    activeMQ 讲解及实战
    linux svn apache
  • 原文地址:https://www.cnblogs.com/guoxiaowen/p/1076845.html
Copyright © 2011-2022 走看看