css基本知识

最新推荐文章于 2024-09-06 22:20:29 发布

柚子会一直发光的

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量446

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_72699629/article/details/125748013

版权

1.关系选择器

该篇应用的完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>关系选择器t</title>

     <style>

    

        div p+div{

            background-color: antiquewhite;

        }

    

        div p~ul{

            background-color: aqua;

        }

     </style>

</head>

<body>

    <div>

        <p>div中的子元素p

            <strong>

                p标签的子元素strong

                <em>strong 的子元素</em>

            </strong>

        </p>

        <div>div的子元素div标签</div>

        <ul>

            div中的子元素ul

            <li>列表项</li>

        </ul>

        <div>div的子元素div标签</div>

        <ul>

            div中的子元素ul

            <li>列表项</li>

        </ul>

        <div>div的子元素div标签</div>

        <ul>

            div中的子元素ul

            <li>列表项</li>

        </ul>

    </div>

</body>

</html>

完整运行结果如下：

1.1相邻兄弟选择器；

格式：兄弟+相邻兄弟

选择所有页面中紧接着p元素之后的第一个div元素。

1.2 兄弟选择器：

格式：兄弟~兄弟选择器

设置同一个div元素下的p元素之后的每一个ul元素的背景颜色。

2.css和行内样式

该篇应用的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内样式和css</title>
   
    <style>
        
        h6{
            font-size: 30px;
        }
        h4{
            font-size: 20px;
        }
        
        P{
           color: bisque;
        }
    </style>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
  
    <p style ="color: blue;">中国空间站（天宫空间站，英文名称 China Space Station）是中华人民共和国计划中的一个空间站系统，预计在2022年前后建成。空间站轨道高度为400~450公里，倾角42~43度，设计寿命为10年，长期驻留3人，总重量可达180吨 [48]  ，以进行较大规模的空间应用。 [1-2]  1992年，中国政府就制定了载人航天工程“三步走”发展战略，建成空间站是发展战略的重要目标</p>
    <h1 style="font-size: 60px;">一级标题</h1>
    <h6>六级标题</h6>
    <h4>四级标签</h4>

</body>
</html>

完整运行结果如下：

2.1 css的使用方式：

2.1.1.内联样式：也叫行内样式/行间样式，在开始的标签内添加style属性并设置css样式。

例如:

2.1.2内嵌样式：也叫内部样式,在html中的head标签中添加并按照固定格式设置css样式

优点:可以重复使用代码。

例如：

2.1.3.外联样式：也叫外部样式，在外部创建一个css文件，在html中的head标签中通过list引入css文件

优点：可以重复使用代码。

优先级：

1.正常情况下——行内样式——内部样式——外部样式

特殊情况：行内样式——内部样式/外部样式(按照在头标签里面的先后顺序，以浏览器的执行顺序判断优先级)。

3.css基本选择器

该篇应用的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css基本选择器</title>
    <style>
      
        *{
            font-size: 30px;
        }
      
        p{
            color: rgb(188, 153, 143);
        }
       
        #first{
          background-color: blue;
        }
        .first{
            background-color: black;
        }
        
        .line{
            font-size: 50px;
        }
        
        p#first.line{
            background-color: rgb(127, 238, 255);
             
        }
       
        p,#box{
            background-color: #ffc;
        }

        h4,span{
            background-color: #ccf;
        }
       
        #box>div>h4{
            color: aqua;
        }
       
        #box span{
            color: red;
        }
    </style>    
</head>
<body>
    <p id="first" class="line first element">第一行</p>
    <p class="line">第二行</p>
    <p class="line">第三行</p>
    <h4 class="line">第四行</h4>
    <div id="box" class="box element">这是一个块
        <div>
            <h4>标题</h4>
            <span>普通文本</span>
        </div>
        <span>普通文本</span>
    </div>
    <p>段落</p>
    
</body>
</html>

完整代码运行结果如图所示：