• 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>

  • 相关阅读:
    如何简单上手清华AutoGPT并搭建到本地环境
    单个数据盘分区如何配置LVM
    21天经典算法之希尔排序
    【STL】容器 - string的模拟实现
    第2-4-8章 规则引擎Drools实战(1)-个人所得税计算器
    【Flask框架】四. Flask框架之 MySQL数据库操作及项目重构
    贝锐蒲公英云AP，企业WiFi功能如何使用？
    【博客543】golang pprof性能调试：寻找cpu瓶颈
    Windbg分析高内存占用问题
    csdn软件测试入门的测试基本流程
  • 原文地址：https://blog.csdn.net/lee514/article/details/134257373