AfarX

A Rookie of R.

CSS学习笔记

Menu
  1. 1. 样式种类
    1. 1.1. 行内样式【JS常用】
    2. 1.2. 内嵌样式【不能重复利用】
  2. 2. 选择器
    1. 2.1. 标签选择器
    2. 2.2. 类选择器
    3. 2.3. ID选择器
  3. 3. 样式优先级
  4. 4. 样式继承
  5. 5. @的作用

样式种类

行内样式【JS常用】

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

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

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

放入<head></head>

1
2
3
4
5
6
7
8
9
10
11
12
	<style>
h1{
color: orange;
}
</style>
```



## 外连样式
```css
<link rel="stylesheet" href="styles/style.css">

rel:relationship
href:样式表位置

选择器

标签选择器

1
2
3
4
h1, h2{
color: teal;
font-size: 66px
}

类选择器

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

ID选择器

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

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

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

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

样式优先级

  1. 自定义大于默认
  2. 类大于标签
  3. 同级别的样式最后定义的更优先
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    html:

    <h2 class="red blue">我也好</h2>
    css:
    .red{
    color: red;
    }

    .blue{
    color: blue;
    }

使用的是blue.

  1. ID大于类
    因为ID只能使用一次,而CLASS适用于多个元素。
  2. 行内样式大于ID
    1
    <h2 style="color: black" id="title" class="red blue">我也好</h2>

最后的颜色是black。

样式继承


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

@的作用

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