开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 开发工具 -> HTML基础知识②（用于vscode 零基础小白) -> 正文阅读

[开发工具]HTML基础知识②（用于vscode 零基础小白)

HTML和CSS写在不是同一个文件时：

不在同一个文件时，需要引用外部资源

在head里面引入外部资源的时候?使用的是link标签href属性?表示资源路径，rel表示引入东西的类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

实质上就是在html用link来插入外部资源css,而css也需要重新创建一个后缀为css的文件（如下图），方便插入

插入的css

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

ul.nav {
    margin: 100px auto 0;
    width: 600px;
    height: 60px;
    border: 1px solid tomato;
    cursor: pointer;
}

ul.nav li {
    width: 100px;
    line-height: 60px;
    float: left;
    text-align: center;
}

ul.nav li:hover {
    background-color: pink;
}

ul.nav li.current {
    background-color: tomato;
}

ul.content {
    width: 600px;
    height: 300px;
    border: 1px dashed orangered;
    margin: 0 auto;
    position: relative;
}

ul.content li {
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
    text-align: center;
    line-height: 300px;
}

ul.content li.current_content {
    display: block;
}
ul.content li:nth-of-type(1) {
    background-color: lightcyan;
}
ul.content li:nth-of-type(2) {
    background-color: cyan;
}
ul.content li:nth-of-type(3) {
    background-color: darkcyan;
}
ul.content li:nth-of-type(4) {
    background-color: lightyellow;
}
ul.content li:nth-of-type(5) {
    background-color: yellow;
}
ul.content li:nth-of-type(6) {
    background-color: greenyellow;
}

若HTML和CSS写在一起时：

就不用在html里面用link引入css,直接在head部分写style就可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        ul.nav {
            margin: 100px auto 0;
            width: 600px;
            height: 60px;
            border: 1px solid tomato;
	        cursor: pointer;
        }

        ul.nav li {
            width: 100px;
            line-height: 60px;
            float: left;
            text-align: center;
        }

        ul.nav li:hover {
            background-color: pink;
        }
        
        ul.nav li.current {
            background-color: tomato;
        }

        ul.content {
            width: 600px;
            height: 300px;
            border: 1px dashed orangered;
            margin: 0 auto;
            position: relative;
        }

        ul.content li {
            width: 100%;
            height: 100%;
            position: absolute;
            display: none;
            text-align: center;
            line-height: 300px;
        }

        ul.content li.current_content {
            display: block;
        }
        ul.content li:nth-of-type(1) {
            background-color: lightcyan;
        }
        ul.content li:nth-of-type(2) {
            background-color: cyan;
        }
        ul.content li:nth-of-type(3) {
            background-color: darkcyan;
        }
        ul.content li:nth-of-type(4) {
            background-color: lightyellow;
        }
        ul.content li:nth-of-type(5) {
            background-color: yellow;
        }
        ul.content li:nth-of-type(6) {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li class="current">秒杀</li>
        <li>优惠券</li>
        <li>Plus会员</li>
        <li>闪购</li>
        <li>拍卖</li>
        <li>京东时尚</li>
    </ul>

    <ul class="content">
        <li class="current_content">秒杀内容</li>
        <li>优惠券内容</li>
        <li>会员内容</li>
        <li>闪购内容</li>
        <li>拍卖内容</li>
        <li>京东时尚内容</li>
    </ul>

</body>
</html>

?很方便，看代码多揣摩揣摩

CSS书写方案-行内样式：

注意：①优先级别最高，(除了! important）

? ? ? ? ? ?②它是写在每一个标签中的样式?是一个属性

? ? ? ? ? ?③它的属性名叫style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body style="text-align: center;">
    <h2 style="font-size: 28px;color: orange;">柳枝词</h2>
    <p style="font-size: 18px;letter-spacing: 10px; color: palegreen; text-shadow: 5px 5px 2px gray;">亭亭画舸系春潭</p>
    <p style="font-size: 18px;letter-spacing: 10px; color: palegreen; text-shadow: 5px 5px 2px gray;">直到行人酒半酣</p>
    <p style="font-size: 18px;letter-spacing: 10px; color: palegreen; text-shadow: 5px 5px 2px gray;">不管烟波与风雨</p>
    <p style="font-size: 18px;letter-spacing: 10px; color: palegreen; text-shadow: 5px 5px 2px gray;">载将离恨过江南</p>
</body>
</html>

?CSS书写方案-外部样式：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./out.css">
</head>
<body>
    <h2>柳枝词</h2>
    <p>亭亭画舸系春潭</p>
    <p>直到行人酒半酣</p>
    <p>不管烟波与风雨</p>
    <p>载将离恨过江南</p>
</body>
</html>

CSS：

body{
    text-align: center;
}
h2{
    font-size: 28px;
    color: orange;
}
p{
    font-size: 18px;
    color: red;
    letter-spacing: 10px;
    text-shadow: 5px 5px 2px greenyellow;
}

外部样式：