文章目录
一、CSS应用方法
1.行内样式
<body>
<p style="color: red">This is red, this is <span style="color: yellow">yellow</span>.</p>
</body>
2.内嵌式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{
color: aqua;
}
</style>
</head>
<body>
<p>This is aqua.</p>
</body>
</html>
3.链接式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<p>This is lawngreen.</p>
</body>
</html>
/*test.css*/
p{
color:lawngreen;
}
4.导入式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
<!-- 或 @import url("democss.css") -->
@import "test.css";
</style>
</head>
<body>
<p>This is pink.</p>
</body>
</html>
/*test.css*/
p{
color:pink;
}
二、CSS选择器
选择HTML文档中一个或多个元素，对其应用指定的样式
1.基础选择器
Ⅰ.元素选择器
/*名字设置为标签名*/
h1{
color:darkred;
text-align:center;
...
}
p{
color:chartreuse;
font-size:1.2em;
...
}
...
Ⅱ.类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 选择类 -->
<style type="text/css">
.red{
color:red;
}
</style>
</head>
<body>
<h1 id="red1" class="red">h1 Selected by class.</h1>
<p id="red2" class="red">p Selected by class.</p>
</body>
</html>
Ⅲ.ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 选择ID -->
<style type="text/css">
#thisisid{
color:red;
}
</style>
</head>
<body>
<p id="thisisid">Selected by id.</p>
</body>
</html>
Ⅳ.通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 通配符选择器应用于页面上的所有元素 -->
<style type="text/css">
*{
color: brown;
}
</style>
</head>
<body>
<h1>h1 selected</h1>
<p>p Selected</p>
</body>
</html>
Ⅴ.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 以属性选择元素的几种案例 -->
<style type="text/css">
[class ^= "thisis"]{
color: aqua;
}
[href = "https://blog.csdn.net/Xxy605"]{
color: blue;
font-size: 20px;
}
[id]{
color: yellow;
}
</style>
</head>
<body>
<h1 class="thisistitle">Title</h1>
<a href="https://blog.csdn.net/Xxy605">My page</a>
<p id="para.1">Para.1</p>
</body>
</html>
| 指定属性的方法 | 描述 |
|---|---|
| [attribute] | 选择拥有属性attribute的元素 |
| [attribute = “value”] | 选择属性attribute为value的元素 |
| [attribute *= “parts of value”] | 选择属性attribute包含value的一部分的元素 |
| [attribute ^= “head of value”] | 选择属性attribute以value为指定开头的元素 |
| [attribute $= “tail of value”] | 选择属性attribute以value为指定结尾的元素 |
2.复合选择器
Ⅰ.交集选择器
标签指定式选择器又叫交集选择器，有两个选择器构成，第一个为标记选择器，第二个为id或class选择器，两个选择器之间不能有空格
/*选择class为id的p标签*/
p.red{
color:red;
}
Ⅱ.并集选择器
并集选择器由逗号拼接，可以包含任何选择器
/*选择所有h1和p标签*/
h1,p{
color:red;
}
Ⅲ、后代选择器
作用于父标签下的所有子标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div p{
color: aqua;
}
</style>
</head>
<body>
<div>I am Parent
<strong><p>I am the first of children</p></strong>
<p>I am the second of children</p>
</div>
</body>
</html>
Ⅳ、儿子选择器
只作用于父标签下的直接子标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1>strong{
color: aqua;
}
</style>
</head>
<body>
<!-- 直接 -->
<h1>It is <strong>important</strong>.</h1>
<!-- 间接 -->
<h1>It is <em><strong>important</strong></em>.</h1>
</body>
</html>
Ⅴ、紧邻兄弟选择器
作用于相邻标签的后一个标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p + p{
color: aqua;
}
</style>
</head>
<body>
<p>first</p>
<p>second</p>
<a href="#"></a>
<p>third</p>
</body>
</html>
Ⅵ、一般兄弟选择器
作用于指定标签的所有后续指定标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p ~ p{
color: aqua;
}
</style>
</head>
<body>
<p>first</p>
<p>second</p>
<a href="#"></a>
<p>third</p>
</body>
</html>
完
欢迎在评论区留言
感谢浏览