```와 같은 스타일 시트 파일 참조를 사용한 다음 스타일을 적용합니다."/> ```와 같은 스타일 시트 파일 참조를 사용한 다음 스타일을 적용합니다.">
<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
属性并将其设置为initial
。all
属性会覆盖元素上的所有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 중국어 웹사이트의 기타 관련 기사를 참조하세요!