❗ Summary of three common ways of introducing HTML into CSS ❗

introduction

CSS is like a girl's cosmetics for HTML. After CSS modification, web page elements will be more rich and beautiful, but the first need before using CSS is how to add CSS code to HTML code. Here are three common methods;

ps: since the author plans to develop to the java back-end in the future, he only understands some of the main contents of the front-end knowledge, focusing on applications. Therefore, if there are errors, please correct them in time!

Inline definition method

Because each element has a style attribute, you can directly add css code to an element and only act on that element, so that you can accurately control the performance of an HTML element, so that each css style only controls a single HTML element;
The format is: style="property1:value1;property2:value2;property3:value3;"

Example code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css Inline definition method</title>
	</head>
	<body>
		<!--Add directly to the element css Code, each element has style attribute-->
		<div style="width: 400px; height: 400px; background-color: cornflowerblue;
												 border-width: 10px; 
												 border-style: groove; 
												 border-color: coral;">
		</div>
		<br>
		<!--above border The writing method can be simplified-->
		<div style="width: 300px; height: 300px; background-color: aquamarine; border: 1px crimson solid;">
		</div>
	</body>
</html>

Style block

This method uses selectors to determine which elements a style works on. There are many selectors. Here, only three common selectors are introduced, namely:

id selector
tag chooser
Class selector

Here are the details:

id selector

Different elements are distinguished by the id attribute, which is targeted to only one id;
The format is: #idValue {.......}

Example code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css of id selector</title>
		<!--The same is needed here style，type The following is the fixed format. Just remember-->
		<style type="text/css">
			/*id selector*/
			#llll {
				color: cadetblue;	
				font-size: large;
			}
		</style>
	</head>
	<body>
		<!--here id Set to llll-->
		<span id="llll">Lala Lala</span>
	</body>
</html>

tag chooser

css style acts on an element, which is all the elements;
Format: E {...}

Example code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css Label selector for</title>
		<style type="text/css">
			/*tag chooser */
			div {
				background-color: cornflowerblue;
				border: brown 10px groove;
				width: 300px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<!--css Act on these div label-->
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
	</body>
</html>

Class selector

The class selector specifies that the css style works on the element with the specified class attribute
The format is: [E].classValue {...}

Example code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css Style block</title>
		<style type="text/css">
			/*Class selector, which works for all 'lei' classes*/
			.lei {
				border: darkorchid 5px ridge;
			}
		</style>
	</head>
	<body>
		<!--there input Element and select All elements belong to'lei'This class-->
		<input type="text" class="lei" />
		<br>
		<select class="lei">
			<option value="ps">primary school</option>
			<option value="ms">junior middle school</option>
			<option value="hs">high school</option>
		</select>
	</body>
</html>

Import external independent css files

This method is more flexible than the first two. It operates on an element through a. css file;

Note: the method described here is recommended. There is another method to import external style files through @ import. This method is not recommended because many browsers do not support this import method; And the effect of the two methods is the same;

Import an external file through the link element in the HTML file,
The format is: < link type = "text / CSS" rel = "stylesheet" href = "URL of CSS style file (uniform resource locator)"
Note: type and rel here are fixed formats, remember;

Example code:
css file:

<!--yes a Unified processing of labels-->
a{
	text-decoration: none;
}
<!--yes baidu this id Processing of corresponding elements-->
#baidu{
	color: mediumblue;
	text-decoration: underline;
	cursor: pointer;
}

html code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Introducing external independence css file</title>
		<!--adopt link yes css File connection, rel and type It's a fixed way of writing-->
		<link rel="stylesheet" type="text/css" href="css03.css" />
	</head>
	<body>
		<a href="http://www.baidu.com" target="_ blank" style="color: #0000CD; "> Baidu</a>
		<span id="baidu" >Baidu</span>
	</body>	
</html>

summary

These three methods are the main three methods and are commonly used,
Another method is: internal css style. This method is not recommended. Let's learn it here in order to compare it with the following js;
The format is:

<style type="text/css">
Style sheet file definitions
</style>

Other methods will not be introduced (after all, bloggers are not specialized in developing the front end, and the back end is basically OK);
Here are three methods:

Inline definition method
Style block
Import external independent css files

Welcome your comments!

Posted by angel1987 on Wed, 06 Oct 2021 13:10:14 -0700

Programmer Group

❗ Summary of three common ways of introducing HTML into CSS ❗

introduction

Inline definition method

Style block

id selector

tag chooser

Class selector

Import external independent css files

summary

Hot Keywords