css selector and its introduction

css selector type:

  • Basic selector (element selector, class selector, attribute selector)

1. The element selector is only used to select one element. For example, the following code selects all div s:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css</title>
		<style>
			div{
				font-size: 30px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div >
			Hello, honey
		</div>
		<div >
			Huh?
		</div>
		<div>
			Okay, honey
		</div>
	</body>
</html>
2. The class selector adds a class to the element and selects the same class, as shown in the following code:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css</title>
		<style>
			.myDiv{
				font-size= 66px ;
				color:blanchedalmond ;
			}
		</style>
	</head>
	<body>
		<div class="myDiv">
			Hello, honey
		</div>
		<div class="myDiv">
			Huh?
		</div>
		<div>
			Okay, honey
		</div>
	</body>
</html>
3. The id selector selects the element with the specified id, as shown in the following code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css</title>
		<style>
			#div_1{
				font-size: 99px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="div_1">
			Hello, honey
		</div>
		<div >
			Huh?
		</div>
		<div>
			Okay, honey
		</div>
	</body>
</html>

  • Other selectors (level selector, property selector)
1. The same element of the level selector is selected according to the different levels. The code is as follows

(select only P in div, but not p outside DIV)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css</title>
		<style>
			div p{
				font-size: 99px;
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div >
			<p>Hello, honey</p>
		</div>
		<div >
			Huh?
		</div>
		<div>
			Okay, honey
		</div>
		<p>hello</p>
	</body>
</html>
2. The attribute selector selects according to different attributes in the same tag, such as the following code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style>
			input[type="text"]{
				background-color: red;
			}
			input[type=password]{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<form>
			<input type="text" />
			<input type="password" />
		</form>
	</body>
</html>

Classification of css selector introduction methods

1. Internal introduction

Add style and selector to the head in html Like the above code

2. Add attribute style to the in line import label and then write the style

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css</title>
	</head>
	<body>
		<div style="font-size: 36px; color: red;">
			<p>Hello, honey</p>
		</div>
	</body>
</html>
3. Write a css file separately through external import, and import it into html through link tag

Code in css file:

div{
	font-size: 33px;
	color: blue;
}
Code in html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css</title>
		<link rel="stylesheet" href="../css/css.css" type="text/css"/>
	</head>
	<body>
		<div >
			Huh?
		</div>
		<div>
			Okay, honey
		</div>
	</body>
</html>







 

Tags: Attribute

Posted on Sat, 02 May 2020 21:05:09 -0700 by pasychosheep