初始CSS

CountingStars_s

已于 2024-06-10 14:19:05 修改

阅读量1k

点赞数 15

文章标签： css 前端

于 2024-06-10 14:15:44 首次发布

本文链接：https://blog.csdn.net/weixin_73858883/article/details/139576301

版权

1. CSS 简介

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

通过 CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，实现更精确的页面设计；

举个栗子，HTML 就好像房子的搭建，CSS 就好像房子的装修；

2. CSS 语法

CSS 通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式；

选择器{
	属性1:属性值1;
	属性2:属性值2;
}

注：

选择器的声明中可以写无数条属性；
声明中的每一行以分号结尾；
声明中的所有属性和属性值以键值对的形式存在；

示例：

<!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>
        p {
            color: #50d496;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <p>这是一个应用了CSS样式的文本段落</p>
</body>

</html>

效果图：

3. CSS 三种导入方式

内联样式 – 直接在标签的 style 属性中设定样式；
内部样式表 – 在 HTML 文件的 head 标签中设定对应标签的样式；
外部样式表 – 在一个单独的 CSS 文件中设置各种标签的样式，然后在 head 标签中 link 进来；

优先级：

内联样式 > 内部样式表 > 外部样式表

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 导入方式</title>
    <link rel="stylesheet" href="./CSS/style.css">
    <style>
        p {
            color: green;
            font-size: 30px;
        }

        h2 {
            color: pink;
        }
    </style>
</head>

<body>
    <p>这是一个应用了CSS样式的文本段落</p>
    <h1 style="color: aqua;">这是一个一级标题，使用内联样式</h1>
    <h2>这是一个二级标题，使用内部样式</h2>
    <h3>这是一个三级标题，使用外部样式</h3>
</body>

</html>

/* CSS 文件 */
h3 {
    color: palevioletred;
}

效果：

4. CSS 选择器

选择器是 CSS 中的关键部分，它允许你针对特定元素或一组元素定义样式；

常见的选择器有：

元素选择器
类选择器
ID 选择器
通用选择器
子元素选择器
后代选择器（包含选择器）
并集选择器（兄弟选择器）
伪类选择器

一些快捷方法：

标签.class 可以快速生成一个带有指定类的标签；

标签#id 可以快速生成一个带有指定 ID 的标签；

示例：

<!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>
        /* 元素选择器 */
        h2 {
            color: rgb(36, 227, 227);
        }

        /* 类选择器 */
        .highlight {
            background-color: yellow;
        }

        /* ID 选择器 */
        #header {
            font-size: larger;
            color: pink;
        }

        /* 通用选择器 */
        * {
            font-family: 'KaiTi';
            font-weight: bolder;
        }

        /* 子元素选择器 */
        .father>.son {
            color: darkorange;
            font-size: 20px;
        }

        /* 后代选择器 */
        .father p {
            color: purple;
            font-size: 25px;
        }

        /* 相邻元素选择器 */
        h3+p {
            color: orange;
            font-size: 30px;
            /* 作用对象是 ABA 中的最后一个 A */
        }

        /* 伪类选择器 */
        #element:hover {
            background-color: darksalmon;
        }

        /*
            伪类选择器还可以选择子元素：
            :first-child
            :nth-child()
            :active
        */

        /* 
            伪元素选择器：
            ::after
            ::before
        */
    </style>
</head>

<body>
    <h1 style="color: rgb(84, 222, 176);">不同类型的 CSS 选择器</h1>
    <hr>

    <h2>这是一个元素选择器</h2>

    <h3>这是一个类选择器</h3>

    <h3 class="highlight">这也是一个类选择器</h3>

    <h4 id="header">这是一个 ID 选择器</h4>

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

    <p>这是一个普通的 p 标签</p>
    <h3>这是一个相邻兄弟选择器</h3>
    <p>这是另一个普通的 p 标签</p>

    <h2 id="element">这是一个伪类选择器</h2>
</body>

</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>
        /* 元素选择器 */
        h2 {
            color: rgb(36, 227, 227);
        }

        /* 类选择器 */
        .highlight {
            background-color: yellow;
        }

        /* ID 选择器 */
        #header {
            font-size: larger;
            color: pink;
        }

        /* 通用选择器 */
        * {
            font-family: 'KaiTi';
        }
    </style>
</head>

<body>
    <h1 style="color: rgb(84, 222, 176);">不同类型的 CSS 选择器</h1>
    <hr>
    <h2>这是一个元素选择器</h2>
    <h3>这是一个类选择器</h3>
    <h3 class="highlight">这也是一个类选择器</h3>
    <h4 id="header">这是一个 ID 选择器</h4>
</body>

</html>

显示效果：

5. CSS 常用属性

