码迷,mamicode.com
首页 > Web开发 > 详细

CSS常用属性

时间:2020-03-15 22:28:23      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:统一   大写   英文单词   透明度   获取   dash   one   宽度   tran   

文本属性  

一、设置文字大小

  属性:font-size

  文字的单位:px :像素

        pt:磅,一般用在印刷领域

        em:相对大小,相对于父元素的字体大小。

          em的应用:由于em的字体大小是相对于父元素而言的,所以em可以用来设置首行缩进等,在父元素大小进行改变时,段落仍然缩进2个字符。

   

  说明:1、浏览器默认的文字大小是 16px;

     2、文字的大小一般设置为偶数,且尽量不要小于 12px;

        3、当我们在设计图上获取文字大小时,直接量取文字的行高;

     

二、设置文字颜色

  属性:color:;

  属性值:1、颜色的英文单词:red、pink、yellow....

       2、十六进制颜色值:

        #三位或者六位十六进制数值

       3、rgb(数字,数字,数字)      

        数字大小在 0~255 之间

      4、rgba(数字,数字,数字,数字)

        最后一位数字代表透明度,值在 0~1 之间

 

三、设置文字粗细

  属性:font-weight:;

  属性值:bold      加粗

      bolder    更加粗(系统显示的不明显)

      normal    恢复常规文本

      或者用数字表示,分成9个等级:
        100、200、300、。。、900
        100-500:常规状态
         600-900:加粗状态
 

四、设置文字字体

  属性:font-family:;

  属性值:填写字体名称

  注意:1、为了统一文字间的差异,系统默认字体为 微软雅黑;英文默认字体:Arial. 

     2、多个属性值的时候用逗号隔开

     3、系统能支持的字体:web安全字体。

     4、font-family属性值是中文时需要放在引号里,英文字体是多个单词时也需要放在引号里。一个英文字体单词就不需要放在引号里。

     5、如果存在中英文字体:先写英文再写中文字体。
 

五、设置文本倾斜

  属性:font-style:;

  属性值:normal  恢复常规文本

      italic      文本倾斜
      oblique 文本倾斜
  说明:文本倾斜,二者都行。
 

六、设置文本行高

  属性:line-height :;

  说明:1、在设计图上获取行高(第一行的顶端到第二行的顶端);

     2、当单行文本的line-height值 和 容器 的高保持一致,可使文本在容器里上下居中;
     3、单行文本时可以将行高设置成字体的大小。
 

七、设置文本对齐方式

  属性:text-align:;

  属性值:left

      center

      right

      justify   两端对齐

八、文本修饰属性

  属性:text-decoration:;

  属性值:none    去掉下划线

      underline   下划线

      overline     上划线

      line-through  删除线

 

九、首行缩进

  属性:text-indent:;

  说明:text-indent能接受负值(悬挂缩进)

 

十、英文字母大小写

  属性:text-transform:;

  属性值:capitalize  每个单词的首字母大写

      Uppercase   全部大写

      Lowercase   全部小写
 

列表属性

一、控制列表符号:

  属性:list-style-type:;

       属性值: circle、square。。。。
                    
  list-style-type:none;     清除列表符号。
 

二、将图像设置为列表标志:

  属性:list-style-image:;

  属性值:url()

  

三、控制列表符号的位置:

  属性:list-style-position:;

  属性值:

                  inside

                  outside

四、清除列表符号:

  list-style:none;

 

背景属性

一、背景颜色

  属性:background-color

  属性值:颜色的表示同字体颜色的几种表示

 

二、背景图

  属性:background-image

  属性值:url(‘图片的路径‘)

  说明:1、背景图是不占据空间的,跟随容器大小发生变化。

     2、当容器大小大于背景图大小,默认平铺状态。
     3、当容器大小等于背景图大小,只能显示一张。
     4、当容器大小小于背景图大小,只能显示容器的区域
 

三、背景图的显示状态

  属性:background-repeat:

  属性值:no-repeat    不平铺
      repeat     平铺
                     repeat-x        横向平铺
                     repeat-y   纵向平铺
 

四、背景图片的位置

  属性:background-position:

  属性值:第一个值 左右距离       第二个值 上下距离
  说明:1、正值往下往右,负值往上往左
     2、可以直接说明方位值:left、right、center、top、bottom
 

五、简写形式:

  background:背景颜色 url(背景图路径) no-repeat center;

  说明:顺序无要求。

 

边框属性

 

一、 边框宽度:

  属性:border-width:

二、边框颜色:

  属性:border-color:

三、边框样式:

  属性:border-style:

  属性值:solid    实线

      dashed    虚线

      dotted     点状线

      double     双线

四、简写形式

  border:边框宽度 边框风格 边框颜色;

 

注意:可单独设置一方向边框:

     border-bottom:;底边框

     border-left:;左边框

     border-right:;右边框

     border-top:;上边框

CSS常用属性

标签:统一   大写   英文单词   透明度   获取   dash   one   宽度   tran   

原文地址:https://www.cnblogs.com/LittleShy/p/12484824.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!