开发环境

Chrome浏览器

VSCode及其插件

vscode 插件推荐 - 献给所有前端工程师

VSCode 设置网页代码实时预览

文件必须在 WorkSpace 中
HTML文件中必须有 body or head tag.

image

image

右下角可以启动和关闭Sever

关于 VSCode 中工作区的讲解与使用工作区还你一个轻量的 VSCode - 日日 c 的文章 - 知乎

设置 VsCode 自动换行 | SherlockGy's Blog

HTML

跟随教程 https://www.csstutorial.net/css-intro/introductioncss-part1.php 进行学习

学习CSS必须有一点点HTML的基础知识。

因为CSS是从HTML中扩展而来的，它负责网站页面的样式。它能做到很多标准的HTML无法做到的事情。

加粗字体的HTML方法

<b>make me bold</b>

看起来还不错，但是如果对某个文本进行多个操作，代码会堆在文本的周围，就会非常的冗余和混乱。

<font color="#FF0000" face="Verdana, Arial,  Helvetica, sans-serif">
   <strong>This is  text</strong></font>

直接使用CSS

<p class="myNewStyle">My CSS styled text</p>

` .myNewStyle {   font-family: Verdana, Arial, Helvetica, sans-serif;   font-weight: bold;   color: #FF0000; } `

这样就清爽多了

导入外部CSS

对于简单的页面来说，可以直接把CSS写在HTML中，但是对于复杂的页面，常常会让CSS独立为一个文件，然后在HTML中导入。(同目录的直接写文件名引用就可以)

<link href="myFirstStyleSheet.css" rel="stylesheet"  type="text/css">
</link>

用作导入的CSS文件，不需要与嵌入的一样，使用以下 tag 进行包裹。

<style type="text/css">
</style>

只需要写就可以

.myNewStyle {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-weight: bold;
   color: #FF0000;
}

Override 覆盖

CSS会覆盖HTML标签
比如

   
   <body>
<link href="CSS_1.CSS" rel="stylesheet"  type="text/css">
</link>
<font color="#FF0000" face="Verdana, Arial,  Helvetica, sans-serif">
   <strong>This is  text</strong></font>
   
   <h2 class="myNewStyle">My CSS styled text</h2>   

   <h2 class="my3rdNewStyle">My CSS styled text</h2>


   </body>

Override

redefine body tag 复写Body标签

body { margin-left: 10%; margin-right: 10%; }

Body是一种全局标签，是HTML标签的子标签之一。

通过这两个属性可以定义左右的页边距。

redefine every tag 使用CSS自定义标签

div {
   background: rgb(251, 255, 199);
   padding: 0.5em;
   border: 1px solid #000000;
}

所有的div标签都会套用这个样式。

<div class="my3rdNewStyle">My CSS styled text</div>

color 在 CSS中的三种使用方式

Hex 十六进制例如 #000000
rgb 例如 rgb(204,204,255)
直接用name 例如 ‘red’ or ‘blue’

总结

虽然提到的内容很简单，但也足够一定程度上装饰你的页面了。

CSS Introduce