샘플 스타일 시트를 사용한 계단식 스타일 시트 개요
처음부터 웹 사이트를 만들 때 정의 된 기본 스타일로 시작하는 것이 좋습니다. 그것은 깨끗한 캔버스와 신선한 브러시로 시작하는 것과 같습니다. 웹 디자이너가 직면 한 첫 번째 문제 중 하나는 웹 브라우저 가 모두 다르다는 것입니다. 기본 글꼴 크기는 플랫폼에 따라 다르며 기본 글꼴 모음이 다르며 일부 브라우저는 본문 태그의 여백과 여백을 정의하고 다른 글꼴은 여백을 정의하지 않는 등 여러 가지가 있습니다. 웹 페이지의 기본 스타일을 정의하여 이러한 불일치를 해결하십시오.
CSS와 문자 세트
먼저 CSS 문서의 문자 세트를 utf-8로 설정하십시오 . 디자인하는 대부분의 페이지는 영어로 작성되지만 일부는 지역화되어 다른 언어 및 문화적 맥락에 맞게 조정될 수 있습니다. 그렇다면 utf-8은 프로세스를 단순화합니다. 외부 스타일 시트 에서 문자 세트를 설정하는 것은 HTTP 헤더 보다 우선하지 않지만 다른 모든 상황에서는 가능합니다.
문자 집합을 쉽게 설정할 수 있습니다. CSS 문서의 첫 번째 행에 다음을 작성하십시오.
@charset "utf-8";이렇게하면 content 속성에서 국제 문자를 사용하거나 클래스 및 ID 이름으로 사용할 경우 스타일 시트 가 올바르게 작동합니다.
페이지 본문 스타일 지정하기
기본 스타일 시트가 필요로하는 다음 작업은 여백, 여백 및 테두리를 제로화하는 스타일입니다. 이렇게하면 모든 브라우저가 같은 위치에 콘텐츠를 배치하고 브라우저와 콘텐츠 사이에 숨겨진 공백이 없어집니다. 대부분의 웹 페이지에서 이것은 텍스트의 가장자리에 너무 가깝지만 배경 이미지와 레이아웃 부분이 올바르게 정렬되도록 시작하는 것이 중요합니다.
html, 본문 {margin : 0px; 패딩 : 0px; border : 0px; }기본 전경 또는 글꼴 색을 검은 색으로, 기본 배경색을 흰색으로 설정하십시오. 이것이 대부분의 웹 페이지 디자인에서 변경 될 가능성이 가장 높지만, 본문 및 HTML 태그 에 설정된 표준 색상을 사용하면 처음에는 페이지를 더 쉽게 읽고 사용할 수 있습니다.
html, body {color : # 000; 배경 : #fff; }기본 글꼴 스타일
글꼴 크기와 글꼴 군은 일단 디자인이 보류되지만 기본 글꼴 크기가 1 em 이고 Arial, Geneva 또는 다른 sans-serif 글꼴의 기본 글꼴 군으로 시작하면 필연적으로 바뀔 것입니다. em을 사용하면 페이지가 가능한 한 액세스 가능하게 유지되고 sans-serif 글꼴은 화면에서 더 쉽게 읽을 수 있습니다.
html, body, p, th, td, li, dd, dt {font : 1em Arial, Helvetica, sans-serif; }텍스트를 찾을 수있는 다른 장소가있을 수 있지만 p , th , td , li , dd 및 dt 는 기본 글꼴을 정의하기위한 좋은 시작입니다. 경우에 따라 HTML 과 본문을 포함 시키지만 HTML이나 본문에 대한 글꼴 만 정의하면 많은 브라우저가 글꼴 선택을 무시합니다.
헤드 라인
HTML 표제는 사이트 개요를 돕고 검색 엔진이 사이트를 더 깊이 파고 드는 데 사용하는 것이 중요합니다. 스타일이 없으면 모두보기가 좋지 않으므로 모든 스타일에 기본 스타일을 설정하고 각각에 대해 글꼴 군과 글꼴 크기를 정의하십시오.
h1, h2, h3, h4, h5, h6 {font-family : Arial, Helvetica, sans-serif; } h1 {글꼴 크기 : 2em; } h2 {글꼴 크기 : 1.5em; } h3 {글꼴 크기 : 1.2em; } h4 {글꼴 크기 : 1.0em; } h5 {글꼴 크기 : 0.9em; } h6 {글꼴 크기 : 0.8em; }링크 잊어 버림
링크 색상의 스타일을 지정하는 것은 거의 대부분 디자인의 중요한 부분이지만 기본 스타일로 정의하지 않으면 의사 클래스 중 적어도 하나를 잊을 수 있습니다. 파란색의 작은 변형으로 정의한 다음 사이트의 색상 표를 정의한 후에 변경합니다.
파란색 음영으로 링크 를 설정하려면 다음을 설정하십시오.
- 파란색 링크
- 진청색으로 된 방문한 링크
- 링크 가 하늘색으로 표시됩니다.
- 더 옅은 파란색으로 활성 링크
이 예제와 같이 :
a : 링크 {색상 : # 00f; } a : 방문한 {color : # 009; } a : hover {color : # 06f; } a : 활성 {색상 : # 0cf; } 상당히 단순한 색 구성표로 링크의 스타일을 지정하면 클래스를 잊지 않고 기본 파란색, 빨간색 및 자주색보다 약간 크게 만들 수 있습니다.전체 스타일 시트
다음은 전체 스타일 시트입니다.
@charset "utf-8"; html, 본문 {margin : 0px; 패딩 : 0px; border : 0px; 색상 : # 000; 배경 : #fff; } html, body, p, th, td, li, dd, dt {font : 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family : Arial, Helvetica, sans-serif; } h1 {글꼴 크기 : 2em; } h2 {글꼴 크기 : 1.5em; } h3 {글꼴 크기 : 1.2em; } h4 {글꼴 크기 : 1.0em; } h5 {글꼴 크기 : 0.9em; } h6 {글꼴 크기 : 0.8em; } a : 링크 {색상 : # 00f; } a : 방문한 {color : # 009; } a : hover {color : # 06f; } a : 활성 {색상 : # 0cf; }