学习切图

学习切图

html

打开VScode文件，新建一个后缀为html的文件，
在右边第一行输入“!”回车，显示代码的主要结构。
<!DOCTYPE html>意思为代码形式为HTML格式的

<html lang="en">不用在意

<head>
    <title>Document</title>
</head>

这段代码为head元素，写CSS，写样式

<body>
</body>

body元素里写HTML。

css

如何显示一个红色50P的 HELLO WORLD
记住一定要保存代码

写属性时要在head元素里，style内容里写样式
在body里定义了span或div后，在head里写他们的属性时，要在style里写，
例如div{color:red;}
如果有在head里定义了多个span,要用class分别命名，例如

<span class="q">Hello world</span>
<div class="w">hello world</div>

这样在head元素中写属性时可分别写不同class的样式，例如

<style>
    .q{
        color: red;
        display: block;
    }
</style>

各个属性的意思

    span{
            color: blue;        字体颜色
            font-size: 80;        字体大小
            position: relative;   
            top: 50px;
            left: 50px;
            border: 1px solid red;
            display: block;
            width: 300px;
            text-align: center;
            padding: 20px 0;
    }

html

css

各个属性的意思

推荐阅读更多精彩内容