CSS1基础版

XIANAN_

已于 2022-05-11 15:26:59 修改

阅读量139

点赞数 3

文章标签： css

于 2022-05-11 15:03:22 首次发布

本文链接：https://blog.csdn.net/m0_56103565/article/details/124710292

版权

请添加图片描述

🌸 引入css的四种方式

🥀 1.行内式：直接使用html标签的style属性

<h1 style="color: green;text-align: center;">hello</h1>

🥀 2.内嵌式（内部式）：在head标签内，使用style标签引入css

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <!--在head标签内使用style标签-->
        <style>
            <!--指定h1的样式-->
            h1{
               color: red;
               text-align: center; 
            }
        </style>
    </head>
    <body>
        <!-- 内嵌式 -->
        <h1>hello</h1>
    </body>

🥀 3.外链式（外部式）

(1)创建css文件，注意名字不要以数字开头

(2)html文件中，在head标签中使用link引入css样式

(3)外链式引入的css文件，与html并行加载

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <!--外链式引入css文件-->
         <link rel="stylesheet" href="./test.css">
    </head>
    <body>
        <!-- 外链式 -->
        <h1>hello</h1>
    </body>

🥀 4.导入式(导入的优先级：就近原则，后面样式覆盖前面样式)

(1)在style标签内，使用@import url(“路径”)引入独立的css文件

(2)这种方式是html加载之后，才加载css。会影响样式选u内燃的速度。

(3)在css文件中也可以使用@import导入样式

    <body>
        <!-- 导入式导入css样式文件 -->
         <style>
             @import url(./css/test2.css);
         </style>
        <!-- 导入式 -->
        <h1>hello</h1>
    </body>

🌸 选择器 (Id>类>标签>通配)

选择器就是按照一定的选择条件(名称/类，等等)，选择匹配的元素/节点

🥀 1.标签选择器：

p{
    text-align:center;<!-- 居中 -->
    color<!-- 文字颜色 -->
}

🥀 2.Id选择器：

<body>
    <style>
        #p{
            text-align: center;
            background-color: aqua;
            color: azure;
        }
    </style>
    <div id="p1"></div>
</body>

🥀 3.类选择器：

    .p2{
            text-align: center;
            background-color: aqua;
            color: azure;
        }
    </style>
        <div class="p2"></div>

🥀 4.通用选择器（除了一给的那个的样式）

<body>
    <style>
        * {
            background-color: #000000;
        }
    </style>
</body>
      <div class="p1"></div>
      <div id="p"></div>

🥀 5.子代选择器（>）：选取该标签后的第一级（只能是第一级所有子类）

<body>
    <style>
        div>p{
            background-color: azure;
        }
    </style>
    <div>
        <p> 你好！</p>
    </div>
</body>

🥀 6.后代选择器（空格）:选取该标签内所有子标签

<body>
    <style>
        div p{
            background-color: azure;
        }
    </style>
    <div>
        <p>你好！！</p>
    </div>
</body>

🥀 7.分组选择器(,)：选择多个不同的标签加上相同的样式用逗号隔开

<body>
    <style>
        h2,.list,#list{
            color: azure;}
    </style>
    <h2>你好！</h2>
    <div class="list"></div>
    <div id="list"></div>
</body>

🥀 8.属性选择器：根据某个特定的属性或者属性值来选取元素

[title]{
  color: #ffffff;
}

[title="targit"1]{
  color: #ffffff;
}
//选择div下的有title属性并且值为"targit2"元素（实际上找到的是a）

🥀 9.伪类选择器：伪类可以理解为不存在的类，也就是我们人为加上的选择条件

💮 ①选择第一个元素（first-child）

div>p:first-child{
  color: #ffffff;
}

💮②选择最后一个元素（last-child）

div>p:last-child{
  color: #ffffff;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪类选择器代码示例</title>
    </head>
    <body>
        <style>
            p::first-letter {
                font-size: 32px;
                color: red;
            }
            p2::first-line{
                font-size: 32px;
                color: palevioletred;
            }
            p2::first-letter{
                font-size: 32px;
                color: palevioletred;
            }
        </style>
        <!-- 1.  ::fist-letter -->
        <p>城南花已开，愿君安好！</p>
        <p>The south of the city flowers have opened,
            may Junjian be good</p>
        <!-- 2.  ::first-line -->
        <!-- 3.  ::first-letter -->
        <p class="p2">花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。
        淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡
        看得失，宠辱不惊，去意无留；懂得给感情留白，方能持久生香，留有余
        地，相互欣赏，拥有默契；懂得给生活留白，揽一份诗意，留一份淡定，
        多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有
        些风景要远观，才能美好；有些人情要淡然，才会久远，人生平淡更持久，
        留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离。</p2>
    </body>
</html>

请添加图片描述