0
0

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

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

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

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

8.CSS简介及导入方式

  1. CSS简介 正如前边所讲，CSS就是装修工，它负责对HTML进行装修。 CSS代码也有自己的格式：
选择器{
    属性1：属性值；
    属性2：属性值：
    }
  1. CSS导入方式 - 内联样式表- 内部样式表- 外部样式表 三种导入方式优先级依次排列
  2. 例题在这里插入图片描述
<!--html代码--><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>CSS简介及导入方式</title><style>p{color: blue;font-size: 26px;}h2{color: green;}</style><linkrel="stylesheet"href="./css/style.css"></head><body><p>这是一个应用了CSS样式的文本</p><h1style="color: red">这是一个一级标题标签，应用内联样式</h1><h2>这是一个二级标题标签，应用内部样式</h2><h3>这是一个三级标题标签，应用外联样式</h3></body></html>

还有一部分外链的css代码

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

9.CSS选择器

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

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

  3. 例题分别对下列选择器进行如图所示效果实验

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><h2class="classh2">类选择器1,字体颜色为绿色</h2><h2class="classh2">类选择器2,字体颜色为绿色</h2><pid="idxzq">id选择器，背景颜色为红色</p><p>通用选择器，改变字体样式为任意且加粗</p><divclass="father"><pclass="son">子代选择器，字体颜色为其他任意颜色,增大其大小</p><div><pclass="grandson">后代选择器，其底色为黄色</p></div></div><P>相邻元素选择器1，底色为蓝色</P><h3>相邻元素选择器2，底色为蓝色</h3><P>相邻元素选择器3，底色为蓝色</P><pid="fakechoice">伪类选择器，设置悬停字体颜色为白色，背景为黑色</p></body></html>

10.CSS常用属性

  1. font复合属性演示 变粗，50px，以及楷体
  2. line-height(行高)属性 长文本演示40px
  3. width height属性
  • 三大元素：行内元素（inline）<span>；块元素（block）<div>；行内块元素（incline-block)<image>
  • width height属性对于块元素以及行内块元素适用，对行内元素不适用
  • 三大元素之间的转换（display属性）
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>CSS常用属性试验</title></head><body><Pstyle="font: bolder 50px 'KAITI';">这是一个font符合属性演示</P><pstyle="line-height: 40px;">长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本长文本</p><divstyle="display: inline;width: 50px;height: 50px;">这是一个块元素转换为行内元素示例</div><br><spanstyle="display: inline-block;width: 500px;height: 500px;">这是一个行内元素转换为行内块元素示例</span></body></html>

11.盒子模型

每个元素都是一个独立盒子模型
属性用法内容（content）略内边距（padding）方向不同值可不同，自上顺时针变动边框（border）solid（实线）；dashed（虚线）；dotted（点虚线）；double（双实线）外边距（margin）方向不同值可不同，自上顺时针变动

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><h1class="box">这是一个盒子模型示例</h1></body></html>

12.浮动

1.网页布局方式

  • 标准流（文档流）
  • 浮动（float属性）（相对于父元素浮动）
  • 定位
  • flexbox和grid（自适应布局）
  1. 浮动三大特性：
  • 脱流
  • 一行显示，顶部对齐
  • 具备行内块元素特性
  1. 例题-实现下列网页样式-设计浮动的实现以及清除浮动(视频内容样式)在这里插入图片描述
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="father"><divclass="left-son">左浮动</div><divclass="right-son">右浮动</div></div><p>这是一个文本，一个很长很长的文本，🐶，长到我一秒钟就可以看完。。。嘿嘿嘿</p></body></html>

13.定位

  1. 浮动和定位比较 浮动-灵活但不易控制 定位-可以精确控制但不灵活
  2. 定位三种方式
    定位方式参考对象相对定位元素自身原位置绝对定位祖先元素位置，不占据文档流固定定位浏览器窗口，不占据文档流
  • 不占据文档流的大概意思是，不参与正常排版，也就是单独被分出来了。绝对位置和固定位置都不占据文档流。
  1. 例题在这里插入图片描述
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><divclass="box1"><divclass="box-normal"></div><divclass="box-relative">相对定位</div><divclass="box-normal"></div></div><h2>绝对定位</h2><divclass="box2"><divclass="box-normal"></div><divclass="box-absolute">绝对定位</div><divclass="box-normal"></div></div><divclass="box3">回到顶端</div></body></html>
标签： 前端 笔记 css
本文转载自: https://blog.csdn.net/Q2106575024/article/details/140894501
版权归原作者 C minus minus 所有， 如有侵权，请联系我们删除。
登录后发布评论

“0到1三小时入门前端教程笔记（CSS篇）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

渗透测试SQL注入 之 【常规的SQL注入语句】 这个渗透测试知识点教会你如何去做一些常规的sql注入

超级轻量级别的java web 框架 --Jersey

SQL神器，ChatGPT4o 比拟DBA

告别低效PPT制作：5个AIPPT助手，3分钟搞定完美演示

【hacker送书第14期】AI训练师算法与模型训练从入门到精通

臻识车牌识别停车场软件：高效管理与安全保障的完美结合

java的SimpleDateFormat线程不安全出问题了，虚竹教你多种解决方案

文章导航