2018.12.6群组选择器,优先级,伪类选择器,盒模型(显示区域,布局)-优快云博客

本文深入讲解CSS的基础知识，包括W3C架构、CSS的三种引入方式、选择器优先级、长度与颜色单位、文本样式设置及display属性的使用。通过实例代码详细解析，帮助初学者快速掌握CSS核心概念。

一复习上节课内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>复习预习</title>
</head>
<body>
    <!-- 1.w3c架构 -->
    <!-- 结构层 > 布局层 > 内容层 -->

    <!-- 2.css三种引入 -->
    <!-- 行间式: 简单直接 -->
    <!-- 内联式: 可读性最强 -->
    <!-- 外联式: 高效开发 -->
    <!-- 没有优先级,逻辑下方的样式起作用(行间式一定是逻辑最下方) -->

    <!-- 3.三个基本选择器 -->
    <!-- 优先级: id选择器(#) > 类选择器(.) > 标签选择器(标签名) > 通配选择器(*) -->
    <!-- 多类名 class="d1 d2 d3"   .d1.d2.d3 -->

    <!-- 4.长度单位 px cm mm em vw in |  颜色: rgb() rgba() #FFFFFF -->
    
    <!-- 5.文本样式 -->
    <style type="text/css">
        div {
            font: 900 30px/100px '微软雅黑', '备用字体';        
            font-size: 50px;

            text-align: center;#居中对齐
            text-decoration: none;#去掉下划线
            text-indent: 2em;#向右靠缩进2个字符
            letter-spacing: 3px;#字母之间的间隔距离
            word-spacing: 100px;#单词之间的间距比如hello world
        }
    </style>
    <div>hello world</div>

    <!-- 6.display: -->
    <style type="text/css">
        abc {
            width: 200px;
            height: 200px;
            background-color: pink
        }
        abc {
            /*display: inline;

            /*display: block;*/

            display: inline-block;
        }
    </style>
    <!-- 自定义标签display默认值为inline -->
    <!-- inline:不支持宽高, 宽高由文本内容撑开, 只能嵌套inline标签, 同行显示 -->
    <!-- block:支持所有css样式, 默认有宽高(自定义后取自定义值), 能嵌套所有标签, 异行显示,