学习内容

Posted 2020-12-03 hjc1234

今天主要学习了：
写法分类：
    1.内联（行内，写在标签里面，以属性的形式表现，属性名是style）
    例：<table style="
        <tr><td>123</td></tr>
    </table>
    
    例：<span id="biaoqian" style="color: #F40F13 ;font-size: 20px">123</span>
    2.内嵌(写在head标签里面，以标签的形式表现，标签名style)
       例：<style type="text/css">
    </style>
    3.外部引用
二、
    样式格式：
        样式名1：样式值1；样式名2：样式值2；
三、
    （1）选择器（内联和外部引用所用）：
    选择器{
        样式名1：样式值1；
        样式名2：样式值2；
    }
    选择器类型：
        标签选择器：标签名{}
        id选择器：#id属性值{}
        class选择器：.class属性值{} ---class="dd sss"(可用多个样式)
        并列选择器： 选择器1,选择器2{样式内容}
        后代选择器： 选择器1 选择器2 {}----------在选择器1里找到 选择器2的样式
        直接子标签选择器： 选择器1>选择器2{}
        属性选择器： 选择器[属性名=‘属性值‘]{}
四、
    css样式优先级（权值越高优先级越高）：
        行内：-----1000
        id    :-----100
        class:-----10
        标签：-------1
    *（通用选择器）:--0
    优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
五、
    css一般样式：文本，背景，字体，列表
    （1）一般样式标签背景
        background-color
        background-image  css选背景是相对于css文件本身寻找
        background-repeat
        background-attachment
        background-position
        简写：
        background：color image repeat position
    （2）一般样式文本
        text-*
        text-color    设置文本颜色
        direction    设置文本方向。
        letter-spacing    设置字符间距
        line-height    设置行高
        text-align    对齐元素中的文本
        text-decoration    向文本添加修饰
        text-indent    缩进元素中文本的首行
        text-shadow    设置文本阴影
        text-transform    控制元素中的字母
        unicode-bidi    设置或返回文本是否被重写
        vertical-align    设置元素的垂直对齐
        white-space    设置元素中空白的处理方式
        word-spacing 设置字间距
    （3）一般样式字体：
        font    在一个声明中设置所有的字体属性
        font-family    指定文本的字体系列
        font-size    指定文本的字体大小
        font-style    指定文本的字体样式
        font-variant    以小型大写字体或者正常字体显示文本。
        font-weight    指定字体的粗细。
    （4）一般样式列表：
        list-style-type    设置列表项标记的类型。
        list-style-position    设置在何处放置列表项标记。
        list-style-image    使用图像来替换列表项的标记。
        initial    将这个属性设置为默认值。
        inherit    规定应该从父元素继承 list-style 属性的值。
六、
    了解了：
        布局：定位，浮动，显示
        动画：渐变，旋转，