0到1三小时入门前端教程笔记（CSS篇）

最新推荐文章于 2024-08-29 09:06:24 发布

C minus minus

最新推荐文章于 2024-08-29 09:06:24 发布

阅读量978

点赞数 23

分类专栏： B站三小时前端速成笔记文章标签：前端笔记 css

本文链接：https://blog.csdn.net/Q2106575024/article/details/140894501

版权

B站三小时前端速成笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

三小时入门前端教程笔记CSS篇

8.CSS简介及导入方式
9.CSS选择器
10.CSS常用属性
11.盒子模型
12.浮动
13.定位

视频教程来自B站，本教程供大家参考复习以及参照学习。本文档用于解决一些学习疑问，以及简单入门，我十分推荐大家访问阅读“菜鸟教程”
视频教程链接: b站前端快速入门教程
让我们开始学习吧！
菜鸟教程链接：菜鸟教程

前端入门，看完总会有收获的
HTML

8.CSS简介及导入方式

CSS简介
正如前边所讲，CSS就是装修工，它负责对HTML进行装修。
CSS代码也有自己的格式：

选择器{
	属性1：属性值；
	属性2：属性值：
	}

CSS导入方式
- 内联样式表
- 内部样式表
- 外部样式表
  三种导入方式优先级依次排列
例题

<!--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>
        p{
            color: blue;
            font-size: 26px;
        }
        h2{
            color: green;
        }    
    </style>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <p>这是一个应用了CSS样式的文本</p>
    <h1 style="color: red">这是一个一级标题标签，应用内联样式</h1>
    <h2>这是一个二级标题标签，应用内部样式</h2>
    <h3>这是一个三级标题标签，应用外联样式</h3>
</body>
</html>

还有一部分外链的css代码
h3{ color: greenyellow; }

else

在vscode中css代码的注释操作可以通过选中然后ctrl+/来实现
在写代码过程中一定要注意每个标签的位置及格式。
之前安装的几个插件在代码编程中发挥作用挺大的。

9.CSS选择器

分类

分类	语法举例
元素选择器	<>标签
类选择器	.+class
id选择器	#+id
通用选择器	*
子元素选择器	.father> .son
后代选择器	.father p
并集选择器(相邻元素选择器)	h3 + p
伪元素选择器	#+id：hover

else
.+class(div标签创建直接.+class);
#+id;
优先级：id>class>元素标签
例题

<!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>
        /*元素选择器*/
        h1{color: red;}
        /*类选择器*/
        .classh2{color: green;}
        /*id选择器*/
        #idxzq{background-color: red;}
        /*通用选择器*/
        *{font-family: 'Courier New', Courier, monospace;font-weight: 800;}
        /*子代选择器*/
        .father>.son{color: aqua;font-size: larger;}
        /*后代选择器*/
        .father p{background-color: yellow;}
        /*相邻元素选择器*/
        p + h3{background-color: blue;}
        /*伪类选择器*/
        #fakechoice:hover{color: white;background-color: black;}
    </style>
</head>
<body>
    <h1>元素选择器,字体颜色为红色</h1>

    <h2 class="classh2">类选择器1,字体颜色为绿色</h2>
    <h2 class="classh2">类选择器2,字体颜色为绿色</h2>
    
    <p id="idxzq">id选择器，背景颜色为红色</p>

    <p>通用选择器，改变字体样式为任意且加粗</p>

    <div class="father">
        <p class="son">子代选择器，字体颜色为其他任意颜色,增大其大小</p>
        <div >
            <p class="grandson">后代选择器，其底色为黄色</p>
        </div>
    </div>

    <P>相邻元素选择器1，底色为蓝色</P>
    <h3>相邻元素选择器2，底色为蓝色</h3>
    <P>相邻元素选择器3，底色为蓝色</P>

    <p  id="fakechoice">伪类选择器，设置悬停字体颜色为白色，背景为黑色</p>

</body>
</html>

10.CSS常用属性

font复合属性演示
变粗，50px，以及楷体
line-height(行高)属性
长文本演示40px
width height属性

