CSS基本语法使用

一、标签选择器，加样式有两种方式，一种是在标签上直接加，例如

<h1 style="color:red;font-size: 14px; ">我是h1标题</h1>
<h2>我是h2标题</h2>

一、标签选择器，第二种方式 抽离出来，例如 对所有h2 标签都生效，跟javascript一样，javascript是 <script></script>,这个是<style></style>

<h1 style="color:red;font-size:14px;">我是h1标题</h1>
<h2>我是h2标题</h2>
<h2>我是h2标题22222</h2>
<style type="text/css">
    h2{
        color: green;
        font-size: 28px;;
    }

</style>

二、对多个标签生效，有一个高级语法

<h1 style="color:red;font-size:14px;">我是h1标题</h1>
<h2>我是h2标题</h2>
<h2>我是h2标题22222</h2>
<h3>我是h3标签</h3>
<style type="text/css">
    h2，h3{
        color: green;
        font-size: 28px;;
    }

</style>

三、派生选择器，有父子元素关系的使用，例如red 只对li 里的strong 显示红色了

<li>未加粗的字体</li>
<li><strong>加粗的字体</strong></li>


<style type="text/css">
    h2,h3{
        color: green;
        font-size: 28px;;
    }
    li strong{
        color: red;
    }
</style>

四、id选择器，#id（）

<span id="span">我是id选择器</span>

<style type="text/css">

#span{

 #span{
        color: yellow;
    }
</style>

五、类选择器  .类名  ，只对有这个类名的生效

<span>没有类选择器</span>
<span class="myClass">有类选择器的</span>

<style type="text/css">

  .myClass{
        color: rebeccapurple;
    }

</style>

六、CSS优先级

1、css的顺序是“元素上的style”>“文件头上的style元素”>"外部样式文件"

2、样式表的元素选择器选择越精确，则其中的样式优先级越高

元素上的style>id选择器指定的样式>类选择器指定的样式> 标签选择器

3、对于相同类型选择器指定的样式，在样式表文件中，越靠后的优先级越高

p{color:red}

p{color:#8a6d3b}

<p>pppppppp</p>

4、引用多个class的时候，越靠后优先级越高

.class1{

color:black;

}

.class2{

color:red;

}

<p class="class2 class1">ppppppppp</p>