HTML에서 기본 스타일을 지우는 방법
- PHPz원래의
- 2023-04-23 10:22:493725검색
HTML은 웹 페이지를 만드는 데 사용되는 마크업 언어입니다. HTML에서는 요소마다 기본 스타일이 다르며 이는 브라우저에서 자동으로 적용됩니다. 때로는 페이지를 더 유연하고 사용자 정의할 수 있도록 만들기 위해 이러한 기본 스타일을 지워야 할 때도 있습니다.
기본 스타일을 지워야 하는 이유는 무엇인가요?
기본 스타일은 웹 페이지에 대한 자체 스타일을 디자인하는 데 방해가 될 수 있습니다. 예를 들어, 웹 페이지의 제목과 본문에는 기본 글꼴과 줄 간격이 있습니다. 이러한 스타일을 지우지 않으면 글꼴과 줄 간격을 자유롭게 선택하고 설정할 수 없습니다. 기본 스타일로 인해 브라우저 간에 차이가 발생하여 웹 페이지가 여러 브라우저에서 일관되지 않게 표시될 수도 있습니다. 따라서 기본 스타일을 지우면 웹 페이지를 더욱 일관되고 제어 가능하게 만들 수 있습니다.
방법 1: Reset.css 파일 사용
Reset CSS 파일은 모든 HTML 요소에 대한 스타일 재설정을 포함하는 미리 작성된 스타일 시트입니다. 기본 스타일을 지우려면 HTML 파일에 이를 도입하기만 하면 됩니다.
다음은 간단한 Reset.css 파일입니다.
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
이 파일은 모든 요소의 여백, 안쪽 여백, 테두리, 글꼴 크기 및 수직 정렬을 기본값으로 재설정합니다.
HTML 파일의 헤드에 다음 코드를 추가하고 프로젝트 폴더의 CSS 폴더에 Reset.css 파일을 저장하면 됩니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Website</title> <link rel="stylesheet" href="css/reset.css"> </head> <body> <!-- 页面内容 --> </body> </html>
방법 2: 선택기 사용
원치 않는 경우 스타일을 재설정하는 파일을 도입하고 선택기를 사용하여 기본 스타일을 지울 수도 있습니다.
다음은 일반적으로 사용되는 선택기입니다.
/* 清除所有元素的边距和内边距 */
* {
margin: 0;
padding: 0;
}
/* 清除所有元素的默认样式 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* 清除链接默认样式 */
a {
text-decoration: none;
color: inherit;
}
/* 清除列表默认样式 */
ul, ol {
list-style: none;
}
/* 清除图片默认边框 */
img {
border: none;
}
/* 清除表格默认边框 */
table {
border-collapse: collapse;
border-spacing: 0;
}
위 선택기를 CSS 파일에 추가하기만 하면 됩니다.
요약
기본 스타일을 지우는 것은 웹페이지 제작에 있어서 중요한 단계 중 하나입니다. Reset.css 파일이나 선택기를 사용하면 기본 스타일을 빠르고 효율적으로 지울 수 있어 페이지를 더욱 유연하고 사용자 정의할 수 있습니다.
위 내용은 HTML에서 기본 스타일을 지우는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!