前端基础-03-CSS属性

￡神魔★判官ぃ 2022-06-05 01:50 212阅读 0赞

# 前端基础-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) ;

### 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;

### 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;

### 4.对齐方式 ###

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