>  기사  >  웹 프론트엔드  >  CSS 전체 레이아웃 선언 사용에 대한 몇 가지 팁_경험 교환

CSS 전체 레이아웃 선언 사용에 대한 몇 가지 팁_경험 교환

PHP中文网
PHP中文网원래의
2016-05-16 12:07:151376검색

좋은 코딩 습관을 길러야 합니다. CSS 전체 레이아웃 선언은 코드를 단순화하고 운영 효율성을 향상시키는 방법을 제공합니다. 더 일반적으로 사용되는 양식을 나열하고 설명을 추가합니다. 전체 레이아웃 선언의 기능은 목표를 전체적으로 요약하고 일부 동일하거나 기본적으로 동일한 속성 및 값을 선언하여 후속 코드의 각 태그에서 별도로 정의할 필요가 없도록 하는 것입니다. 다른 속성과 값이 있는 경우 나중에 다시 정의할 수 있습니다.

1. 와일드카드 전체 레이아웃 설명입니다.

* { 
margin:0; 
padding:0; 
font-size:0.8em; 
... 
}

이 유형의 설명은 전체 페이지에 적용됩니다. 페이지 요소에 공통적인 속성을 설정할 수 있습니다. 각 요소를 개별적으로 선언할 필요가 없습니다. 위 코드에서는 여백과 패딩을 0으로 선언하고 글꼴 크기를 0.8em으로 선언했습니다. 선언된 속성과 값은 페이지의 모든 요소에 적용됩니다. 이후 코드에서 margin, padding,font-size 값을 다시 정의하지 않는 이상 이 정의에 따라 표시됩니다.

2. 태그된 전체 설명

body { 
background:#fff; 
font-family: Courier, "Courier New", monospace; 
} 
或 
p { 
background:#fff; 
font-family: Courier, "Courier New", monospace; 
}

이 유형의 설명은 특정 xhtml 태그에 사용됩니다. 특별한 정의가 없으면 이 설명이 적용됩니다. 본문의 배경색과 글꼴을 정의합니다. 따라서 다시 정의하지 않는 이상 본문 내의 모든 요소는 이를 적용합니다. 단락 p의 정의 원칙은 동일합니다.

3. 그룹 전체 선언문


h1,h2,h3 {color:#00f; font-weight:100;}

이 유형의 선언문은 h1, h2, h3의 텍스트 색상과 굵은 글꼴을 나타냅니다. 실제 작업에서는 반드시 그런 것은 아닙니다. 클래스 또는 ID의 일부 xhtml 요소가 동일한 속성을 가질 수 있으며 코딩을 위해 모두 그룹화할 수 있습니다. 일부 차이점은 개별적으로 재정의될 수 있습니다. 예를 들어 http://www.52css.com/article.asp?id=392 작은 아이콘이 포함된 새로운 CSS 양식 디자인의 예입니다. 우리는 이러한 유형의 선언을 사용합니다.
 

위 내용은 CSS 전체 레이아웃 설명문_체험교류 내용의 일부입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.