> 웹 프론트엔드 > 프런트엔드 Q&A > CSS 스타일을 취소하는 방법

CSS 스타일을 취소하는 방법

PHPz
풀어 주다: 2023-04-23 15:08:26
원래의
1164명이 탐색했습니다.
<p>CSS(Cascading Style Sheets)는 웹 디자인에 필수적인 기술입니다. CSS 스타일을 통해 웹페이지를 더욱 아름답고 실용적이며 읽기 쉽게 만들 수 있습니다. 그러나 때로는 요소의 CSS 스타일을 취소해야 하는 상황이 발생할 수 있습니다. 이 문서에서는 CSS 스타일을 올바르게 취소하는 방법에 대해 설명합니다.

<p>CSS 스타일을 사용할 때 일반적으로 다음과 같은 스타일시트 파일 참조를 사용합니다.

<link rel="stylesheet" href="styles.css">
로그인 후 복사
<p>그런 다음 HTML 요소에 스타일을 적용합니다.

<div class="container">
  <h1 class="title">我的网站</h1>
  <p class="content">欢迎来到我的网站!</p>
</div>
로그인 후 복사
<p>위 코드 예에서는 컨테이너 요소 < 스타일 클래스는 div>와 두 개의 내부 요소인 <h1><p>에 추가됩니다. CSS 스타일 클래스는 하나 이상의 요소에 적용할 수 있으므로 스타일 시트 디자인을 더욱 효율적으로 만들 수 있습니다. <div>和两个内部元素<h1><p>添加了CSS样式类。CSS样式类可以应用于一个或多个元素,这使得样式表的设计变得更加高效。

<p>不过,有时候你可能需要取消某个元素上的CSS样式。一种解决方法是通过覆盖样式类的属性值来替代原来的样式。比如说,如果你不想让<h1>元素使用样式类.title的字体大小,你可以这样写:

h1.title {
  font-size: 16px;
}

h1 {
  font-size: inherit;
}
로그인 후 복사
<p>在上面的例子中,我们首先定义了.title类样式下的字体大小为16个像素。但是,通过在下面的代码中覆盖h1元素的样式,我们可以将字体大小设置为父元素(容器元素)的默认字体大小,inherit是CSS属性值的一个关键字,它允许元素继承其父元素的样式。

<p>然而,使用CSS继承属性的方式不能保证在所有浏览器、操作系统和设备上的一致性,特别是在移动设备浏览器上。

<p>另外一种解决方法是使用all属性并将其设置为initialall属性会覆盖元素上的所有CSS样式,而initial

그러나 때로는 요소의 CSS 스타일을 취소해야 할 수도 있습니다. 한 가지 해결책은 스타일 클래스의 속성 값을 재정의하여 원래 스타일을 바꾸는 것입니다. 예를 들어, <h1> 요소가 스타일 클래스 .title의 글꼴 크기를 사용하지 않도록 하려면 다음과 같이 작성할 수 있습니다. <p>

h1 {
  all: initial;
}
로그인 후 복사
위의 예에서는 먼저 .title 클래스 스타일 아래의 글꼴 크기가 16픽셀로 정의되어 있습니다. 그러나 아래 코드에서 h1 요소의 스타일을 재정의하면 글꼴 크기를 상위 요소(컨테이너 요소), inherit의 기본 글꼴 크기로 설정할 수 있습니다. CSS 속성입니다. 요소가 상위 요소의 스타일을 상속하도록 허용하는 키워드입니다. <p>

그러나 CSS 상속 속성을 사용하는 방식은 모든 브라우저, 운영 체제 및 장치, 특히 모바일 장치 브라우저에서 일관성을 보장할 수 없습니다. <p>

또 다른 해결책은 all 속성을 ​​사용하고 이를 initial로 설정하는 것입니다. all 속성은 요소의 모든 CSS 스타일을 재정의하는 반면, initial 값은 모든 스타일을 기본값으로 설정합니다. 이 방법은 가장 간단하지만 요소의 인라인 스타일을 지우지 않는 등의 부작용이 있을 수 있습니다. <p>

.cancel-all {
  all: initial;
}
로그인 후 복사
여러 요소에서 CSS 스타일을 억제하려면 해당 요소를 별도의 CSS 클래스로 이동하고 필요에 따라 클래스를 추가하거나 제거할 수 있습니다. 🎜
<h1 class="title cancel-all">我的网站</h1>
로그인 후 복사
🎜그런 다음 억제해야 하는 요소에 클래스를 추가하세요.🎜 rrreee🎜CSS 스타일을 취소하는 방법은 다양하기 때문에 특정 상황에서 어떤 방법을 사용해야 할지 신중하게 선택해야 합니다. 실제로 우리는 코드가 최상의 성능 및 가독성 표준을 충족하도록 몇 가지 모범 사례를 채택해야 합니다. 🎜🎜요약하자면, CSS 스타일 취소는 스타일 클래스의 속성 값을 재정의하거나 모든 CSS 스타일을 기본값으로 재설정하여 취소할 수 있습니다. 스타일을 지정하지 않아야 하는 요소를 별도의 CSS 클래스에 추가하면 필요할 때 클래스를 쉽게 추가하거나 제거할 수 있습니다. 마지막으로, CSS 스타일을 해제하는 방법에 주의해야 하며 코드의 성능과 가독성을 보장하기 위해 몇 가지 모범 사례를 채택해야 합니다. 🎜

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