주석은 코드 블록을 설명하거나 개발 중에 일시적으로 변경하기 위해 CSS에서 사용됩니다. 주석 처리 된 코드가 실행되지 않습니다.
CSS의 한 줄 주석과 여러 줄 주석은 모두로 시작 /*하고로 끝나며 */원하는만큼 스타일 시트에 주석을 추가 할 수 있습니다. 예를 들면 :
/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */스타일을 지정하여 주석을 더 읽기 쉽게 만들 수도 있습니다.
/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */주석으로 CSS 구성
대규모 프로젝트에서는 CSS 파일의 크기가 빠르게 커지고 유지 관리가 어려워 질 수 있습니다. 나중에 특정 규칙을 더 쉽게 찾을 수 있도록 목차가있는 별개의 섹션으로 CSS를 구성하는 것이 유용 할 수 있습니다.
/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/CSS에 대해 조금 더 알아보기 : CSS 구문 및 선택자
CSS 구문에 대해 이야기 할 때 우리는 사물이 어떻게 배치되는지에 대해 이야기합니다. 어디로 가는지에 대한 규칙이 있으므로 CSS를 일관되게 작성하고 프로그램 (예 : 브라우저)이이를 해석하여 페이지에 올바르게 적용 할 수 있습니다.
CSS를 작성하는 두 가지 주요 방법이 있습니다.
인라인 CSS
CSS 특이성에 대한 세부 사항 : CSS 트릭
인라인 CSS는 첫 번째 요소를 재정의하는 다른 스타일이 나타날 때까지 단일 요소와 해당 하위 요소에 스타일을 적용합니다.
인라인 CSS를 적용하려면 수정하려는 HTML 요소에 "style"속성을 추가합니다. 따옴표 안에는 설정할 스타일을 나타내는 세미콜론으로 구분 된 키 / 값 쌍 목록 (각각 콜론으로 구분)을 포함합니다.
다음은 인라인 CSS의 예입니다. "One"과 "Two"라는 단어는 배경색이 노란색이고 텍스트 색상이 빨간색입니다. "Three"라는 단어는 첫 번째 스타일을 재정의하는 새로운 스타일을 가지며 배경색은 녹색이고 텍스트 색상은 청록색입니다. 이 예에서는 태그에 스타일을 적용하고 있지만 모든 HTML 요소에 스타일을 적용 할 수 있습니다.
One Two Three 내부 CSS
인라인 스타일을 작성하는 것은 단일 요소를 변경하는 빠른 방법이지만 한 번에 페이지의 여러 요소에 동일한 스타일을 적용하는 더 효율적인 방법이 있습니다.
내부 CSS에는 태그에 지정된 스타일이 있으며 태그에 포함됩니다 .
다음은 CSS가 자체 영역으로 추출 된 것을 제외하고는 위의 "인라인"예제와 유사한 효과를 갖는 예제입니다. "One"및 "Two"라는 단어는 div선택기와 일치 하며 노란색 배경에 빨간색 텍스트로 표시됩니다. "Three"및 "Four"라는 단어 div도 .nested_div선택자 와 일치하지만 해당 클래스를 참조하는 모든 HTML 요소에 적용되는 선택기 와도 일치합니다 . 이보다 구체적인 선택기는 첫 번째 선택기를 재정의하고 녹색 배경에 청록색 텍스트로 나타납니다.
div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 위에 표시된 선택기는 매우 간단하지만 매우 복잡해질 수 있습니다. 예를 들어 중첩 된 요소에만 스타일을 적용 할 수 있습니다. 즉, 다른 요소의 하위 요소입니다.
다음 div은 다른 div요소 의 직접적인 자식 인 요소 에만 적용되어야하는 스타일을 지정하는 예 입니다. 그 결과 "2"와 "Three"는 노란색 배경에 빨간색 텍스트로 표시되지만 "One"과 "Four"는 영향을받지 않고 그대로 유지됩니다 (그리고 대부분 흰색 배경에 검은 색 텍스트).
div > div { color: red; background: yellow; } One Two Three Four 외부 CSS
모든 스타일링에는 태그에 연결된 자체 문서가 있습니다 . 링크 된 파일의 확장자는.css