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 @ 2022-10-12 04:04  Solitary-Rhyme  阅读(54)  评论(0)    收藏  举报