Web前端（CSS）

Best丶飞

已于 2024-03-25 20:39:14 修改

阅读量458

点赞数 8

文章标签：前端 css

于 2024-03-24 21:11:34 首次发布

本文链接：https://blog.csdn.net/m0_75186037/article/details/136969213

版权

学习完HTML之后，开始学习CSS。

CSS简介

CSS全名是“Cascading Style Sheets”,中文名“层叠样式表”。

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

通过CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。（HTML决定了有什么，而CSS决定了长什么样）

一、CSS导入方式

1.CSS语法

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

1、选择器的声明中可以写无数条属性

2、声明的每一行属性，都需要以英文分号结尾

3、声明中的所有属性和值都是以键值对这种形式出现的

示例：

2.CSS三种导入方式

1、内联样式：把CSS样式直接放在HTML元素的标签中

2、内部样式表：在HTML文档的head标签中定义

3、外部样式表：把CSS样式单独放在一个CSS文件中，然后在head标签里面使用另一个标签把它链接到HTML文档中，这样就允许在多个页面上重复使用相同的样式

三种导入方式的优先级：内联样式>内部样式表>外部样式表。

二、CSS选择器

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

<!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:aqua;
        }

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

        #header{
            font-size:35px;
        }
        /* #id选择器以#开头 */


        * {
            font-family:'KaiTi';
            font-weight:bolder;
        }
        /* 通用选择器，以*开头，选中所有字体 */

        .father > .son{
            color:yellowgreen;
        }
        /* 子元素选择器 */

        .father p{
            color:brown;
            font-size:large;
        }
        /* 后代选择器 */

        h3 + p {
            background-color: red;
        }
        /* 相邻元素选择器 */

        #element:hover{
            background-color: blueviolet;
        }
        /* 伪类选择器 
            鼠标悬停会变成blueviolet色
            选中第一个子元素：first-child
            选择第n个子元素：nth-child()
            链接的状态：active                */


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

</head>
<body>
    <h1>不同类型的CSS选择器</h1>

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

    <h3 class="highlight">这是一个类选择器示例</h3>
    <h3>这是另一个类选择器示例</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>

    <h3 id="element">这是一个伪类选择器示例</h3>
</body>
</html>

三、CSS常用属性

<!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>
        .block{
            background-color: aqua;
            width:150px;
            height:100px;
        }

        .inline{
            background-color: brown;
        }

        .inline-block{
            width:100px;

        }

        .div-inline{
            display:inline;
            background-color: aquamarine;
        }

        .span-inline-block{
            display:block;
            background-color: blueviolet;
            width:300px;
        }
    </style>
</head>
<body>
    <h1 style="font:bolder 50px 'KaiTi';">这是一个font复合属性</h1>
    <p style="line-height:100px">这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本</p>

    <div class="block">这是一个块级元素</div>
    <span class="inline">这是一个行内元素</span>
    <img src="./joc.jpg" alt="" class="inline-block">

    <h2>display</h2>
    <div class="div-inline">这是一个转换成行内元素的div标签</div>
    <!-- 行内元素的宽度和高度由内容决定，无法设置宽度和高度 -->
    
    <span class="span-inline-block">这是一个转换成行内块元素的标签</span>
</body>
</html>

四、盒子模型

盒子模型有四个相关属性,分别是内容,内边距,边框和外边距.

内容(Content):盒子包含的实际内容,比如文本,图片等.

内边距(Padding):围绕在内容的内部,是内容与边框之间的空间,可以使用'padding'属性来设置.

边框(Border):围绕在内边距的外部,是盒子的边界.可以使用'border'属性来设置.边框的设置顺序依次是上右下左.

外边距(Margin):围绕在边框的外部,是盒子与其他元素之间的空间.可以使用'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: aqua;
            display:inline-block;
            border:5px solid yellowgreen;
            padding:50px;
            margin:40px;
        }

        .border-demo{
            background-color: yellow;
            width:300px;
            height:200px;
            border-style:solid dashed dotted double;
            border-width:10px 0 20px 40px;
            border-color:brown;
            /* border-left:10px solid brown; */
            /* 边框的设置顺序依次为：上右下左 */
        }
    </style>
</head>
<body>
    <div class="demo">好好学习</div>
    <div class="border-demo">这是一个边框示例</div>
</body>
</html>

五、浮动

在学习浮动之前,先了解传统的网页布局方式.

而浮动指元素脱离文档流,根据开发者的意愿漂浮到网页的任意方向.

<!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; */
            border:3px solid brown;
            /* overflow:hidden;清除浮动 */
        }
        

        .father::after{
            content:"";
            display:table;
            clear:both;
        }
        /* 清除浮动 */

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

        .right-son{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float:right;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>        
    </div>
</body>
</html>

六、定位

定位布局可以精准定位,但缺乏灵活性.

定位方式:

相对定位:相对于元素在文档流中的正常位置进行定位.一般用于微调元素位置.

绝对定位:相对于其最近的已定位祖先元素进行定位,不占据文档流.一般用于创建更复杂的布局.

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

<!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: aqua;
        }

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

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

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

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

        .box-fixed{
            width: 100px;
            height: 100px;
            background-color: brown;
            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>

Best丶飞

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Web前端（CSS）

CSS全名是“Cascading Style Sheets”,中文名“层叠样式表”。用于定义网页样式和布局的样式表语言。通过CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。（HTML决定了有什么，而CSS决定了长什么样）
复制链接

扫一扫