• CSS的概念和基本用法

    CSS的作用：

            页面美化和布局控制。

    1.概念：

             Cascading Style Sheets 层叠样式表。

             层叠：多个样式可以作用在同一个html的元素上，同时生效。

    2.好处：

            (1).功能强大

            (2).将内容展示和样式控制分离

                    * 降低耦合度，解耦。

                    * 让分工协作更容易。

                    * 提高开发效率。

    3.CSS的使用：CSS与html结合方式。

            (1).内联样式

                    * 在标签内使用style属性指定css代码。

                    * 如：

    style="color:red;">hello css

            (2).内部样式

                    * 在head标签内，定义style标签，style标签的标签体内容就是css代码。

                    * 如：
                            

            (3).外部样式

                    1).定义css资源文件。

                    2).在head标签内，定义link标签，引入外部的资源文件

                    * 如：

                            a.css文件：

                                    div{
                                            color:green;
                                        }

                            在head标签内，用link引入外部资源文件

                                    

            总结：

                    * (1),(2),(3)种方式 css作用范围越来越大。

                            第(1)种方式作用于单个标签。

                            第(2)种方式作用于单个页面。

                            第(3)种方式作用于多个页面，哪个页面引入样式，就会有相应的效果。

                    * 第(1)种方式不常用，后期常用方式(2)和(3).

                    * 第(3)种格式还可以写为：

                             

    示例：

    第(1)种内联样式：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>内联样式title>
    6. head>
    7. <body>
    9.     <div style="color:red;">hello cssdiv>
    10.  
    11. body>
    12. html>

    第(2)种内部样式：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>内部样式title>
    6.     <style>
    7.         div{
    8.             color:blue;
    9.         }
    10.  
    11.     style>
    12. head>
    13. <body>
    15.     <div>hello cssdiv>
    16.     <div>hello cssdiv>
    17. body>
    18. html>

    第(3)种外部样式：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>外部样式title>
    6.     
    7.    
    8.     
    9.     
    10.     <style>
    11.         @import "css/a.css";
    12.     style>
    13. head>
    14. <body>
    15.  
    17.     <div>hello cssdiv>
    18.     <div>hello cssdiv>
    19. body>
    20. html>

  • 相关阅读:
    将移位距离和假设外推到非二值化问题
    Feign源码解析：初始化过程（二）
    AI辅助研发对医药、汽车和电子行业的影响
    ES写入数据报错：retrying failed action with response code: 429
    网络安全常用命令
    【自动驾驶】自动驾驶感知系统与关键技术介绍
    springboot:视图渲染技术
    关于解释型语言和编译性语言的区别
    IP属地如何高效率识别
    58同城登录如何免验证码，通过账号登录，有的联系我
  • 原文地址：https://blog.csdn.net/lee514/article/details/134257373