style, css - 작성방법 및 선택자

css 작성 방법

선택자{속성:값;속성:값;}

h1{color:blue;}

h1 요소에 color(글자색)을 blue(파란색)으로 설정해라.

 

선택자는 스타일을 지정하려는 html 요소를 의미하고

선언 블록은 {} 안에 작성한다.

속성과 값을  :  로구분, 하나 이상의 선언이 포함되어있다. 

 

선택자 

종류		사용방법
태그 (type)선택자	ex)  h1, p, section	h1{color:red;}
클래스 선택자	ex) .util	.util{color:orange;}
아이디 선택자(주의 이름은 숫자로 시작할 수 없다.)	ex) #gnb	#gnb{font-size:30px;}
전체 선택자	ex) *	*{color:blue;}
하위 선택자	ex) header h1	header h1{color:pink;}
자식 선택자	ex) header > h1	header > h1{color:red;}
인접 선택자 (바로 뒤에오는 형제)	ex) h1 + nav	h1 + nav{background:yellow;}
형제 선택자 (현재 요소와 같은 계층에 있는 요소)	ex) li ~ li	li ~ li{color:red;}
그룹 선택자	ex)h1,h2,h3,h4	h1,h2,h3,h4{color:red;}

 

예)

See the Pen css 기본 선택자 by 정은 (@luchiaChoi) on CodePen.