• 前端之CSS 创建css--行内引入、内联样式、外联样式


    创建css有三种创建样式,行内引入、内联引入、外联引入。

    行内引入

    在行内标签引入

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>行内样式title>
    6. head>
    7. <body>
    8. <span style="color: aqua;font-size: 200px;">测试文字span>
    9. <span>测试文字span>
    10. <span>测试文字span>
    11. body>
    12. html>

    结果

    内联样式

     在style标签中创建

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>内部样式title>
    6. <style>
    7. span{
    8. color: aqua;
    9. font-size: 120px;
    10. }
    11. style>
    12. head>
    13. <body>
    14. <span>测试文字span><br>
    15. <span>测试文字span><br>
    16. <span>测试文字span><br>
    17. <span>测试文字span>
    18. body>
    19. html>

    结果 

     外联样式

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>外联样式title>
    6. <-- 路劲要自己设置 -->
    7. <link rel="stylesheet" href="../css/1.3外联样式.css">
    8. head>
    9. <body>
    10. <span>测试文字span>
    11. <span>测试文字span>
    12. <span>测试文字span>
    13. <span>测试文字span>
    14. body>
    15. html>

    外联样式.css文件 

    1. span{
    2. color: yellow;
    3. font-size: 120px;
    4. }

    结果

     三种样式优先级问题

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>外联样式title>
    6. <link rel="stylesheet" href="../css/1.3外联样式.css">
    7. head>
    8. <body>
    9. <span>测试文字span>
    10. <span>测试文字span>
    11. <span>测试文字span>
    12. <span>测试文字span>
    13. body>
    14. html>

    这个结果就不演示了,感兴趣的大家可以自己跟着注释练习一下。


    不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚

  • 相关阅读:
    Java8 Stream API 基础操作
    500报错解决了
    lombok保姆教学
    python多进程之间共享内存
    【CVPR 2022】HDR-NeRF: High Dynamic Range Neural Radiance Fields
    bootstrap下拉菜单学习(五)
    Spring IOC
    【Docker】初学者 Docker 基础操作指南:从拉取镜像到运行、停止、删除容器
    从Unity Robotics Hub入门Unity-ROS
    Mac命令关闭代理设置
  • 原文地址:https://blog.csdn.net/banliyaoguai/article/details/136769063