CSS 简介&三种样式写法

网页分为三个部分：
结构(html5)
表现(css3)
行为(JavaScript)

css:层叠样式表
网页其实是一个多层的结构，通过css为每一层设置样式
总之一句话：css就是为元素设置样式

添加css样式三种方法：行内样式、内部样式、外部样式


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加css的三个方式</title>
    <style>
        /* 
        第二种：内部样式
                -将样式写到head的style标签内;
                    然后通过css选择器选中元素，并为其设置各种样式;
                    ·优点：可以为多个标签设置样式，修改的时候只需要修改一处;
                -内部样式表更方便的对样式进行复用
                -问题：只能对当前页面其效果，不能对其他页面使用
               
          */
          /* <--- p表示所有p元素设置 --> */
        p{
            color: aquamarine;
            font-size: 24px;
        }
    </style> 
    <!-- 
        第三种方式：外部样式表
        -可以将css样式编写到一个外部的css文件中
            然后通过link标签（样式表、样式表的路径）引入外部的css文件 
        -外部样式表需要通过link标签进行引入
            意味着只要想使用这些样式的网页都可以引用
        -将样式编写到外部的css文件中，可以使用到浏览器的缓存机制
            从而加快网页的加载速度，提高用户体验
    --> 
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- 
        第一种：行内样式，内联样式
                -在标签内部通过style属性来设置元素的样式
                -问题：
                    只能对一个标签使用，使用多个地方，就得复制多个地方
                    代码不好维护，修改的时候需要修改多个地方
     -->
    <p style="color: red;font-size: 24px;">少小离家老大回，</p>
    
    <p>乡音未改鬓毛衰。</p>
    <p>儿童见问应不识，</p>
    <p>笑问客从何处来。</p>
</body>
</html>

style.css


p{
    color:tomato;
    font-size: 24px;
}

相关阅读:
知错认错，但错难改！苹果的种种事件门确实是问题，要改也不是一蹴而就
golang 函数式编程库samber/mo使用： IO
Haproxy 服务
皮革行业分销渠道管理系统有效缩短供销链，提升渠道运营收益
【操作系统】第三章：内存管理
nodejs+vue+elementui英语单词学习网站python java
本地录像视频文件如何推送到视频监控平台EasyCVR进行AI视频智能分析？
高频更新使用sse好还是WebSocket
IntelliJ IDEA 中 Maven 相关操作详解
Alibaba数据源Druid可视化监控配置

原文地址：https://blog.csdn.net/m0_58245389/article/details/126917887

CSS 简介&三种样式写法

网页分为三个部分： 结构(html5) 表现(css3) 行为(JavaScript)

css:层叠样式表 网页其实是一个多层的结构，通过css为每一层设置样式 总之一句话：css就是为元素设置样式

添加css样式三种方法：行内样式、内部样式、外部样式

style.css

网页分为三个部分：
结构(html5)
表现(css3)
行为(JavaScript)

css:层叠样式表
网页其实是一个多层的结构，通过css为每一层设置样式
总之一句话：css就是为元素设置样式