CSS知识概述 - 技术栈

参考资料

哔哩哔哩：3小时前端入门教程（HTML+CSS+JS）。

CSS简介

CSS全称为Cascading Style Sheets，中文名"层叠样式表"。

是用于定义网页样式和布局样式的表语言。

CSS由选择器、属性和属性值组成。

CSS三种导入方式：

内联样式（Inline Styles）：写在标签后style属性中。

内部样式表（Internal Stylesheet）：在html的head标签内部定义style。

外部样式表（External Stylesheet）：外部.css文件。

内联样式>内部样式表>外部样式表，会覆盖掉优先级低的样式。

CSS选择器

选择器允许你针对特定元素或一组元素定义样式。

元素选择器，直接引用元素本身。

类选择器，用'.'表示。

ID选择器，用'#'表示。

通用选择器，用'*'表示。

子元素选择器，用".父元素/类/ID > .子元素/类/ID"表示。

后代选择器/包含选择器，用".父元素子元素"表示。

并集选择器/相邻元素选择器，用"a+b+c"表示。

伪类选择器，用"什么:hover"等表示，还有很多别的伪类。

上代码。

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS选择器</title>
        <style>
            /* 通用选择器 */
            * {
                font-family: "KaiTi";
            }
            /* 元素选择器 */
            h2 {
                color: aqua;
            }
            /* 类名选择器 */
            .nailong {
                background-color: yellow;
                color: blueviolet;
            }
            /* ID选择器 */
            #nailong {
                font-size: 30px;
                color: bisque;
            }
            p {
                font-size: 20px;
            }

            /* 子元素选择器 */
            /*.father > .p{
                color: yellowgreen;
            }如果保留这段，不留下面的.son，那么颜色都是橘色，因为ID>类>元素*/
            .father > .son{
                color: yellowgreen;
            }
            /* 后代选择器 */
            .father p{
                color: orange;
            }
            /* 相邻元素选择器 */
            h3 + h2 + p {
                background-color: red;
            }
            /* 伪类选择器 */
            .baojinbi:hover {
                color: yellowgreen;
                background-color: blueviolet;
            }
        </style>
    </head>
    <body>
        <h1>选择器示例</h1>
        <h2>这是一个元素选择器</h2>
        <h3 class="nailong">这是一个类选择器</h3>
        <h4 id="nailong">这是一个ID选择器</h4>
        <p>通用选择器让所有字体都变成了楷体</p>

        <div class="father">
            <p class="son">这是一个子元素选择器</p>
            <div>
                <p class="grandson">这是一个后代选择器</p>
            </div>
        </div>

        <p>这是一个普通p标签</p>
        <h3>这是一个相邻兄弟选择器事例</h3>
        <h2>把这个隔开就不会被附魔</h2>
        <p>现在这个p标签被"附魔"了</p>

        <h3 class="baojinbi">鼠标放到上面有惊喜</h3>
    </body>
</html>

CSS常用属性

常用属性在这个网页上都能找到：

CSS 参考手册 | 菜鸟教程

而且一百多个网页不可能学得完，见几个学几个差不多得了。

然后演示了一下font有很多属性：font-size、font-family等，可以统一写在一起，称之为复合属性。

font: bolder 50px "KaiTi"

接着，看到三类元素：

块元素block：占据整行的宽度。<div>标签是一个经典的例子。

行内元素inline：不占据整行，只占据本身内容所需要的宽度。也就是说width、height等都对它失效。<span>标签是一个经典的例子。

行内块元素inline-block：水平方向上排列，但是可以设置块级元素的属性。也就是说width、height等都对它有效。<img>标签是一个经典的例子。

这三种元素使可以相互转换的，用到display属性即可。

盒子模型

下图来自视频。

margin border padding width height content六个......单词？

|--------------|-------------------------|
| 属性名 | 说明 |
| 内容(content) | 盒子包含的实际内容，包括文本、图片等。 |
| 内边距(padding) | 围绕在内容的内部，是内容与边框之间的空间。 |
| 边框(border) | 围绕在内边距的外部，是盒子的边界。 |
| 外边距(Margin) | 围绕在边框的外部，是盒子与其他元素之间的空间。 |

