CSS에서 기본 스타일을 제거하는 방법-프런트엔드 Q&A-php.cn

CSS에서 기본 스타일을 제거하는 방법

PHPz

풀어 주다： 2023-04-21 13:46:37

원래의

1388명이 탐색했습니다.

CSS 기본 스타일 제거

웹사이트 디자인 및 개발 과정에서 브라우저에 포함된 기본 스타일을 재설정하거나 제거하는 것은 기본이지만 필요한 단계입니다. 여백, 패딩, 글꼴, 색상 등과 같은 일부 브라우저 기본 스타일은 우리 스타일과 충돌할 수 있으므로 스타일을 사용자 정의해야 합니다.

다음은 브라우저와 함께 제공되는 기본 스타일을 제거하는 몇 가지 방법입니다.

CSS Reset

CSS Reset은 CSS 파일이며, 그 기능은 모든 브라우저가 동일한 스타일을 사용하도록 기본 스타일을 재설정하는 것입니다. 일반적으로 여백, 패딩, 글꼴, 색상 등을 재설정하는 것이 포함됩니다.

reset.css

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, font, 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;
    box-sizing: border-box;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* inputs, textarea */
input[type="text"],input[type="password"], textarea {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 100%;
    vertical-align: bottom;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

input[type="checkbox"], input[type="radio"] {
    margin: 0;
    padding: 0;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: 1px solid #999;
    width: 13px;
    height: 13px;
    outline: none;
}

/* buttons */
button {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 100%;
    vertical-align: middle;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* images */
img {
    border: none;
    outline: none;
    vertical-align: middle;
}

로그인 후 복사

모든 기본 스타일을 지우려면 위와 같이 재설정하세요.

Normalize.css

Normalize.css는 CSS Reset보다 더 친숙한 스타일 라이브러리입니다. 기본 스타일을 지우지는 않지만, 모든 브라우저가 동일한 효과를 나타내도록 다양한 브라우저의 기본 스타일을 표준화합니다. 동시에 일부 요소는 기본적으로 수정해야 하며 Normalize가 이를 완료하는 데 도움이 됩니다.

다음은 Normalize를 인용한 예입니다.

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css">
</head>
<body>
  <p class="text-muted">This is paragraph text.</p>
</body>
</html>

로그인 후 복사

Customized

Customized 기본 스타일은 비즈니스 요구에 따라 브라우저 기본 스타일만 재정의합니다. 예를 들어 기본 링크의 색상은

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: red;
    text-decoration: underline;
}

로그인 후 복사

입니다. 이러한 방식으로 기본 링크 스타일을 사용자 정의할 수 있습니다.

위는 기본 스타일을 제거하기 위해 스타일을 사용자 정의하는 세 가지 방법입니다. Normalize.css를 사용하면 발생하는 대부분의 브라우저 기본 문제를 처리할 수 있고 모든 기본 스타일을 강제로 삭제하지는 않기 때문입니다. 기본 스타일을 제거하는 올바른 방법을 사용하면 웹 사이트의 탐색 환경이 더 좋아질 것입니다.

위 내용은 CSS에서 기본 스타일을 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!