CSS样式表的属性

一、字体属性
 1、font,设置或者检索对象中文本特性的复合属性
    font:font-style||font-variant||font-weight||font-size||line-height||font-family
    声明方式中参数必须按照如上的排列顺序,且每个参数仅允许有一个值,忽略的将使用其参数对应的独立属性默认值。
 2、font-family,一个指定的字体名或者一个种类的字体族科
    font-family:字体1,字体2,字体3,....
 3、font-size,字体显示的大小
    font-size:<absolute-size>|<relative-size>
 4、font-style,以3种方式中的一个来显示字体:normal(普通), italic(斜体), oblique(倾斜)
    font-style:normal|italic|oblique
 5、font-weight,设定字体的粗细
    font-weight:normal | bold | bolder| lighter | 100-900
 6、font-variant,设定英文大小写转换
    font-variant:normal | small-caps
二、颜色和背景属性
 1、color,设定页面元素的前景色
    color:color-value
 2、background-color,设定页面元素的背景色
    background-color:color-value
 3、background-image,设定页面元素的背景图像
    background-image:none|url(url)
 4、background-repeat,设定一个指定的背景图像被重复的方式
    background-repeat:repeat|repeat-x|repeat-y|no-repeat
 5、background-attachment,设定背景图象是否跟随布面内容滚动
    background-attachment:scroll|fixed
 6、background-position,设定水平和垂直方向上的位置
    background-position:[value]|[top|center|bottom]|[left|center|right]
 7、background,背景属性的综合设定
    background:background-color|| background-image||background-repeat||background-attachment||background-position
三、文本属性
 1、letter-spacing,定义字符之间的间隔距离
    letter-spacing:normal|length
 2、word-spacing,定义单词之间的间隔距离
    word-spacing:normal|length
 3、text-decoration,有5个文本修饰属性,选择其中之一来修饰文本(下划线,上划线,删除线,闪烁文字,默认值)
    text-decoration:underline|overline|line-through|blink|none
 4、text-align,设置文本的水平对齐方式,包括左对齐、右对齐、居中、两端对齐
    text-align:left|right|center|justify
 5、vertical-align,设置文本的垂直对齐方式,包括垂直向上对齐、垂直向下对齐、垂直居中、文字向上对齐、文字向下对齐
    vertical-align:super|sub|top|middle|bottom|text-top|text-bottom
 6、text-indent,文字的首行缩进
    text-indent:value
 7、line-height,文本基线之间的间隔值
    line-height:value
 8、text-transform,控制英文文字大小写
    text-transform:capitalize|uppercase|lowercase|none
四、边框属性
 1、border,边框复合属性
 2、border-top,上边框
 3、border-left,左边框
 4、border-right,右边框
 5、border-bottom,下边框
 6、border-color,边框颜色
    border-color:color-value
 7、border-style,边框样式
    border-style:none|hidder|dotted|dashed|solid|double|groove|ridge|inset|outset
 8、border-top-color,上边框颜色
 9、border-left-color,左边框颜色
10、border-right-color,右边框颜色
11、border-bottom-color,下边框颜色
12、border-top-style,上边框样式
13、border-left-style,左边框样式
14、border-right-style,右边框样式
15、border-bottom-style,下边框样式
16、border-width,边框宽度
    border-width:medium|thin|thick|length
17、border-top-width,上边框宽度
18、border-left-width,左边框宽度
19、border-right-width,右边框宽度
20、border-bottom-width,下边框宽度
五、定位属性
 1、position:static|absolute|relative
 2、top,距离顶点纵坐标的距离
 3、left,距离顶点横坐标的距离
 4、bottom,对象与其最近一个定位珠父对象底边相关的位置
 5、right,对象与其最近一个定位的父对象左边相关的位置
 6、width,元素的宽度
 7、height,元素的高度
 8、z-index,决定元素的先后顺序和覆盖关系,值高的元素覆盖值低的元素
 9、clip,限定只显示剪切出来的区域,剪切出来的区域为矩形剪切设定两个点:一个是矩形左上角的顶点,由TOP和RIGHT两项设置,另一个是右下角的顶点,由BOTTOM和RIGHT两项设置
10、overflow,当元素内的内容超出元素所能容纳的范围时
             visible:无论元素容纳范围的大小,内容都会显示出来
             hidden:隐藏超出元素范围的内容
             scroll:不管内容是否超出范围,选中此项都会添加滚动条
             auto:只在内容超出范围时才显示滚动条
11、visibility,针对嵌套元素的设置,嵌套的元素称为子层,被嵌套的元素称为父层
             inherit:子层继承父层的可见性
             visible:无论父层可见与否,子层都可见
             hidden:无论父层可见与否,子层都隐藏
