이 도움말을 통해 사실을 확인하십시오.
모든 웹 브라우저에는 "부적절한 스타일"이 포함되어 있습니다. 이들은 다른 스타일 정보가없는 HTML 요소의 모양과 느낌을 지시하는 스타일입니다. 예를 들어, 거의 모든 브라우저에서 하이퍼 링크의 기본 모양은 밑줄이있는 밝은 파랑 색입니다. 다른 방법으로 표시하도록 지시하지 않는 한 이러한 링크가 보이는 방식입니다.
기본 브라우저 스타일이 도움이 될 수 있지만 대부분의 경우 웹 디자이너는이 스타일을 제거하여 100 % 제어 할 수있는 스타일로 새로 시작할 수 있습니다. 이것은 "마스터 스타일 시트"로 알려진 것을 사용하여 수행됩니다.
마스터 스타일 시트는 모든 문서에서 호출하는 첫 번째 스타일 시트 여야합니다. 마스터 스타일 시트를 사용하여 브라우저 간 웹 디자인에 문제를 일으킬 수있는 기본 브라우저 설정을 지우십시오. 일단 마스터 스타일 시트를 사용하여 스타일을 지우면 깨끗한 캔버스와 같은 모든 브라우저에서 동일한 위치에서 디자인이 시작됩니다.
글로벌 기본값
마스터 스타일 시트는 페이지 의 여백, 여백 및 테두리 를 제로로 시작해야합니다. 일부 웹 브라우저는 문서의 본문을 브라우저 창 가장자리에서 들여 쓰기 한 1 또는 2 픽셀로 기본 설정합니다. 이렇게하면 모두 동일하게 표시됩니다.
html, 본문 {margin : 0px; 패딩 : 0px; border : 0px; }또한 글꼴의 일관성을 유지하려고합니다. 페이지를 액세스 할 수 있지만 크기가 여전히 일관되도록 글꼴 크기를 100 % 또는 1em으로 설정하십시오. 그리고 선 높이를 포함시켜야합니다.
body {font : 1em / 1.25 Arial, Helvetica, sans-serif; }광고 제목 형식
헤드 라인 또는 헤더 태그 (H1, H2, H3 등)는 일반적으로 굵은 텍스트로 기본 설정되어 큰 여백 또는 그 주위에 패딩이 있습니다. 가중치, 여백 및 여백을 지우면 추가 스타일을 사용하지 않고 태그가 주변 텍스트보다 여전히 크거나 작게 유지되도록 할 수 있습니다.
h1, h2, h3, h4, h5, h6 {margin : 0; 패딩 : 0; font-weight : normal; font-family : Arial, Helvetica, sans-serif; }특정 크기, 글자 간격 및 패딩을 헤드 라인 태그에 설정하는 것을 고려해 볼 수도 있지만 실제로 디자인하는 사이트의 스타일에 따라 다르므로 마스터 스타일 시트에서 제외해야합니다. 특정 디자인에 필요한만큼이 제목에 스타일을 추가 할 수 있습니다.
일반 텍스트 서식 지정
헤드 라인을 넘어, 분명히해야 할 다른 텍스트 태그가 있습니다. 사람들이 자주 잊는 한 세트는 표 셀 태그 (TH 및 TD)와 양식 태그 (SELECT, TEXTAREA 및 INPUT)입니다. 몸과 단락 텍스트와 같은 크기로 설정하지 않으면 브라우저가 렌더링하는 방법에 불쾌감을 느낄 수 있습니다.
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {여백 : 0; 패딩 : 0; 글꼴 : normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; }또한 견적 (BLOCKQUOTE 및 Q), 두문자어 및 축약어에 약간의 스타일을 추가하여 조금 더 눈에 띄게 만들면 좋습니다.
blockquote {margin : 1.25em; 패딩 : 1.25em} q {글꼴 스타일 : 기울임 꼴; } 약자, abbr {커서 : 도움말; border-bottom : 1px 파선; }링크 및 이미지
링크는 위에서 언급 한 밝은 파란색 밑줄 텍스트에서 쉽게 관리하고 변경할 수 있습니다. 항상 링크에 밑줄을 긋고 싶지만 다른 방법을 선호한다면이 옵션을 별도로 설정할 수 있습니다. 마스터 스타일 시트에는 디자인에 따라 색상이 포함되어 있지 않습니다.
a, a : 링크, a : 방문됨, a : 활성, a : hover {텍스트 장식 : 밑줄; }이미지를 사용하면 테두리를 해제하는 것이 중요합니다. 대부분의 브라우저는 일반 이미지 주위에 테두리를 표시하지 않지만 이미지가 링크되면 브라우저가 테두리를 켭니다. 이 문제를 해결하려면 다음을 수행하십시오.
img {border : none; }테이블
표는 레이아웃 용도로 더 이상 사용되지 않지만 실제 탭 루 데이터에 대해서는 표에서 계속 사용할 수 있습니다. 이것은 HTML 테이블을 잘 사용합니다. 이미 기본 텍스트 크기가 표 셀에 대해 동일하게 설정되어 있지만 표가 동일하게 유지되도록 설정해야하는 몇 가지 스타일이 있습니다.
표 {margin : 0; 패딩 : 0; 국경 : 없음; }양식
다른 요소와 마찬가지로 양식 주위의 여백과 여백을 지워야합니다. 내가하고 싶은 또 다른 일은 양식 태그를 " 인라인 "으로 다시 작성하여 코드에 태그를 넣을 공간을 추가하지 않도록하는 것입니다. 다른 텍스트 요소와 마찬가지로, 필자는 select, textarea 및 입력에 대한 글꼴 정보를 정의하여 나머지 텍스트와 동일하게 만듭니다.
form {margin : 0; 패딩 : 0; 디스플레이 : 인라인; }라벨의 커서를 변경하는 것도 좋은 생각입니다. 이렇게하면 사람들이 레이블을 클릭 할 때 무언가를 할 수 있음을 알 수 있습니다.
label {커서 : 포인터; }공통 수업
마스터 스타일 시트의이 부분에 대해서는 이해할 수있는 클래스 를 정의해야합니다. 이것들은 제가 가장 자주 사용하는 수업들입니다. 요소는 특정 요소로 설정되지 않으므로 필요에 따라 요소를 지정할 수 있습니다.
.clear {clear : 둘 다; }. floatLeft {부동 : 왼쪽; }. floatRight {float : right; } .textLeft {텍스트 정렬 : 왼쪽; }. 텍스트 행 정렬 {text-align : right; } .textCenter {text-align : center; } .textJustify {text-align : justify; } .blockCenter {display : 블록; margin-left : 자동; margin-right : 자동; } / * 너비를 설정하는 것을 잊지 마라 * / .bold {font-weight : bold; } .italic {글꼴 스타일 : 기울임 꼴; } .underline {text-decoration : 밑줄; } .noindent {margin-left : 0; 패딩 왼쪽 : 0; } .nomargin {margin : 0; } .nopadding {패딩 : 0; } .nobullet {list-style : none; list-style-image : 없음; }이 클래스는 다른 스타일보다 먼저 작성되었으며 클래스 일 뿐이므로 나중에 계단식 에서 나중에 발생하는보다 구체적인 스타일 속성으로 쉽게 재정의 할 수 있습니다. 한 요소에 공통 클래스를 설정 했는데도 영향을 미치지 않는다면 나중에 같은 스타일 시트에 다른 요소에 영향을주는 다른 스타일이 없는지 확인해야합니다.
전체 마스터 스타일 시트
/ * 글로벌 기본값 * / html, body {margin : 0px; 패딩 : 0px; border : 0px; } body {font : 1em / 1.25 Arial, Helvetica, sans-serif; } / * Headlines * / h1, h2, h3, h4, h5, h6 {margin : 0; 패딩 : 0; font-weight : normal; font-family : Arial, Helvetica, sans-serif; } / * 텍스트 스타일 * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin : 0; 패딩 : 0; 글꼴 : normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {여백 : 1.25em; 패딩 : 1.25em} q {글꼴 스타일 : 기울임 꼴; } 약자, abbr {커서 : 도움말; border-bottom : 1px 파선; } 작은 {글꼴 크기 : .85em; } big {font-size : 1.2em; } / * 링크 및 이미지 * / a, a : 링크, a : 방문, a : 활성, a : hover {텍스트 장식 : 밑줄; } img {border : none; } / * Tables * / table {margin : 0; 패딩 : 0; 국경 : 없음; } / * 양식 * / 양식 {여백 : 0; 패딩 : 0; 디스플레이 : 인라인; } label {커서 : 포인터; } / * 공통 클래스 * / .clear {clear : both; }. floatLeft {부동 : 왼쪽; }. floatRight {float : right; } .textLeft {텍스트 정렬 : 왼쪽; }. 텍스트 행 정렬 {text-align : right; } .textCenter {text-align : center; } .textJustify {text-align : justify; } .blockCenter {display : 블록; margin-left : 자동; margin-right : 자동; } / * 너비를 설정하는 것을 잊지 마라 * / .bold {font-weight : bold; } .italic {글꼴 스타일 : 기울임 꼴; } .underline {text-decoration : 밑줄; } .noindent {margin-left : 0; 패딩 왼쪽 : 0; } .nomargin {margin : 0; } .nopadding {패딩 : 0; } .nobullet {list-style : none; list-style-image : 없음; }Jennifer Krynin의 원본 기사입니다. Jeremy Girard에 의해 10/6/17에 편집 됨