初学CSS指南-优快云博客

初学CSS

CSS有三种形式，直接添加、页内样式表、独立样式表。

<div style="background-color: salmon;">
        好好学习,天天向上
</div>

直接在div元素上添加style，这种形式影响范围小，但优先级高。

在head中添加

<head>
      <style>
              div{
                   background-color:redbeccapurple;
              }
       </style>
</head>

优先级中等；影响范围为本页。

先写一个.css文件

在这里插入图片描述
在要引用的网页的head中输入

<link rel="stylesheet" href="learn.css">

其中 href后面为.css文件的路径。
这样可以做到一个.css操作多个网页。
优先级与影响范围和页内样式表一致。

※：页内样式表与独立样式表优先级看在html页内的加载顺序，后加载的可以覆盖上面的

    <!--相对路径-->
    <!--learn.css-->
    <!--绝对路径-->
    <link rel="stylesheet" href="C:\Users\April\Desktop\qingbo/learn.css">

CSS是由选择器与一条或多条声明构成，而根据选择器不用，又分为几种选择器。

div{
    background-color;
}

.class-name{
     color:red;
}

# xxx{
     color:red;
}

div ul{
    color:red;
}

这个会使div下的所有ul都能被选中并修改样式。

div > ul {
      color:red;
}

子选择器只能使div下一级的ul全部修改样式，而被间隔一级或多级的ul不会有任何修改。
ps：子选择器与后代选择器优先级相同，后加载的会覆盖上面的。


 div,p,table{
    color:red;
 }

代表所有的div p table 都能受到影响。
※：用逗号隔开的不一定是元素选择器！！

[name="xxxx"]{
     color:red;
}

越精确的影响范围越小，但精确度越高。