• CSS 和 HTML 的结合方式/css选择器

    1、第一种：

    在标签的 style 属性上设置 ”key:value value;” ，修改标签样式。
    需求 1 ：分别定义两个 div 、 span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。 
    1. <div>div 标签 1div>
    2. <div>div 标签 2div>
    3. <span>span 标签 1span>
    4. <span>span 标签 2span>
    5. html>
    6. <html lang="en">
    7. <head>
    8. <meta charset="UTF-8">
    9. <title>Titletitle>
    10. head>
    11. <body>
    13. <div style="border: 1px solid red;">div 标签 1div>
    14. <div style="border: 1px solid red;">div 标签 2div>
    15. <span style="border: 1px solid red;">span 标签 1span>
    16. <span style="border: 1px solid red;">span 标签 2span>
    17. body>
    18. html>

    问题：这种方式的缺点？
    1. 如果标签多了。样式多了。代码量非常庞大。
    2. 可读性非常差。
    3.Css 代码没什么复用性可方言。

    2、第二种：

    在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。
    格式如下：
    xxx {
    Key : value value;
    }
    需求 1 ：分别定义两个 div 、 span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。 
    1. <div>div 标签 1div>
    2. <div>div 标签 2div>
    3. <span>span 标签 1span>
    4. <span>span 标签 2span>
    5. html>
    6. <html lang="en">
    7. <head>
    8. <meta charset="UTF-8">
    9. <title>Titletitle>
    11. <style type="text/css">
    12. /* 需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。*/
    13. div{
    14. border: 1px solid red;
    15. }
    16. span{
    17. border: 1px solid red;
    18. }
    19. style>
    20. head>
    21. <body>
    22. <div>div 标签 1div>
    23. <div>div 标签 2div>
    24. <span>span 标签 1span>
    25. <span>span 标签 2span>
    26. body>
    27. html>

    3、第三种：

    把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。
    使用 html 的 < link rel = "stylesheet" type = "text/css" href = "./styles.css" / > 标签 导入 css 样
    式文件。 
    1. 1、css 文件内容：
    2. div{
    3. border: 1px solid yellow;
    4. }
    5. span{
    6. border: 1px solid red;
    7. }
    8. html 文件代码：
    9. html>
    10. <html lang="en">
    11. <head>
    12. <meta charset="UTF-8">
    13. <title>Titletitle>
    15. <link rel="stylesheet" type="text/css" href="1.css"/>
    16. head>
    17. <body>
    18. <div>div 标签 1div>
    19. <div>div 标签 2div>
    20. <span>span 标签 1span>
    21. <span>span 标签 2span>
    22. body>
    23. html>

    CSS 选择器

    1、标签名选择器
    标签名选择器的格式是：
    标签名 {
    属性：值 ;
    }
    标签名选择器，可以决定哪些标签被动的使用这个样式。
    < div > div 标签 1 div >
    < div > div 标签 2 div >
    < span > span 标签 1 span >
    < span > span 标签 2 span >
    需求 1 ：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
    并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。
    示例代码： 
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>CSS 选择器title>
    6. <style type="text/css">
    7. div{
    8. border: 1px solid yellow;
    9. color: blue;
    10. font-size: 30px;
    11. }
    12. span{
    13. border: 5px dashed blue;
    14. color: yellow;
    15. font-size: 20px;
    16. }
    17. style>
    18. head>
    19. <body>
    21. <div>div 标签 1div>
    22. <div>div 标签 2div>
    23. <span>span 标签 1span>
    24. <span>span 标签 2span>
    25. body>
    26. html>

    .2、id 选择器

    id 选择器的格式是：
    #id 属性值 {
    属性：值 ;
    }
    id 选择器，可以让我们通过 id 属性选择性的去使用这个样式。
    需求 1 ：分别定义两个 div 标签，
    第一个 div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色，
    字体大小 30 个像素。边框为 1 像素黄色实线。
    第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 css 样式 修改的字体颜色为红色，字体大小 20 个像
    素。边框为 5 像素蓝色点线
    示例代码： 
    1. html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>ID 选择器title>
    6. <style type="text/css">
    7. #id001{
    8. color: blue;
    9. font-size: 30px;
    10. border: 1px yellow solid;}
    11. #id002{
    12. color: red;
    13. font-size: 20px;
    14. border: 5px blue dotted ;
    15. }
    16. style>
    17. head>
    18. <body>
    20. <div id="id002">div 标签 1div>
    21. <div id="id001">div 标签 2div>
    22. body>
    23. html>

    .3、class 选择器

    class 类型选择器的格式是：
    . class 属性值 {
    属性：值 ;
    }
    class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式。
    需求 1 ：修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
    需求 2 ：修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线。 
    1. <div class="class01">div 标签 class01div>
    2. <div class="class02">div 标签div>
    3. <span class="class01">span 标签 class01span>
    4. <span>span 标签 2span>html>
    5. <html>
    6. <head>
    7. <meta charset="UTF-8">
    8. <title>class 类型选择器title>
    9. <style type="text/css">
    10. .class01{
    11. color: blue;
    12. font-size: 30px;
    13. border: 1px solid yellow;
    14. }
    15. .class02{
    16. color: grey;
    17. font-size: 26px;
    18. border: 1px solid red;
    19. }
    20. style>
    21. head>
    22. <body>
    24. <div class="class02">div 标签 class01div>
    25. <div class="class02">div 标签div>
    26. <span class="class02">span 标签 class01span>
    27. <span>span 标签 2span>
    28. body>
    29. html>

  • 相关阅读:
    牛客刷题一＜四选一多路器＞
    一维数组——找公共元素
    一起来庆祝属于GISer的节日GIS DAY！
    python--转换wrf输出的风场数据为网页可视化的json格式
    代码随想录算法训练营 动态规划part07
    数据分享|R语言武汉流动人口趋势预测：灰色模型GM（1，1）、ARIMA时间序列、logistic逻辑回归模型...
    BPAAS化建设实践-基本流程篇
    List转Java(基本数据类型)数组简述
    数据库系统概论必背知识
    STL库：map和set
  • 原文地址：https://blog.csdn.net/weixin_61451728/article/details/126098716