样式种类

行内样式【JS常用】

 <h1 style="color: red;font-size: 66px">你好</h1>

元素隐藏
display:none
元素显示
display:block

内嵌样式【不能重复利用】

放入<head></head>里

    <style>
        h1{
            color: orange;
        }
    </style>

外连样式

<link rel="stylesheet" href="styles/style.css">

rel:relationship
href:样式表位置

选择器

标签选择器

h1, h2{
    color: teal;
    font-size: 66px
}

类选择器

html:
  <h2 class="red">我也好</h2>
css:
.red{
    color: red;
}
  • 类选择器前面有一个点

ID选择器

一个页面上同一个ID只能出现一次

#title{
    border-bottom: 1px solid #ccc;
    padding-bottom:10px;
}

 <h2 id='title' class="red">我也好</h2>

自定样式会覆盖掉默认样式。

样式优先级

  1. 自定义大于默认
  2. 类大于标签

  3. 同级别的样式最后定义的更优先
    `
    html:

    我也好


    css:
    .red{
    color: red;
    }

.blue{
color: blue;
}

使用的是blue.
4. ID大于类
因为ID只能使用一次，而CLASS适用于多个元素。
5. 行内样式大于ID

我也好


`
最后的颜色是black。

样式继承


div:division
div是一个父级样式，包裹在div里的会继承div的样式。
不是所有的样式都会被继承。

@的作用

@是CSS的一种选择符，它有很多应用场景的，最常用的使用场景是用来引用其他的CSS文件，是以@import开始的，例如想在main.css里面应用style.css，那么直接用@import style.css就可以了。