CSS 的属性很多，详细可以参考菜鸟教程；

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 类选择器 */
        .block {
            background-color: aquamarine;
            width: 400px;
            height: 100px;
        }

        /* 行内元素 */
        .inline {
            background-color: yellow;
            /* 行内元素不接受宽度和高度属性 */
            width: 1000px;
            height: 1000px;
        }

        /* 行内块元素 */
        .inline-block {
            width: 200px;
            height: 150px;
        }

        /* 块级元素转换为行内元素 */
        .div-inline {
            display: inline;
            background-color: aqua;
            /* 因此转换后 宽高设置失效 */
            width: 1000px;
            height: 1000px;
        }

        /* 行内元素转换为行内块元素 */
        .span-inline-block {
            display: inline-block;
            background-color: palevioletred;
            /* 转换之后可以设置宽高 */
            width: 200px;
            height: 100px;
        }

        /* 行内元素转换为块级元素 */
        .span-block {
            /* 块级元素默认独占一行 */
            display: block;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <h2 style="font: bolder 50px 'KaiTi';">这是一个复合属性</h2>

    <p style="line-height: 40px;">
        《原神》是由米哈游自主研发的一款全新开放世界冒险游戏。
        游戏发生在一个被称作「提瓦特」的幻想世界，在这里，被神选中的人将被授予「神之眼」，导引元素之力。
        你将扮演一位名为「旅行者」的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，
        和他们一起击败强敌，找回失散的亲人——同时，逐步发掘「原神」的真相。
    </p>

    <div class="block">这是一个块级元素</div>
    <div class="block">这是一个块级元素</div>
    <span class="inline">这是一个行内元素</span>
    <img src="./Pic/image.png" alt="图片无法加载" class="inline-block">
    <img src="./Pic/image.png" alt="图片无法加载" class="inline-block">

    <div class="div-inline">这是一个转换为行内元素的 div 标签</div>

    <span class="span-inline-block">这是一个转换为行内块元素的 span 标签</span>

    <span class="span-block">这是一个转换为块元素的 span 标签</span>
</body>

</html>

显示效果：

5. 盒子模型

说明：

属性名	说明
内容 Content	盒子包含的实际内容，例如文本、图片等
内边距 Padding	内容与边框之间的空间
边框 Border	盒子的边界
外边距 Margin	盒子与其他元素之间的空间

示例：

<!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: aquamarine;
            /* 将块级元素转换为行内块元素 */
            display: inline-block;
            /* 边框属性 -- 复合属性 */
            border: 5px solid greenyellow;
        }

        .border-demo1 {
            background-color: aqua;
            width: 300px;
            height: 200px;
            /* 复合属性 */
            border-style: solid dashed dotted double;
            /* 复合属性 -- 上 右 下 左 */
            border-width: 10px 0 20px 30px;
            /* 如果有缺失的值，它会自动找对应的另一边 */
            border-color: antiquewhite yellow pink purple;
        }

        .border-demo2 {
            background-color: yellow;
            width: 400px;
            height: 300px;
            /* 只对单个边操作 */
            border-left: 10px solid greenyellow;
            border-top: 10px solid black;
            border-right: 10px solid pink;
            border-bottom: 10px solid purple;
            padding: 50px;
            margin: 40px;
        }
    </style>
</head>

<body>
    <div class="demo">盒子模型练习</div>
    <br><br>
    <div class="border-demo1">这是一个边框示例</div>
    <br><br>
    <div class="border-demo2">这是另一个边框示例</div>
</body>

</html>

显示效果：

6. 浮动

传统网页布局方式：

标准流（普通流、文档流）：网页按照元素的书写顺序依次排列；
浮动
定位
Flexbox 和 Grid（自适应布局）

浮动的三大特性：

脱离标准流；
一行显示，顶部对齐；
具备行内块元素特性；

简单来说，浮动就是让元素水平无缝衔接，示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动练习</title>
    <style>
        .father {
            background-color: aquamarine;
            height: 150px;
        }

        .left-son {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            float: left;
        }

        .right-son {
            width: 100px;
            height: 100px;
            background-color: aqua;
            float: right;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
        <div class="right-son">右浮动</div>
        <div class="right-son">右浮动</div>
    </div>
</body>

</html>

显示效果：

7. 定位

定位布局可以精确定位，但是缺乏灵活性；

定位方式：

相对定位：相对于元素在文档流中的正常位置进行定位；
绝对定位：相对于其最近的已定位祖先元素进行定位，不占据文档流；
固定定位：相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动而移动；

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        .box1 {
            height: 350px;
            background-color: aquamarine;
        }

        .box-normal {
            width: 100px;
            height: 100px;
            background-color: palevioletred;
        }

        .box-relative {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: relative;
            left: 120px;
            top: 20px;
        }

        .box2 {
            height: 350px;
            background-color: yellowgreen;
            margin-bottom: 300px;
        }

        .box-absolute {
            width: 100px;
            height: 100px;
            background-color: burlywood;
            position: absolute;
            left: 120px;
        }

        .box-fixed {
            width: 100px;
            height: 100px;
            background-color: plum;
            position: fixed;
            right: 0;
            top: 300px;
        }
    </style>
</head>

<body>
    <h1>相对定位</h1>
    <div class="box1">
        <div class="box-normal"></div>
        <div class="box-relative"></div>
        <div class="box-normal"></div>
    </div>
    <h1>绝对定位</h1>
    <div class="box2">
        <div class="box-normal"></div>
        <div class="box-absolute"></div>
        <div class="box-normal"></div>
    </div>
    <h1>固定定位</h1>
    <div class="box-fixed"></div>

</body>

</html>