요소 선택자(태그 선택자)
h1{color: green;}
h2{color: red;}
h3{color: black;}
h4{color: skyblue;}
h5{color: yellow;}
h6{color: white;}그룹화
h1, h2, h3, h4, h5, h6 {color: green;}문서 내에 모든요소
*{margin : 0 auto;}
class 선택자
- 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법
- html태그에 class 속성 추가해야 한다
- class 속성은 글로벌 속성이므로 어느 태그에서도 사용할 수있다
- 공백으로 구분하여 여러 개의 class 값을 넣을 수 있다
- class 선택자를 사용 할 때는 .(마침표)를 사용한다
id 선택자
- id 선택자를 사용할 때는 #(해시)기호 사용한다
- id 선택자는 문서 내에 유일한 요소에 사용
- id 선택자로 규칙을 적용할 수 있는 요소는 단하나뿐
<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title>css</title>
<style>
.item{background: cyan;}
.a{color: black;}
.b{color: black;}
#special{color: red;}
</style>
</head>
<body>
<ul>
<li class="item a">first</li>
<li class="item b">second</li>
<li class="item" id="special">third</li>
</ul>
</body>
</html>
- first
- second
- third
'WEB > html & css' 카테고리의 다른 글
| block 속성 정렬 (0) | 2022.08.24 |
|---|---|
| display 속성 정리 (0) | 2022.08.24 |
| CSS문법과 적용 (0) | 2022.07.12 |
| 블록 & 인라인 (0) | 2022.07.07 |
| 폼 관련 요소(FORM)4 (0) | 2022.07.07 |
댓글