CSS用法简介

Posted 2020-07-09

　　CSS(Cascading Style Sheets层叠样式表)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

1.基本使用语法
    样式类别-方向-特征 : 值;
    设置颜色：
        color : red;
    设置字体大小
        font-size : 10px;
    字体描述
        text-decoration : overline;

2. CSS分类(如何使用CSS)
    行内样式
        直接给元素添加 style="" 属性
    内嵌样式
        直接给元素添加一个ID或一个class属性，在head标签中(不一定)写上
        <style type="text/css">
        </style>
        在里面写上样式的语法，并与对应的元素挂钩
    外部样式
        在htm文件外有一个css文件，样式写在css文件中，在html页中将这个样式文件加载进来
        <link href="css路径" rel="stylesheet" type="text/css" />

3.选择器(selecter)
    id选择器
        #id {
            /* 样式 */
        }
    类选择器
        .className {
            /* 样式 */
        }
    标签选择器
        tagName {
            /* 样式 */
        }
    三个样式同时使用，如果没有样式冲突，都应用
    如果有冲突，同级的就近原则
    如果不是同级的，ID>类>标签(专一的优先级最大)

　类选择器可以使用 class="c1 c2 c3 c4" 的语法将多个类选择器作用与元素上
    
    不规范用法：
        在CSS使用中，id选择器与类选择器可以同样的作用与多个元素
        id在规范中就是表示唯一，浏览器允许这么使用，但是在js执行中会出现问题

　复合选择器
        标签类选择器
            标签.类名 { /* 样式 */ }
        后面兄弟选择器
            选择器+* {
                /* 选中前面元素选择器的后一个元素 */
            }

　　　　（+号不能省略）
        后代选择器
            将包含在某个元素中的元素都称为其后代
            <div id="dv1">
                <p>123</p>
                <div id="dv2">
                    <span id="span1"></span>
                </div>
                <p>456</p>
            </div>
            
            祖代选择器 后代选择器 {
                /* 样式 */
            }
         子代选择器
            父带选择器>子代选择器 {
                /* 样式 */
            }
         组合选择器
            选择器1, 选择器2, 选择器3, ..., 选择器N {
                /* 这些选择器的元素都具有这个样式 */
            }
            
4.常用样式
    文本
        color
        font-size
        font-family
        font-weight
    边框
        border-color
        border-style
        border-width
    背景
        background-color
    布局
        
    其他