CSS笔记 - CSS和HTML的常见结合方式

CSS和HTML的结合方式

目录

1. 内联样式/行内样式

  • 在标签内部，通过style属性设置元素的样式key:value value;

    （由于内联样式的复用性非常差，所以开发中基本不使用内联样式）

    <div style="border: 1px solid red;">div标签</div>

2. 内部样式表

  • 将样式编写到head中的style标签中，然后通过CSS选择器来选中元素并为其设置各种样式

    <!DOCTYPE html>
<html>
<head>
    <style>
        /*注意css内的注释方式与html不同*/
        div{
            border: 1px solid red;
        }
        span{
            border: 2px solid yellow;
        }
    </style>
</head>
</html>

3. 外部样式表

  • 把css样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件

    样式可以在不同页面之间进行复用，同时能利用缓存机制加快网页的加载速度，提高用户的体验

    /*css文件内*/
div{
	border: 1px solid red;
}
span{
	border: 2px solid yellow;
}

    <!--html文件内-->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="WebTest.css"/>
</head>
</html>
posted @   Solitary-Rhyme  阅读(33)  评论(0)  编辑  收藏  举报
相关博文：
· JavaScript笔记 - JS和html代码的结合方式
· HTML笔记 - HTML中的常用标签
· CSS和HTML的结合方式、CSS语法格式
· CSS样式(内联、内部、外部)
· CSS与HTML结合方式和CSS语法格式
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示