CSS 상속 스타일을 지우는 방법-프런트엔드 Q&A-php.cn

웹 개발에서는 CSS 상속 및 스타일 정리 사용이 불가피합니다. CSS를 사용하면 상속을 통해 특정 속성 값을 다른 요소에 상속할 수 있으므로 코드 양과 유지 관리 비용이 줄어듭니다. 그러나 때로는 더 나은 스타일 효과를 얻기 위해 상속을 취소해야 합니다.

1. CSS 상속
1.1 상속 규칙
CSS에서는 일부 속성 값이 상속 가능하며 이러한 속성 값은 하위 요소에 상속될 수 있습니다. 이러한 속성 값에는 글꼴, 색상, 텍스트 정렬 등이 포함됩니다. 하위 요소가 해당 속성 값을 정의하지 않으면 상위 요소로부터 속성 값을 상속합니다. 예:

body {
    font-family: Arial, sans-serif;
    color: #333;
}

h1 {
    font-size: 2rem;
}

로그인 후 복사

위의 예에서 h1 요소는 body의 font-family 및 color를 상속합니다. 코드> 요소> 속성 값. h1 요소는 이러한 속성 값을 정의하지 않으므로 상위 요소에서 상속됩니다. h1元素继承了body元素的font-family和color属性值。因为h1元素没有定义这些属性值，所以会从其上层元素继承。

1.2 避免滥用继承
尽管 CSS 继承可以节省代码、减少维护成本，但是滥用继承可能会导致不必要的样式继承，甚至造成不良影响。在使用继承时，需要注意以下几点：

1.2.1 不要将非通用属性设置为继承属性
在 CSS 中，有些属性值不具有继承性，如background-image、width、height等。这些属性值设置为继承属性无效，不会被子元素所继承。

1.2.2 不要将样式表结构过于复杂
如果样式表的结构过于复杂，可能会导致继承链条过长，增加了代码的不必要复杂性。在编写样式表时，应注意保持简洁明了的结构，尽量避免冗余。例如：

/* 不推荐 */
.wrapper > .box > .title {
    font-size: 1.2rem;
}
.wrapper > .box > .content {
    font-size: 1rem;
}

/* 推荐 */
.title {
    font-size: 1.2rem;
}
.content {
    font-size: 1rem;
}

로그인 후 복사

1.2.3 不要定义过多的继承属性
仅将必要的属性设置为继承属性，如果定义过多的继承属性会让代码难以维护、布局难以理解。在定义 CSS 属性时，需要考虑使用灵活、简单的样式。

1.3 使用继承
虽然滥用继承会导致不必要的样式继承，但是当使用得当时，CSS 继承还是非常有用的。以下是一些情况下可以使用继承：

1.3.1 统一字体属性
可以将字体属性设置在body元素上，然后通过继承使整个页面的字体风格保持一致：

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

로그인 후 복사

1.3.2 统一颜色属性
颜色是很重要的一个属性，可以通过继承来使整个页面的颜色保持一致。例如：

body {
    color: #333;
}

h1, h2, h3 {
    color: inherit; /* 继承父元素的颜色 */
}

로그인 후 복사

1.3.3 统一文本对齐方式
通过将text-align属性设置在一个共同的父元素上，可以使子元素遵循统一的文本对齐方式。例如：

body {
    text-align: center;
}

h1, h2, h3 {
    text-align: left; /* 继承父元素的文本对齐方式 */
}

로그인 후 복사

二、样式清除
在 CSS 中，有时候我们需要清除掉某些元素的默认样式，或取消已经设置好的样式。以下是一些可用于样式清除的方法：

2.1 重置样式表
可以使用重置样式表来清除默认样式，将所有元素的默认样式重置为基础样式。以下是 Eric Meyer's Reset CSS（ https://meyerweb.com/eric/tools/css/reset/ ）的代码：

/* 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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

로그인 후 복사

将上述代码插入到 CSS 样式表的开头，即可重置所有元素的默认样式。

2.2 使用 unset 进行清除
在 CSS3 中，有一种新的属性值unset。unset可以清除某个属性设置的继承效果，使元素重新获得该属性的默认值。例如：

a {
    color: inherit;
    text-decoration: none;
    outline: none;
    background-color: unset; /* 取消已经设置好的颜色 */
}

로그인 후 복사

2.3 使用 none 进行清除
当需要取消某个元素样式时，可以使用none值，例如：

input[type="checkbox"] {
    -webkit-appearance: none; /* 取消浏览器默认外观 */
    appearance: none;
}

로그인 후 복사

2.4 使用 !important 进行清除
!important是一种以最高优先级覆盖所有优先级的方式，可以覆盖继承的样式或设置了相同优先级的样式。例如：

p {
    color: #333 !important; /* 覆盖其它可能已经设定的颜色值 */
}

로그인 후 복사

2.5 使用 inherit 覆盖样式
使用inherit

1.2 상속 남용 방지

