4.4CSS-day04

总目录：https://blog.csdn.net/qq_41106844/article/details/105553392

前端 - 子目录：https://blog.csdn.net/qq_41106844/article/details/105553354

 

字体和文本相关属性

1.字体相关属性
    常用
        - font
            是一个复合属性。
        - color
            设置文字颜色。
        - font-family
            设置文字字体
        - font-size
            设置文字大小。
        - font-weight
            设置文字是否加粗。
        - text-decoration
            设置文字是否有修饰线。
        - text-shadow
            设置文字是否有阴影效果。
        - line-height
            设置字体行高。
    不常用
        - font-size-adjust
        - font-stretch
        - font-style
        - font-variant
        - text-transtorm
        - letter-spacing
        - word-spacing
2.文本相关属性
    常用
        - text-indent
            设置段落文本的缩进。
        - text-overflow
            控制溢出文本的处理方式。
        - text-align
            设置目标元素中文本的对齐方式。
    不常用
        - vertical-align
        - direction
        - white-space
        - word-break
        - word-wrap
3.颜色表示方法
    css3一共支持四种颜色方法
        - 使用颜色名表示
        - 使用十六进制颜色值表示
        - 使用rgb(r,g,b)函数表示
        - 使用rgba(r,g,b,a)函数表示
4.服务器字体
    定义:
        @font-face{
            font-family:字体名;
            src:url("路径") format("字体格式")
        }
    调用:
        style="font-family:字体名"
    解释:
        字体名可以自定义，路径为绝对路径，字体格式包含TrueType(ttf)和OpenType(otf)。

背景，边框，边距

1.盒子概念
    对于一个HTML元素来说，它会占据页面的一个矩形区域，这块区域就是该元素占据的“盒子”。
    盒子分为四个区域：内容区，内填充区，边框区，外填充区。
2.背景相关属性
    常用
        -background
            是一个复合属性。
        -background-cokor
            设置背景颜色。
        -background-image
            设置背景照片。
        -background-attachment
            设置背景图片是否固定。
        -background-position
            设置背景图片位置。
    渐变
        -linear-gradient（方向，颜色列表）
3.边框
    常用
        -border
            这是一个复合属性。
        -border-color
            设置边框颜色。
        -border-style
            设置边框线型。
        -border-width
            设置边框线宽。
        -border-top
            一个复合属性，用于设置目标上边框样式。
        -border-right
            一个复合属性，用于设置目标右边框样式。
        -border-bottom
            一个复合属性，用于设置目标下边框样式。
        -border-left
            一个复合属性，用于设置目标左边框样式。
    渐变
        -border-top-colors：颜色列表;
        -border-right-colors：颜色列表;
        -border-bottom-colors：颜色列表;
        -border-left-colors：颜色列表;
    圆角边框
        -border-radius
            用于指定圆角边框的圆角半径。
        -border-top-left-radius
            用于指定左上角的圆角半径
        -border-top-right-radius
            用于指定右上角的圆角半径
        -border-bottom-right-radius
            用于指定右下角的圆角半径
        -border-bottom-left-radius
            用于指定左下角的圆角半径。
4.透明度
    opacity属性
        从0到1，表示完全透明，1表示完全不透明。
5.paddin和margin
    内填充
        -padding
            设置上下左右四个边的内填充距离，也可以分别设置。
    外边距
        -margin
            设置上下左右四个边的外边距距离，也可以分别设置。

大小，定位，轮廓

1.大小
    height
        设置目标的高度
    max-height
        设置目标的最大高度
    min-hright
        设置目标的最小高度
    width
        设置目标的宽度
    max-width
        设置目标的最大宽度
    min-width
        设置目标的最小宽度
    content-box
        设置width，height控制元素的内容区宽度和高度。
    border-box
        设置整个盒子的宽度和高度。
    inherit
        从父标签继承。
    resize
        指定是否允许用户通过拖动来改变元素大小。
    calc
        用于动态几段HTML元素的宽度和高度。
2.定位
    position
        设置目标对象的定位方式。
    z-index
        设置目标对象的漂浮层的层次。
3.轮廓
    outline
        这是一个复合属性
    outline-color
        设置轮廓颜色
    outline-style
        设置轮廓线型
    outline-width
        设置轮廓宽度
    outline-offset
        设置轮廓偏移距
4.用户界面
    appearance
        允许将HTML元素设置成看上去像标准的用户界面元素。
5.滤镜
    blur（Npx）
        设置模糊滤镜
    brightness（百分比）
        设置高亮滤镜
    contrast（百分比）
        设置对比度滤镜
    drop-shadow（xoffset，yoffset，radius，color）
        设置阴影滤镜
    grayscale（百分比）
        设置灰度滤镜
    hue-rotate（Ndeg）
        设置色调旋转滤镜
    invert（百分比）
        设置色调反转滤镜
    opacity（百分比）
        设置透明度滤镜
    saturate（百分比）
        设置饱和度滤镜
    sepia（百分比）
        设置褐色滤镜