CSS快速入门

CSS快速入门

🎢导入方式

1、行内

1
<h1 style="color:red">Hello World!<h1>

​

2、内部样式

1
2
3
4
5
6
7
<head>
	<style>
		h1{
			color:red;
		}
	</style>
</head>

​

3、外部样式

​ 链接式：

1
2
3
<head>
	<link rel="stylesheet" href="css/style.css">
</head>

​ 导入式：

1
2
3
4
5
<head>
	<style>
		@import url("css/style.css")
	</style>
</head>

🎆选择器

1、标签选择器

1
2
3
4
5
6
7
8
<style>
	h1{
		color:red;
	}
	p{
		font-size:80px
	}
</style>

2、类选择器

可以复用，归类，同类的使用一样的风格

1
2
3
4
5
<style>
    .block{
        color:blue;
    }
</style>
1
2
3
<h1 class="block">hello</h1>
<h1>world</h1>
<h1 class="block">---world</h1>

3、id选择器

id必须保证全局唯一，

1
2
3
4
5
<style>
    #block{
        color:blue;
    }
</style>

优先级：id选择器>class>标签

4、层次选择器

后代选择器：

选择所有的后代

1
2
3
body p{
	background : res;
}

​

子选择器：

仅仅选择下面一代

1
2
3
body>p{
	background : red;
}

​

相邻（向下）兄弟选择器：

相邻的下面的那一个兄弟元素 

1
2
3
.active + p{
	
}

通用选择器：

当前选中元素的向下的所有兄弟元素

1
2
3
.active~p{
	
}

5、结构伪类选择器

1
2
3
4
5
6
7
8
9
ul的第一个子元素
ul li:first-child{
	
}

ul的最后一个子元素
ul li:last-child{
	
}

6、属性选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//存在id属性的a标签
a[id]{
	
}

//选择id=first的a标签
a[id=first]{

}

//a标签中class属性中含有linkes的属性
a[class*="links"]{

}

//选中href中以http开头的属性
a[href^=http]{

}


笔记
前端 CSS

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！