六、区域属性
 1、width,设定元素的宽度
 2、height,设定元素的高度
 3、float,允许文字环绕在一个元素的周围
 4、clear,指定在某一个元素的某一边是否允许有环绕的文字或者元素
 5、padding,设定在边框与内容之间插入的空间距离,有4个属性值分别用于设定上下左右的直充距离
 6、margin,设定一个元素在4个方向与浏览器窗口边界或者上一级元素边界的距离,有4个属性值:top,right,bottom,left
七、列表属性
 1、list-style-type,设定引导列表项目的符号类型
    list-style-type:value
          disc:实心圆
          circle:空心圆
          square:实心方块
          decimal:普通数字
          lower-roman:小写罗马数字
          upper-roman:大写罗马数字
          lower-alpha:小写英文字母
          upper-alpha:大写英文字母
          none: 不显示任何列表项目或者编号
 2、list-style-image,选择图像作为项目的引导符号
    list-sytle-image:none|url(url)
 3、list-style-position,决定列表项目所缩进的程度
    list-style-position:outside|inside (列表贴近左侧边框|列表缩进)
 4、list-style,综合设定列表项目属性
    list-style:list-style-image||list-style-position||list-style-type
八、鼠标光标属性
    cursor:value
           hand,手
           crosshair,交叉十字
           text,文本选择符号
           wait,沙漏形状
           default,默认的鼠标形状
           help,带问号的鼠标
           e-resize,向东的箭头
           ne-resize,向东北的箭头
           n-resize,向北的箭头
           nw-resize,向西北的箭头
           w-resize,向西的箭头
           sw-resize,向西南的箭头
           s-resize,向南的箭头
           se-resize,向东南的箭头
九、空白属性
 1、margin-top,相对浏览器上边距的距离
    margin-top:value
 2、margin-right,相对浏览器右边距的距离
    margin-right:value
 3、margin-bottom,相对浏览器下边距的距离
    margin-bottom:value
 4、margin-left,相对浏览器左边距的距离
    margin-left:value
 5、margin,空白属性的综合设定
    margin:margin-top||margin-right||margin-bottom||margin-left
十、滤镜属性
 1、Alpha,透明的层次效果              {filter:Alpha(Opacity=value,Finishopacity=value,Style=value,Starx=value,Starty=value,Finishx=value,Finishy=value)}
        Opacity:代表透明水准,0-完全透明,100-完全不透明
        Finishopacity:设置渐变的透明效果时,指定结束时的透明度,0到100
        Style:指定透明区域的形状特征,0-统一形状,1-线形,2-放射状,3-长方形
        Stylex:渐变透明效果的开始X坐标
        Styley:渐变透明效果的开始Y坐标
        Finishx:渐变透明效果的结束X坐标
        Finishy:渐变透明效果的结束Y坐标
 2、Blur,模糊效果
    {filter:Blur (Add=value, Direction=value, Strength=value}
            Add:指定图片是否被改变成印象派的模糊效果,true | false
            Direction:用来设置模糊的方向,模糊效果是按顺时针方向进行,
            Strength:有多少象素的宽度将受到模糊影响,用整数来指定,默认为5个
 3、Chroma,特定颜色的透明效果
    {filter:Chroma (Color=color_value}
 4、Dropshadow,阴影效果
    {filter:Dropshadow (Color=value, Offx=value, Offy=value, Positive=value}
            Color:阴影的颜色
            Offx:X轴方向阴影的偏移量
            Offy;Y轴方向阴影的偏移量
            Positive:TRUE,表示为不透明像素建立可见的阴影; FALSE表示为透明的像素建立可见的阴影
 5、FlipH,沿水平方向翻转效果
    {filter:FlipH}
 6、FlipV,沿垂直方向翻转效果
    {filter:FlipV}
 7、Glow,边缘光晕效果
    {filter:Glow (Color=color_value, Strength=value)}
            Color:设定边缘光晕的颜色
            Strength:设定边缘光晕的强度大小,1-255
 8、Gray,灰度效果
    {filter:Gray}
 9、Invert,将颜色的饱和度及亮度值完全反转
    {filter:Invert}
10、Mask,遮罩效果
    {filter:Mask (Color=color_value)}
11、Shadow,渐变效果
    {filter:Shadow (Color=color_value, Direction=value)}
12、Wave,波浪变形效果
    {filter:Wave (Add=value, Freq=value, LightStrength=value, Phase=value, Strength=value)}
            Add:是否把元素按照波形样式打乱
            Freq:波纹的频率,指定在一个元素上需要产生多少个完整的波纹
            LightStrength:增强波纹光影的效果,0-100
            Phase:设置正弦波的偏移量
            Strength:设置振幅的大小
13、Xray,X射线效果
    {filter:Xray}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值