Article Directory
One, CSS application method
1. Inline style
<body>
<p style="color: red">This is red, this is <span style="color: yellow">yellow</span>.</p>
</body>
2. Inner fitting type
<!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. Linked
<!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. Imported
<!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;
}
Two, CSS selector
Select one or more elements in the HTML document and apply the specified style to it
1. Basic selector
Ⅰ. Element selector
/*名字设置为标签名*/
h1{
color:darkred;
text-align:center;
...
}
p{
color:chartreuse;
font-size:1.2em;
...
}
...
Ⅱ. Class selector
<!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 selector
<!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>
Ⅳ. Wildcard selector
<!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>
Ⅴ. Attribute selector
<!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>
| Method of specifying attributes | description |
|---|---|
| [attribute] | Select the element with attribute |
| [attribute = “value”] | Select the element whose attribute attribute is value |
| [attribute *= “parts of value”] | Select the element whose attribute attribute contains a part of value |
| [attribute ^= “head of value”] | Select the element whose attribute attribute starts with value |
| [attribute $= “tail of value”] | Select the element whose attribute attribute ends with value |
2. Compound selector
Ⅰ. Intersection selector
The label-specific selector is also called the intersection selector. It consists of two selectors. The first is a mark selector, and the second is an id or class selector. There can be no spaces between the two selectors.
/*选择class为id的p标签*/
p.red{
color:red;
}
Ⅱ. Union selector
The union selector is spliced by commas and can contain any selector
/*选择所有h1和p标签*/
h1,p{
color:red;
}
Ⅲ. Descendant selector
Act on all child tags under the parent tag
<!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>
Ⅳ. Son selector
Act only on the direct child tags under the parent tag
<!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>
Ⅴ. The next-to-brother selector
Act on the next label of the adjacent label
<!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>
Ⅵ. General brother selector
All subsequent designated labels that act on the designated label
<!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>
Finish
Welcome to leave a message in the comment area.
Thanks for browsing