• CSS 简介&三种样式写法

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

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

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

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

    style.css

    1. p{
    2.     color:tomato;
    3.     font-size: 24px;
    4. }

  • 相关阅读:
    Linux软件安装到哪个目录
    如何高效系统学习 MySQL?
    Kamiya丨Kamiya艾美捷人和动物LBP ELISA说明书
    这些Java面试题，有点虐人！
    2023年tiktok入门运营技巧看这里！
    Spring和Spring Boot常用注解介绍及使用
    0048__条件变量详细解说
    t2vec 辅助笔记：data_utils
    自动驾驶技术详解
    实用，eBay账号关联问题该如何解决？
  • 原文地址：https://blog.csdn.net/m0_58245389/article/details/126917887