CSS 상속은 코드를 절약하고 유지 관리 비용을 줄일 수 있지만 상속을 남용하면 불필요한 스타일 상속이 발생하고 심지어 부작용이 발생할 수도 있습니다. 상속을 사용할 때 다음 사항에 주의해야 합니다.

1.2.1 비범용 속성을 상속된 속성으로 설정하지 마세요. 🎜CSS에서 background-image와 같은 일부 속성 값은 상속되지 않습니다. , 너비, 높이 등 이러한 속성 값은 상속된 속성으로 설정되면 유효하지 않으며 하위 요소에 상속되지 않습니다. 🎜🎜1.2.2 스타일 시트 구조를 너무 복잡하게 만들지 마세요🎜 스타일 시트 구조가 너무 복잡하면 상속 체인이 너무 길어져 코드에 불필요한 복잡성이 추가될 수 있습니다. 스타일 시트를 작성할 때 간결하고 명확한 구조를 유지하고 중복을 피하도록 주의해야 합니다. 예: 🎜

h1 {
    font-size: 2rem;
}

h2 {
    font-size: inherit; /* 继承 h1 的 font-size 属性 */
}

로그인 후 복사

🎜1.2.3 상속된 속성을 너무 많이 정의하지 마세요.🎜 필요한 속성만 상속된 속성으로 설정하세요. 상속된 속성을 너무 많이 정의하면 코드를 유지 관리하기 어렵고 레이아웃을 이해하기 어려워집니다. CSS 속성을 정의할 때 유연하고 간단한 스타일을 사용하는 것을 고려하세요. 🎜🎜1.3 상속 사용🎜상속을 잘못 사용하면 불필요한 스타일 상속이 발생할 수 있지만 CSS 상속은 적절하게 사용하면 여전히 매우 유용합니다. 다음은 상속을 사용할 수 있는 몇 가지 상황입니다. 🎜🎜1.3.1 글꼴 속성 통합🎜 body 요소에 글꼴 속성을 설정한 다음 다음을 통해 전체 페이지의 글꼴 스타일을 일관되게 만들 수 있습니다. 상속: 🎜rrreee🎜 1.3.2 색상 속성 통합🎜 색상은 전체 페이지의 색상을 일관되게 만들기 위해 상속될 수 있는 매우 중요한 속성입니다. 예: 🎜rrreee🎜1.3.3 통합 텍스트 정렬🎜공통 상위 요소에 text-align 속성을 설정하면 하위 요소가 통합 텍스트 정렬을 따르도록 할 수 있습니다. 예: 🎜rrreee🎜 2. 스타일 지우기🎜CSS에서는 때때로 특정 요소의 기본 스타일을 지우거나 설정된 스타일을 취소해야 할 때가 있습니다. 스타일 지우기에 사용할 수 있는 몇 가지 방법은 다음과 같습니다. 🎜🎜2.1 스타일 시트 재설정🎜 스타일 시트 재설정을 사용하면 기본 스타일을 지우고 모든 요소의 기본 스타일을 기본 스타일로 재설정할 수 있습니다. 다음은 Eric Meyer의 CSS 재설정(https://meyerweb.com/eric/tools/css/reset/)의 코드입니다. 🎜rrreee🎜 모든 요소의 기본 스타일을 재설정하려면 CSS 스타일시트 시작 부분에 위 코드를 삽입하세요. . 🎜🎜2.2 삭제하려면 unset을 사용하세요. 🎜CSS3에는 새로운 속성 값 unset이 있습니다. unset은 특정 속성 설정의 상속 효과를 제거하여 요소가 속성의 기본값을 다시 얻도록 할 수 있습니다. 예: 🎜rrreee🎜2.3 지우려면 none 사용 🎜요소의 스타일을 취소해야 하는 경우 none 값을 사용할 수 있습니다. 예: 🎜rrreee🎜 2.4 !important를 사용하여 지우기 🎜!important는 모든 우선순위를 가장 높은 우선순위로 재정의하는 방법으로, 상속된 스타일이나 동일한 우선순위가 설정된 스타일을 재정의할 수 있습니다. 예: 🎜rrreee🎜2.5 inherit를 사용하여 스타일을 재정의합니다. 🎜inherit 속성을 사용하여 상위 요소의 값을 상속하도록 속성 값을 설정하여 스타일을 재정의합니다. 현재 요소. 예: 🎜rrreee🎜결론🎜 CSS 개발에서 상속과 스타일 삭제는 비교적 일반적인 기술입니다. 올바르게 사용하면 코드의 유지 관리성과 효율성이 향상됩니다. 그러나 이러한 기술을 과도하게 남용하면 코드를 유지 관리하고 이해하기가 어려워지고 불필요한 오류가 발생할 수도 있습니다. 개발자는 상속과 정리의 장단점을 따져보고, 이러한 기술을 최대한 활용하고, 불필요한 복잡성을 피해야 합니다. 🎜

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