开发环境
Chrome浏览器
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’
总结
虽然提到的内容很简单，但也足够一定程度上装饰你的页面了。
