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