HTML tag definition
format
Actually, it was used in the last class.
<p>...</p>
p {Attribute: Attribute Value; Attribute 1: Attribute Value 1;}
p can be called a selector, defining the content in that tag to execute the style in it
A selector can control several style attributes, which need to be separated by';'in English, and the left one can be left without';'.
Code
<!doctype html>
<html>
<head>
<title>CSS custom style</title>
<meta charset="utf-8">
<style type="text/css">
p{
color:red;
}
</style>
</head>
<body>
<p>I'm a paragraph.</p>
</body>
</html>Display results
Class Definition
format
<p class="a" >...<p>
class definition begins with ".".
a {Attribute: Attribute Value; Attribute 1: Attribute Value 1;}
class can be reused, that is, it can act on any other label.
Code
<!doctype html>
<html>
<head>
<title>CSS custom style</title>
<meta charset="utf-8">
<style type="text/css">
.a{color:green;font-size:30px;}
/*.a p{color:red;font-size:30px;}*/
.b{color:blue;font-size:30px;}
</style>
</head>
<body>
<p class="a">I'm a paragraph.</p>
<div class="a">I'm the second paragraph.</p>
<!--If you want to define it separately div Lower p sign
1..a p{color:red;font-size:30px;}
2.class="b"
.b{color:blue;font-size:30px;}
-->
<div class="a">
<p class="b">I'm the fourth paragraph.</p>
I'm the third paragraph.
</p>
</body>
</html>Display results
ID Definition
format
<p id="a" >...</p>
ID starts with "#"
# a {Attribute: Attribute Value; Attribute 1: Attribute Value 1;}
It's the same as class.
It is noteworthy that the ID selector is unique, and usually a page appears once intelligently.
Code
<!doctype html>
<html>
<head>
<title>CSS custom style</title>
<meta charset="utf-8">
<style type="text/css">
#a{color:red;font-size:30px;}
</style>
</head>
<body>
<p id="a">I'm a paragraph.</p>
</body>
</html>Display results
ellipsis
Priority issues
ID>Class>HTML
Choose the nearest one to the element at the same level
Code
<!doctype html>
<html>
<head>
<title>CSS custom style</title>
<meta charset="utf-8">
<style type="text/css">
#a{color:red;font-size:30px;}
.b{color:green;font-size:30px;}
p{color:yellow;font-size:30px;}
div{color:yellow;font-size:30px;}
div{color:red;font-size:30px;}
</style>
</head>
<body>
<p id="a" class="b">I'm a paragraph.</p><!--red-->
<p id="a" >I'm the second paragraph.</p><!--red-->
<p class="b" >I'm the third paragraph.</p><!--green-->
<p >I'm the fourth paragraph.</p><!--yellow-->
<div>I'm the fourth paragraph.</div><!--red-->
</body>
</html>Display results
ellipsis
Combination selector
Synchronized control of multiple elements
h1,h2,h3 {attribute: attribute value; attribute 1: attribute value 1;}
Selection combiner can be separated by ",".
Code
<!doctype html>
<html>
<head>
<title>CSS custom style</title>
<meta charset="utf-8">
<style type="text/css">
h1,h2,h3,h4,.b,#a{color:red;}
</style>
</head>
<body>
<h1>Let's study together.</h1>
<h2>Let's study together.</h2>
<h3>Let's study together.</h3>
<h4>Let's study together.</h4>
<p id="a">Let's study together.</p>
<p class="b">Let's study together.</p>
</body>
</html>Display results
Pseudo-element selector
- a:link Normal Connection Style
- a:hover Mouse Up Style
- a:active style when selecting links
- a:visited links that have been accessed
Code
<!doctype html>
<html>
<head>
<title>CSS custom style</title>
<meta charset="utf-8">
<style type="text/css">
a:link{color:red;}
a:hover{color:green;}
a:active{color:yellow;}
a:visited{color:blue;}
</style>
</head>
<body>
<a href="http://www.baidsu.com" target="_blank">hundred du</a>
</html>Display results
Eliminate...