zoukankan      html  css  js  c++  java
  • 关于CSS层叠样式(颜色+边框+文本属性)

    CSS相关常用属性

    1. 颜色属性:

      1. color属性定义文本的颜色。
        1. 颜色值:
          1. rgb格式即由三元色按比例所调节的颜色值,r即red;g即green;b即blue。该值的取值在0-255之间。写法:{color:rgb (255,0,0);}
          2. rgba格式。a代表透明度取值范围0-1。写法:{color:rgba(2500,200,0,0.1);}
          3. 十六进制写法,这种方法简单,可在PS界面调整颜色值,类似于:{color:#ff66oo;}
      2. 字体属性:
        1. font-size:  size的单位可以是px,%或者smaller即比父元素字体更小;inherit继承父元素字体大小;larger比父元素字体更大。
        2. font-family:  定义字体,格式:{font-family:“微软雅黑”,“宋体”}。字体样式不同的电脑可能装载不同的字体,写代码时,建议多写几个备用字体,用“,”隔开。
        3. font-weight;  字体粗细。其值包括:normal默认值;bold粗;bolder更粗;lighter更细;或者用百数表示即100-700之间的整百。normal=400,bold=700;
        4. font-style: 字体样式;italic斜体;oblique倾斜;inherit继承父元素样式;normal正常即默认值。
        5. font-variant: 该样式是针对英文,normal正常。small-caps 小型大写字母的字体。
    2. 背景相关属性:

        1. 背景图片:

    background-image:url(图片路径)

                             2.  背景颜色:

    background-color

     3.  背景重复:

    background-repeat:repeat(重复铺满整个屏也是默认值);repeat-x(沿x轴重复);repeat-y(沿y轴方向重复)no-repeat(不重复)

     4.  背景位置:

    background-position:

      1. 横向(left,center,right)
      2. 纵向(top,center,bottom)
      3. 用数值,单位px

    注:简写方式:{background:背景颜色 Url(图像路径) 重复方式 位置};用空格分开元素值。

     3. 文本相关属性:

        1. 横向排列:text-align:left/center/right
        2. 文本行高:line-height: px/%。%是基于字体大小的百分比行高。px即为固定值的单位。
        3. 首行缩进:text-indent:%/px/inherit。%父元素的百分比,px即为固定值的单位,默认为0.inherit继承。
        4. 单词间距:word-spacing:normal/px/inherit
        5. 字符间距:letter-spacing:normal;length(设置具体数值,可设负值,单位px/em/cm/mm)
        6. 文本方向:direction:ltr(left to right);rtl(right to left);inherit.
        7. 文本大小写:text-transform:normal;capitalize(每个单词以大写字母开头);uppercase(定义仅大写字母);lowercase(定义仅小写字母);inherit

      4. 边框相关属性:

        1. 边框风格:border-style
          1. 边框风格样式属性值;
          2. 单独定义某一方向的边框样式。
          • 边框风格样式属性值:none(无边框)   solid(直实线边框)  dashed(虚直线边框)  dotted(点状边框)  double(双线边框)  {不常用:inset边框,ridge胧状边框,groove凸槽边框  outset边框。此类边框依托border-color属性显示出不同的效果}
          • 单独定义某一方向的边框样式:border-top/bottom/left/right-style:上/下/左/右边框样式
        2. 边框宽度:border-width

    border-top/bottom/left/right-width:上/下/左/右边框宽度

    宽度的属性值:thin细边框  medium中等边框  thick粗边框  px固定值  inherit继承父元素值

     3.  边框颜色:border-color:

    border-top/bottom/left/right-color:上/下/左/右边框颜色。

    属性值:rgb/rgba/十六进制

    注:属性值的四种情况:

      1. 一个值:表示上下左右一致。
      2. 两个值:上下,左右
      3. 三个值:上,左右,下
      4. 四个值:上,右,下,左;即由上顺时针方向
      • 简写方式:{border:风格样式  边框宽度  边框颜色;}
  • 相关阅读:
    C#磁吸屏幕窗体类库
    准备
    我写的诗
    How to turn off a laptop keyboard
    How to tell which commit a tag points to in Git?
    Why should I care about lightweight vs. annotated tags?
    How to get rid of “would clobber existing tag”
    Facebook, Google and Twitter threaten to leave Hong Kong over privacy law changes
    The need for legislative reform on secrecy orders
    Can a foreign key be NULL and/or duplicate?
  • 原文地址:https://www.cnblogs.com/xsql/p/5985311.html
Copyright © 2011-2022 走看看