• 常用CSS属性


    常用属性总结

    文本属性

    1、text-align:设置元素中文本水平对齐方式,其常用取值为:

    left: 默认值。左对齐
    
    right: 右对齐
    
    center: 居中对齐
    
    justify: 两端对齐
    

    2、text-decoration:设置文本的下划线样式,其常用取值为:

    underline: 有下划线
    
    none: 没有下划线
    

    3、text-indent:设置文本首行缩进,单位: 像素/百分比

    4、letter-spacing:设置字符间隔/间距,其常用取值为:

    normal
    
    像素值
    

    5、text-shadow:设置字体阴影,其取值为:

    像素值 像素值 像素值 颜色值
    
    第一个值为阴影水平位移,第二个值为阴影垂直位移,第三个值为阴影扩散值,第四个值为阴影颜色
    

    字体属性

    font-size:设置字体大小

    font-weight:设置字体粗细 bold、bolder、normal 100/200/300../900

    font-family:设置字体,比如微软雅黑、黑体、楷体等

    color:设置字体颜色

    背景属性

    background-color:设置背景颜色

    background-image:设置背景图片,url('图片的路径');

    background-repeat:设置或检索对象的背景图像是否及如何铺排,常用取值:

    repeat(默认值,重复排列)
    
    repeat-x(横向重复排列,但纵向不重复)
    
    repaet-y(纵向重复排列,但横向不重复)
    
    no-repeat(不重复)
    

    background-position:设置或检索对象的背景图像位置

    background: 背景颜色 背景图片 背景图片是否重复 背景图片的位置

    边框(border)

    border:2px solid red; -- 设置元素的边框(可以同时设置边框的宽度、样式、颜色)

    border属性可以拆分为如下设置:

    border- 2px; -- 设置元素边框的宽度
    
    border-style: solid; -- 设置元素边框的样式
    
    border-color: red; -- 设置元素边框的颜色
    

    其中border-width、border-style、border-color也可以按照上右下左方向进行拆分,以border-width为例:

    border-top- 2px; -- 设置上边框的宽度
    
    border-left- 2px; -- 设置左边框的宽度
    
    border-right- 2px; -- 设置右边框的宽度
    
    border-bottom- 2px; -- 设置下边框的宽度
    

    其他属性

    width:设置元素的宽度

    height:设置元素的高

    补充: 颜色设置

    颜色取值方式常见的方式有三种:

    方式一:设置颜色名,例如:

    red、green、blue、yellow、cyan、pink、white、black等
    

    方式二:设置#加上六位的十六进制数值

    #FF0000(red)、#00FF00(green)、#0000FF(blue)、#FFFF00(yellow)、#00FFFF(cyan)等
    

    方式三:设置rgb颜色值

    rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、rgb(0,255,255) 等
    
    (red) (green) (blue) (yellow) (cyan)
    
  • 相关阅读:
    页面引入js问题
    python之循环语句与注释
    python之字符串格式化方法
    python之对象的方法
    python之函数
    python之条件判断
    python之布尔表达式
    python之列表与元组
    python之字符串
    搞不明白的recycling process 和 finalization process
  • 原文地址:https://www.cnblogs.com/zpKang/p/13051318.html
Copyright © 2020-2023  润新知