HTML+CSS 선택기란 무엇인지 쉽게 소개합니다.

css의 정의는 두 부분으로 구성됩니다:

body{

Style

}

{} 앞 부분은 " Selector", "selector"는 {}에서 "스타일"의 대상을 지정합니다. 즉, 웹 페이지에서 "스타일"이 작동하는 요소는

body가 html 요소이므로 다음과 같이 호출합니다. 요소 선택기

div 테이블 범위 등

아래 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>元素选择器</title>
	<style type="text/css">
		p{
			color:red;
		}

		div{
			color:red;
		}


		span{
			color:red;
		}
	</style>
</head>
<body>
			<p>中国</p>

			<div>美国</div>

			<span>日本</span>
</body>
</html>

참고: 텍스트에 태그가 많고 동일한 태그가 필요한 경우 스타일을 사용하고 나면 CSS를 사용하게 됩니다. 스타일에서는 반복되는 코드를 많이 작성해야 하므로 페이지가 어수선해질 수 있으므로 다음과 같은 방법으로 코드를 작성해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>元素选择器</title>
	<style type="text/css">
		p,div,span{
			color:red;
		}
	</style>
</head>
<body>
			<p>中国</p>

			<div>美国</div>

			<span>日本</span>
</body>
</html>

이렇게 작성하면 위와 같지만 코드가 아주 깔끔해집니다

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>元素选择器</title> <style type="text/css"> p,div,span{ color:red; } </style> </head> <body> <p>中国</p> <div>美国</div> <span>日本</span> </body> </html>

제출하다 코드 재설정

자동운전