• 欢迎光临~

CSS笔记 - 01 CSS和HTML的结合方式

开发技术 开发技术 2022-10-12 次浏览

1. CSS和HTML的结合方式

  • 内联样式/行内样式

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

    (由于内联样式的复用性非常差,所以开发中基本不使用内联样式)

    <div style="border: 1px solid red;">div标签</div>
    
  • 内部样式表

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

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

    把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>
    
程序员灯塔
转载请注明原文链接:CSS笔记 - 01 CSS和HTML的结合方式
喜欢 (0)