CSS
CSS문법 정리1일
별메아리
2022. 12. 30. 16:27
728x90
p { backgroind-color: yellow; }
선택자 속성 값
css선언은 항상 ;로 끌날 것
선택자
타입 선택자
html이름의 요소를 사용
h1 { color: green; }
전체선택자
*기호로 표시되며 페이지안 모든 요소를 선택한다.
* { color: blue; }
아이디선택자
특정한 요소를 쉽게 선택할 수 있다.
#special { color: red; }
id가 special인 요소를 선택한다.
<p id="special">id가 special인 단락입니다.</p>
p의 요소id를 special로 지정
클래스선택자
.을 이용해서 정의된다. 요소를 정의할때 클래스 이름을 부여할 수 있다.
.target { color: red; }
class가 target인 요소를 선택한다.
<style>
.type1 {
text-align: center;
}
</style>
<body>
<h1 class="type1">class가 type1인 헤딩입니다.</h1>
<p calss="type1">class가 type1인 단락입니다.</p>
</body>
여기서 p만 지정하는 방법은
<style>
p.typel {
text-align: center;
}
로 p만 지정가능하다.
선택자그룹
,로 분리하여 나열하는 것
h1 {font-family: sans-serif; }
h2 {font-family: sans-serif; }
h3 {font-family: sans-serif; }
와
h1,h2,h3 {font-family: sans-serif; }
는동일하다.
자손,자식,형태 결합자
s1 s2 : s1요소에 포함된 s2 요소를 선택한다. (후손관계)
s1>s2 s1요소에 직계 자식 요소인 s2를 선택한다 (자식 관계)
예
body em { color:red; } /* body 안 em 요소 */
body > h1 { color:blue; } /* body 안 h1 요소 */\
의사 클래스
:을 사용하여 표기한다. 클래스가 정의된 것처럼 간주한다.
a:link { color:blue: } /*아직 방문되지 않은 링크의 색상을 파랑색으로 한다.*/
a:visited { color:green; }/* 방문된 링크의 색상은 녹색으로 한다.*/
a:hover { color:green; }/*사용자가 링크 위에 있을 때*/
tavle:nth-child(2n+1) { color:navy;} /*HTMl 테이블의 홀수 번째 행*/
tavle:nth-child(2n+0) {color:maroon;} /*HTML 테이블의 짝수 번째 행*/
속성선택자
h1[title] { color: blue;}
다음의 선택자는 title속성을 가지고 있는 h1 요소를 선택한다.
p[class=["example"] { color: blue; }
다음의 선택자는 class 속성이 "example"인 p 요소를 선택한다728x90