css

1.结构：

h1{                         //h1是选择器
      color:red;          //color是属性，red是属性值
    }

2.样式类型：

2.1.内联样式：直接写到html标签的,用style属性直接声明，没有选择器，

                       仅对当前的html元素有效。

<p style="color:red;">非顶级程序员</p>

2.2.内部样式：选择器是写在html中的head的标签里面，用style标签。

                        仅对当前的页面有效。

<head>
        <meta charest="utf-8">
        <title>顶级程序员</title>
        <style>
        h1{                               //选择h1标签的
               color:red;
             }
        </style>
</head>

2.3.外部样式：通过把link标签放在head标签里，然后指定link标签的href属性来指定外部css路径，这样就可以引入外部样式表了。　　

<html>
<head>
        <meta charest="utf-8">
        <title>document</title>
        <link rel="style sheet"href="style.css">              //通过这个属性
</head>
</html>

3.选择器

3.1.类型选择器：选择页面上所有的该类型

h1{
       color:red;
    }

3.2.类选择器：用点加类名，需要一个class属性在html语言来指定

html语言：
<p  class="my-p">我是一个段落</p>         //class name为"my-p"

CSS语言：
             .my-p{
                        color:red;
                      }

3.3.id选择器：以#开头，#再加id

html语言：
<p  id="my-p">我是一个段落</p>
css语言：
#my-p{
            color:orange;
           }

3.4.通用选择器：

CSS语言：
*{
        ......

   }

3.5.组合选择器：

CSS语言：
h1.my-p{            //既要有h1，又要有class name为my-p的这个属性

             }


h1,h2{               //这个选择器要选择h1的元素和h2的元素

         }

3.6.父子选择器：

html语言：
<div>
    <h1>
        父子选择器
    </h1>
</div>

css语言：
div h1{
           color:blue:
          }

4.优先级

4.1.类型选择器<类选择器<id选择器

4.2.相同的规则按照加载顺序写在后面的优先级更高

     eg:h1为黄色

          h2为白色

      则最终h1为白色

4.3.继承下来的优先级永远低于直接指定的样式　　　

　　

　　

　　

 

　　

　　

　　

　　

　　

 

　　

posted @ 2023-01-19 20:00  大碗不吃辣  阅读(66)  评论(0)    收藏  举报