<link rel="stylesheet" href="styles.css">
<div class="container"> <h1 class="title">我的网站</h1> <p class="content">欢迎来到我的网站!</p> </div>
< 스타일 클래스는 div>
와 두 개의 내부 요소인 <h1>
및 <p>
에 추가됩니다. CSS 스타일 클래스는 하나 이상의 요소에 적용할 수 있으므로 스타일 시트 디자인을 더욱 효율적으로 만들 수 있습니다. <div>
和两个内部元素<h1>
和<p>
添加了CSS样式类。CSS样式类可以应用于一个或多个元素,这使得样式表的设计变得更加高效。
<p>不过,有时候你可能需要取消某个元素上的CSS样式。一种解决方法是通过覆盖样式类的属性值来替代原来的样式。比如说,如果你不想让<h1>
元素使用样式类.title
的字体大小,你可以这样写:
h1.title { font-size: 16px; } h1 { font-size: inherit; }
.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; }
<h1 class="title cancel-all">我的网站</h1>
위 내용은 CSS 스타일을 취소하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!