html、css入门笔记_005

1. CSS背景样式？

    background-color 背景色
    background-image 背景图
        url(背景地址)
        默认：会水平垂直都铺满背景图
    background-repeat 平铺方式
        repeat-x   x轴平铺
        repeat-y   y轴平铺
        repeat ( x , y 都进行平铺，默认值 )
        no-repeat  都不平铺
    background-position : 背景位置
        x y : number(px、%) | 单词
            x : left、center、right
            y : top、center、bottom
    background-attachment : 背景图随滚动条移动的方式
        scroll : 默认值  ( 背景位置是按照当前元素进行偏移的 )
        fixed ( 背景位置是按照浏览器进行偏移的 )

2. CSS边框样式？
    border-style : 边框样式
        solid : 实线
        dashed : 虚线
        dotted : 点线
    border-width : 边框大小
        px ...
    border-color : 边框颜色
        red #f00 ...        

    边框也可以针对某一天边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom    

    颜色：透明颜色 transparent

3. CSS文字样式？

    font-family : 字体类型
        英文、中文
        衬线体、非衬线体
        注意点：
            1.多个字体类型的设置目的
            2.引号的添加的目的
    font-size : 字体大小
        默认 : 16px
        写法 : number(px) | 单词 ( small large ... 不推荐使用)

    font-weight : 字体粗细
        模式： 正常( normal )   加粗 ( bold )
        写法：单词(normal、bold)   |  number ( 100 200 .....  900 , 100到500都是正常的，600都900都是加粗的 )  

    font-style : 字体样式
        模式： 正常 ( normal )   斜体 ( italic )
        写法：单词 (  normal 、 italic )
        注：oblique也是表示斜体，用的比较少，一般了解即可。
        区别：1.italic 带有倾斜属性的字体的才可以设置倾斜操作。
              2.oblique 没有倾斜属性的字体也可以设置倾斜操作。

4. CSS段落样式？
    text-decoration：文本装饰
        下划线 : underline
        删除线 :line-through
        上划线 : overline
        不添加任何装饰 : none
        注：添加多个文本修饰：line-through underline overline
    
    text-transform：文本大小写 （ 针对英文段落 ）
        小写：lowercase
        大写：uppercase
        只针对首字母大写：capitalize
    
    text-indent : 文本缩进
        首行缩进
        em单位：相对单位，1em永远都是跟字体大小相同

    text-align : 文本对齐方式
        对齐方式 : left 、right、center、justify（两端点对齐）

    line-height : 定义行高

        什么是行高，一行文字的高度，上边距和下边距的等价关系。
        默认行高：不是固定值，而是变化的。根据当前字体的大小再不断的变化。

        取值：1. number( px )   |  scale ( 比例值 , 跟文字大小成比例的 )

    letter-spacing : 字之间的间距
    word-spacing : 词之间的间距  ( 针对英文段落的 )

    英文和数字不自动折行的问题：
        1. word-break : break-all; (非常强烈的折行)
        2. word-wrap : break-word;(不是那么强烈的折行 ，会产生一些空白区域)  

5. CSS复合样式：

    复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font。
    1. background : red url() repeat 0 0;
    2. border : 1px red solid;
    3. font :
        注：最少要有两个值 size family
            weight style size family  √
            style weight size family  √
            weight style size/line-height family √
    注：如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。