三大元素：行内元素（inline）<span>；块元素（block）<div>；行内块元素（incline-block)<image>
width height属性对于块元素以及行内块元素适用，对行内元素不适用
三大元素之间的转换（display属性）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用属性试验</title>
</head>
<body>
    <P style="font: bolder 50px 'KAITI';">这是一个font符合属性演示</P>
    <p style="line-height: 40px;">长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本</p>
    <div style="display: inline;width: 50px;height: 50px;">这是一个块元素转换为行内元素示例</div>
    <br>
    <span style="display: inline-block;width: 500px;height: 500px;">这是一个行内元素转换为行内块元素示例</span>
</body>
</html>

11.盒子模型

每个元素都是一个独立盒子模型

属性	用法
内容（content）	略
内边距（padding）	方向不同值可不同，自上顺时针变动
边框（border）	solid（实线）；dashed（虚线）；dotted（点虚线）；double（双实线）
外边距（margin）	方向不同值可不同，自上顺时针变动

<!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>
        .box{
            background-color: aqua;
            display:inline-block;
            padding: 20px;
            /* border: 5px solid brown; */
            border-width: 5px 10px 15px 20px;
            border-style: dashed dotted solid double;
            border-color: brown;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1 class="box">这是一个盒子模型示例</h1>
</body>
</html>

12.浮动

1.网页布局方式

标准流（文档流）
浮动（float属性）（相对于父元素浮动）
定位
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;
            border: brown solid 5px;
             /* height: 100px; */
        /*清除浮动方式一*/    
             /* overflow: hidden; */
        }
        /*清除浮动方式二*/
        .father::after{
            content: "";
            display: table;
            clear: both;
        }
        .left-son{
            background-color: red;
            height: 100px;
            width: 100px;
            float: left;
        }
        .right-son{
            background-color: yellow;
            height: 100px;
            width: 100px;
            float: right;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
    </div>
<p>这是一个文本，一个很长很长的文本，🐶，长到我一秒钟就可以看完。。。嘿嘿嘿</p>
</body>
</html>

13.定位

浮动和定位比较
浮动-灵活但不易控制
定位-可以精确控制但不灵活
定位三种方式

定位方式	参考对象
相对定位	元素自身原位置
绝对定位	祖先元素位置，不占据文档流
固定定位	浏览器窗口，不占据文档流

不占据文档流的大概意思是，不参与正常排版，也就是单独被分出来了。绝对位置和固定位置都不占据文档流。

例题

<!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: 300px;
            background-color: aqua;
        }
        .box-normal{
            height: 100px;
            width: 100px;
            background-color: red;
        }
        .box-relative{
            height: 100px;
            width: 100px;
            background-color: white;
            position: relative;
            left: 110px;
            top: 90px;
        }
        .box2{
            height: 300px;
            background-color: yellow;
        }
        .box-absolute{
            height: 100px;
            width: 100px;
            background-color: white;
            position: absolute;
            left: 50px;
        }
        .box3{
            height: 70px;
            width: 70px;
            background-color: brown;
            position: fixed;
            right: 0;
            bottom: 40px;
        }
    </style>
</head>
<body>
    <h2>相对定位练习</h2>
    <div class="box1">
        <div class="box-normal"></div>
        <div class="box-relative">相对定位</div>
        <div class="box-normal"></div>
    </div>
    <h2>绝对定位</h2>
    <div class="box2">
        <div class="box-normal"></div>
        <div class="box-absolute">绝对定位</div>
        <div class="box-normal"></div>       
    </div>
    
    <div class="box3">回到顶端</div>
</body>
</html>

C minus minus

关注

23
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
0到1三小时入门前端教程笔记（CSS篇）

CSS简介正如前边所讲，CSS就是装修工，它负责对HTML进行装修。CSS代码也有自己的格式：选择器 {属性1：属性值；属性2：属性值： }CSS导入方式内联样式表内部样式表外部样式表三种导入方式优先级依次排列例题--html代码-->--html代码--> <!
复制链接

扫一扫