Css3 선택기(1)
1.가장 흔히 볼 수 있는 선택기는 원소 선택기이고, 문서의 원소는 가장 기본적인 선택기이다
예: h1{}a{}......
<p>HelloWorld</p>
p{
color: blue;
}2. 선택기 그룹
1.예:
h1、h2{}
h1,h2{
color: red;
}2.와일드카드:
*{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1> 1</h1>
<h2> 2</h2>
<p>HelloWorld</p>
</body>
</html>*{
color: red;
}
h1,h2{
font-size: 45px;
}일반적으로 안팎 여백을 없애기 위해 와일드카드를 사용합니다
*{
margin: 0px;
padding: 0px;
}유형 선택기
1.클래스 선택기는 문서 요소에 독립된 방식으로 스타일을 지정할 수 있습니다
예:.class{}
.div{
color: red;
}2.결합 요소 선택기
예: a.class{}
a.div{
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="div">
HelloWorld
</div>
<a class="div">HelloWorld</a>
</body>
</html>3.다중 선택기
예:.class.class{}
.p1{
color: blue;
}
.p2{
font-size: 30px;
}
.p1.p2{
font-style: italic;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="p1">This is my web page</p>
<p class="p2">This is my web page</p>
<p class="p1 p2">This is my web page</p>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
초보자를 위한 간단한 카드 호버 애니메이션html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
