首页 > 其他分享> > css的简介和内联样式表,内部样式表,外部样式表

css的简介和内联样式表,内部样式表,外部样式表

2021-02-01 19:34:45 作者：互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS简介</title>
    <style>
        p{
            color: aqua; 
            font-size: 50px;
        }
    </style>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!--
        网页分为三个部分
            结构(HTML)
            表现(CSS)
            行为(JavaScript)
        CSS
            - 层叠样式表
            - 网页实际上是一个多层的结构, 通过CSS可以分别为网页的每一个层来设置样式
                而最终我们能看到只是网页的最上边一层
            - 总之一句话, CSS用来设置网页中元素的样式
    -->

    <!--
        使用CSS来修改元素的样式

        第一种方式(内联样式表,行内样式表)
            - 在标签内部通过style属性来设置元素的样式
            - 问题
                使用内联样式, 只能对一个标签生效, 如果希望影响到多个元素必须每一个元素中都复制一遍
                并且当样式发生变化时, 我们必须要一个一个的修改, 非常的不方便
            -注意, 开发时绝对不要使用内联样式

        第二种方式(内部样式表)
            - 将样式写到head的style标签里
                然后通过CSS的选择器来选中元素并为其设置各种样式
                可以同时为多个标签设置样式, 并且修改时只要修改一处即可全部应用

            - 内部样式表更加方便对样式进行复用
            -问题
                我们的内部样式表只能对一个网页起作用
                    他里边的样式不能跨页面进行复用
        
        第三种方式(外部样式表) 最佳使用方式
            - 可以将CSS样式编写一个外部的CSS文件中
                然后通过我们link标签来引入外部的css文件
            - 外部样式表需要通过link标签进行引入, 意味着只要使用这些样式的网页都可以对其进行引用
                使样式可以在不同页面之间进行复用
            - 将样式编写写到外部的css文件中, 可以使用到浏览器的缓存机制
                从而加快网页的加载速度, 提高用户的体验
        
        如果一个标签同时使用内联样式表,内部样式表,外部样式表
        优先级
            内联样式表->外部样式表->内部样式表
    -->
    <p style="color: aqua; font-size: 20px;">少小离家老大回,乡音无改鬓毛衰</p>

    <p>今天天气真不错</p>
    
    <p></p>
    
</body>
</html>

标签：鬓毛,外部,简介,今天天气,样式表,内联,css,少小离家
来源： https://www.cnblogs.com/ShuaiStudy/p/14358584.html