前端基础-CSS属性

1.文字属性

#1.浏览量默认的字体微软雅黑
font-family: "Adobe Arabic";

#2.字体大小设置
    1.px 默认像素
    2.rem 对应浏览器默认的字体大小，浏览器是1rem=16px
    google浏览器是 16px,最小是12px
    3.em 等于父级的字体尺寸--相对父级字体大小而言
    4.%相对父级的字体百分比而言
    /*font-size: 22px;*/
    /*font-size: 2rem;*/
    /*font-size: 2em;*/
    /*font-size: 50%;*/

#3.font-weight 字体粗细
关键字：
    normal 默认字体
    lighter 较细
    bolder 很粗
   默认给值：
   只能是100-900的整百数
   400正常的
   700相当于bold
   /*font-weight: bold;*/

#4.font-style 字体类型
    normal 默认字正常
    italic  文字斜体（属性）
    oblique 文字斜体
    font-style: oblique;

#5.color字体颜色
    1.关键字：aqua、green
    2.16进制： #dd55aa;或者#d5a
    3.rgb(0-255,0-255，0-255)：rgb(221,85,170)
        r:red
        g:green
        b:blue
    4.rgba(0-255,0-255，0-255，0-1)(221,85,170,0.5)
        r:red
        g:green
        b:blue
        a:alpha(透明度)  0完全透明
    /*color: aqua;*/
    /*color: #dd55aa;*/
    /*color:rgb(221,85,170) ;*/
    color:rgba(221,85,170,0.5) ;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49

2.文本属性

#1.文本线属性：text-decoration
    text-decoration:
    下划线:underline
    上划线:overline
    删除线：line-through
    none:默认值，可以用这个属性去掉带下划线、上划线、删除线
    /*text-decoration: underline;*/
    /*text-decoration: overline;*/
    text-decoration: line-through;

#2.文字大小写：text-transform:
    none:无特殊处理
    uppercase:文本大写
    lowercase：文本小写
    capitalize：英文的首字母大写
    /*text-transform: uppercase;*/
    /*text-transform: capitalize;*/
    text-transform: lowercase;

#3.text-align:对齐方式，文本和image有效
    left默认值：左对齐
    right:右对齐
    center：中间对齐
    text-align: left;

#4.text-indent：首行缩进
    text-indent: 2em;

#5.line-height:行高
    line-height: 30px

#6.letter-spacing:字距
    letter-spacing: 10px;

#7.word-spacing:单词之间的距离
    word-spacing: 20px;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36

3.背景

#1. 背景颜色：background-color
background-color: red;

#2.背景图片：background-image
background-image: url("image/test1.ico")

#3.背景平铺：background-repeat
    no-repeat 平铺
    repeat 不平铺
    repeat-x 平铺x
    repeat-y 平铺y
background-repeat: no-repeat;

#4.背景位置：background-position
    x轴 left center right
    y轴 left center right
    如果只是给一个值，默认是x轴，y轴默认center
    % px  %,px不能交换位置信息，默认是x和y
background-position: left;

#5.背景图片的大小
    使用 % px
    auto等比缩放
    cover 等比缩放，直到铺满xy
    contain 等比缩放，铺满x或者y
background-size:contain;

#简写版本：
background: red url("image/test1.ico") no-repeat 50px 60px/contain;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30

4.对齐方式

vertical-align 垂直对齐方式
        baseline  默认
        top 顶部
        middle 中部
        bottom 底部
        加vertical-align同排元素都需要添加

        text-bottom 文本底部对齐
        text-top 文本顶部对齐