HTML에서 기본 스타일을 지우는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

HTML에서 기본 스타일을 지우는 방법

PHPz

Apr 23, 2023 am 10:22 AM

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.