练习代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS选择器</title>
        <style>
            .demo {
                background-color: aqua;
                display: inline-block;
                border: 10px solid yellowgreen;
                font-size: 32px;
                font-family: "KaiTi";
                padding: 50px;
                margin: 100px;
            }
            .border-demo {
                background-color: yellow;
                width: 500px;
                height: 300px;
                border-style: solid dashed dotted double;
                border-width: 3px 6px 9px 12px; 
                border-color: red;
                /*border-left: 10px solid red;*/
            }
        </style>
    </head>
    <body>
        <div class="demo">我爱玩原神</div>
        <div class="border-demo">《原神》是由米哈游自主研发的一款全新开放世界冒险游戏。游戏发生在一个被称作"提瓦特"的幻想世界，在这里，被神选中的人将被授予"神之眼"，导引元素之力。你将扮演一位名为"旅行者"的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人------同时，逐步发掘"原神"的真相。</div>
</div>
    </body>
</html>

网页布局方式

标准流（普通流、文档流）：网页按照元素的书写顺序依次排列

浮动

定位

Flexbox和Grid(自适应布局)

浮动

创建浮动框，将某个元素移动到一边，直到移动到左边缘或者右边缘。

选择器{

float: left/right/none;

}

浮动三大特性：脱离标准流、一行显示顶部对齐、具备行内块元素属性。

现在举例：父元素包裹着子元素，而子元素是一个左浮动，一个右浮动。

如果父元素不设置高度，那么会导致边框无法包裹两个盒子。这个叫"父元素坍塌"。

解决父元素坍塌的方法：

1.overflow:hidden

2.伪元素清除法

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS选择器</title>
        <style>
            .father{
                background-color: aquamarine;
                /*height: 150px;*/
                border: 3px solid brown;
                /*overflow:hidden;*/
            }
            .father::after{
                content: "";/*创建一个空的伪元素*/
                display: table;/*使之成为一个块级元素*/
                clear: both;/*清除左右浮动*/
            }
            
            .left-son{
                width: 100px;
                height: 100px;
                background-color: yellow;
                float:left;
            }
            .right-son{
                width:100px;
                height:100px;
                background-color:yellowgreen;
                float:right;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="left-son">左护法</div>
            <div class="right-son">右护法</div>
        </div>
        <p>这是一段文本</p>
    </body>
</html>

定位

相对定位：相对于元素在文档流的位置进行定位。

绝对定位：相对于其最近的已定位祖先元素进行定位，不占据文档流。

固定定位：相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随移动而移动。

html 复制代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS选择器</title>
        <style>
            .box1 {
                width: 500px;
                height: 500px;
                background-color: aqua;
            }
            .box2 {
                width: 600px;
                height: 600px;
                background-color: yellow;
            }
            .normal {
                width: 100px;
                height: 100px;
                background-color: blueviolet;
            }
            .box-relative {
                width:100px;
                height:100px;
                background-color: pink;
                position:relative;
                left:150px;
                top:30px;
            }
            .box-absolute {
                width:100px;
                height:100px;
                background-color: pink;
                position:absolute;
                left:150px;
                /*top:450px;*/
            }
            .box-fixed {
                width:200px;
                height:200px;
                background-color: chocolate;
                position: fixed;
                right:0;
                top:300px;
                font-size: 32px;
                font-family: "KaiTi"; 
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>
    <body>
        <h1>相对定位</h1>
        <div class="box1">
            <div class="normal"></div>
            <div class="box-relative"></div>
            <div class="normal"></div>
        </div>
        <h1>绝对定位</h1>
        <div class="box2">
            <div class="normal"></div>
            <div class="box-absolute"></div>
            <div class="normal"></div>
        </div>
        <h1>还有高手------固定定位</h1>
        <div class="box-fixed">广告位招租</div>
    </body>
</html>