CSS 구문
CSS 규칙 세트는 셀렉터와 선언 블록으로 구성
HTML 요소에 대한 선택 포인트는 당신이 스타일을 할 수 있습니다.
선언 블록은 세미콜론으로 구분 된 하나 이상의 선언이 포함되어 있습니다.
각각의 선언은 콜론으로 구분 된 CSS 속성 이름과 값을 포함한다.
CSS 선언은 항상 세미콜론으로 종료하고, 선언 블록은 중괄호로 둘러싸여있다.
다음 예에서 모든 <p> 요소는 빨간색 텍스트 색, 중앙 정렬 될 것입니다 :
CSS 선택기
CSS 선택기는 데 사용되는 "find" HTML의 해당 요소 이름, 아이디, 클래스, 속성에 따라 요소 등을 (또는 선택).
요소 선택기
요소 선택기는 요소 이름에 따라 요소를 선택합니다.
당신은 모든 선택할 수 있습니다 <p> 이 같은 페이지에 요소 (이 경우, 모든 <p> 요소 가운데 맞춤, 빨간색 텍스트 색으로됩니다)
아이디 선택기
이드 선택기는 특정 요소를 선택하는 HTML 엘리먼트의 id 속성을 사용한다.
아이디 선택이 하나의 고유 한 요소를 선택하는 데 사용되도록 요소의 ID는 페이지 내에서 고유해야합니다!
특정 ID를 갖는 요소를 선택하기 위해, 소자의 ID 다음 해시 (#) 문자를 쓰고.
스타일 규칙은 다음과 HTML 요소에 적용됩니다 id="para1" :
 | 참고 : ID 이름이 숫자로 시작할 수 없습니다! |
|---|
클래스 선택기
클래스 선택기는 특정 클래스의 속성을 가진 요소를 선택합니다.
된 기록, 특정 클래스 요소를 선택하려면 period (.) 클래스의 이름 뒤에 문자를.
아래의 예에서, 모든 HTML 요소 class="center" 빨간색과 중앙 정렬 될 것입니다 :
또한 특정 HTML 요소는 클래스에 의해 영향을하도록 지정할 수 있습니다.
아래의 예에서, 단지 <p> 와 요소 class="center" 중앙 정렬 될 것입니다 :
HTML 요소는 하나 이상의 클래스를 참조 할 수 있습니다.
아래의 예에서 <p> 요소에 따라 스타일이 될 것이다 class="center" 와에 class="large" :
| 참고 : 클래스 이름이 숫자로 시작할 수 없습니다! |
|---|
선택기를 그룹화
이 같은 동일한 스타일 정의와 요소가있는 경우 :
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}이 코드를 최소화하기 위해, 선택기 그룹에 더 좋을 것이다.
그룹 선택자에, 쉼표로 각 선택기를 구분합니다.
아래의 예에서 우리는 위의 코드에서 선택기를 분류했다 :
CSS 댓글
주석은 코드를 설명하는데 사용되며, 추후에 소스를 편집 할 때 도움이 될 수있다.
댓글은 브라우저에 의해 무시됩니다.
CSS 코멘트로 시작 /* and ends with */ . 댓글은 여러 줄에 걸쳐있을 수 있습니다 :
예
p
{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
»그것을 자신을 시도