css和html怎么连接-前端问答-PHP中文网

css和html怎么连接

WBOY

发布： 2023-05-29 18:30:38

原创

5384人浏览过

html和css是web开发的两个基本技能，html用于构建网页结构，而css用于美化网页外观。无论你是一个有经验的web开发者还是一个初学者，都需要知道如何将这两项技能结合起来，才能创造出真正优秀的网页。

一、使用内部CSS

在HTML页面的头部标签内，可以通过<style></style>标签来嵌入CSS样式。你可以在<style></style>标签中定义你所有需要的CSS样式，这样HTML页面在加载时就会将CSS样式应用到文档中。例如下面的示例：

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <style>
        body {
            background-color: blue;
        }
        h1 {
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是我的第一个网页</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10566">
                            <img src="https://img.php.cn/upload/webcode/000/000/002/176275620353839.jpg" alt="SeoShop">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10566">SeoShop</a>
                            <p>SeoShop网店系统全站纯静态html生成更符合搜索引擎优化，并修改了以前许多js代码，取消了连接地址的js代码更换为纯div+css格式，并且所有文件可自定义url和文件名，自定义内部连接，自定义外部连接，等多个符合SEO搜索引擎优化的设置，让您的网店更容易让搜索引擎收录. 简单易用 极速网店真正做到以人为本、以用户体验为中心，能使您快速搭建网上购物网站。后台管理操作简单，一目了然，没有夹杂多</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="SeoShop">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10566" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="SeoShop">
                        </a>
                    </div>
                
</body>
</html>

登录后复制

在上面的代码中，我们通过在<style></style>标签中嵌入CSS样式，将页面背景颜色设置为蓝色，将标题颜色设置为白色并居中对齐。

立即学习“前端免费学习笔记（深入）”；

二、使用外部CSS文件

如果你在多个HTML页面中要使用相同的CSS样式，那么使用内部CSS会显得非常冗余，这时候我们可以使用外部CSS文件。我们新建一个以.css为后缀的文件，例如style.css，并在HTML页面的头部标签内通过<link>标签将CSS样式文件链接到页面上。例如：

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是我的第一个网页</p>
</body>
</html>

登录后复制

在样式文件style.css中，我们可以定义所有需要用到的CSS样式。

body {
    background-color: blue;
}
h1 {
    color: white;
    text-align: center;
}

登录后复制

三、使用行内CSS

除了内部CSS和外部CSS文件，我们还可以使用行内CSS。行内CSS是指在HTML标签内使用style属性来定义CSS样式。例如：

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <h1 style="color: white; text-align: center;">欢迎来到我的网页</h1>
    <p style="background-color: blue;">这是我的第一个网页</p>
</body>
</html>

登录后复制

在上面的代码中，我们在<h1></h1>标签和<p></p>标签中使用了style属性，分别定义了标题的颜色和对齐方式，以及段落的背景颜色。

总结

无论是内部CSS、外部CSS文件还是行内CSS，它们的最终目的都是为了美化网页的外观。在实际开发中，我们可以根据实际情况选择不同的方式进行CSS和HTML的链接。当要定义的CSS样式比较多时，我们可以使用外部CSS文件；当需要定义较少的样式时，则可以使用内部CSS或行内CSS。

以上就是css和html怎么连接的详细内容，更多请关注php中文网其它相关文章！