CSS 웹페이지 제작을 위한 9가지 실용적인 팁

高洛峰
풀어 주다: 2016-11-24 14:51:31
원래의
1266명이 탐색했습니다.

이 기사에서는 웹사이트 재구성의 기초를 마련하는 몇 가지 일반적인 CSS 기술을 요약합니다. 유용한 내용을 배울 수 있기를 바랍니다.

1. CSS 약어 사용

약어를 사용하면 CSS 파일의 크기를 줄이고 읽기 쉽게 만들 수 있습니다. CSS 약어의 주요 규칙은 "CSS 기본 구문"을 참조하세요.

2. 값이 0이 아닌 이상 단위를 명확하게 정의하세요.

크기 단위를 정의하는 것을 잊어버리는 것은 CSS 초보자들이 흔히 저지르는 실수입니다. HTML에서는 ;100만 쓸 수 있지만 CSS에서는 "너비:100em"과 같이 정확한 단위를 지정해야 합니다. 단위를 정의하지 않은 상태로 둘 수 있는 예외는 두 가지뿐입니다: 줄 높이와 값 0입니다. 다른 값은 단위 뒤에 와야 합니다. 값과 단위 사이에 공백을 추가하지 않도록 주의하세요.

3. 대소문자 구분

XHTML에서 CSS를 사용할 때 요소 이름은 정의됩니다. 이 오류를 방지하려면 모든 정의 이름을 소문자로 사용하는 것이 좋습니다.

필요한 경우 HTML 및 XHTML에서도 대소문자를 구분합니다. 작성 시 CSS의 정의가 XHTML의 태그와 일치하는지 주의 깊게 확인하시기 바랍니다

4. 클래스 및 ID

이전에 요소 제한을 취소합니다. 요소에 대한 클래스를 정의하기 위해 작성할 때. 또는 ID는 페이지에서 고유하고 페이지에서 여러 번 사용될 수 있으므로 이전 요소 한정자를 생략할 수 있습니다. 예:

div.
 fieldset.details { /* 선언 */ }

 

 #content { /* 선언 */ }
 .details { /* 선언 */ }으로 작성할 수 있습니다.

  이렇게 하면 일부 바이트를 절약할 수 있습니다.

  5. 기본값

일반적으로 padding의 기본값은 0이고 background-color의 기본값은 투명합니다. 기본값은 브라우저마다 다를 수 있습니다. 충돌이 두려운 경우 다음과 같이 스타일 시트 시작 부분에서 모든 요소의 여백 및 패딩 값을 0으로 정의할 수 있습니다.

 * {
margin:0;
padding:0;
}

6. 상속 가능한 값을 반복적으로 정의할 필요가 없습니다. ​​

CSS에서는 하위 요소가 자동으로 값을 상속합니다. ​​상위 요소에 정의된 색상, 글꼴 등의 속성 값은 반복 정의 없이 하위 요소에 직접 상속될 수 있습니다. 그러나 브라우저가 정의를 재정의할 수 있다는 점에 유의하세요. 일부 기본값

7. 가장 가까운 첫 번째 원칙

동일한 요소에 대한 정의가 여러 개 있는 경우 가장 가까운(최소 수준) 정의가 우선 적용됩니다.

업데이트: Lorem ipsum dolor set

 CSS 파일에서 요소 p를 정의하고 클래스 업데이트도 정의했습니다

 p {

 margin:1em 0 ;
 font- size:1em;
color:#333;
}
.update {
font-weight:bold; 클래스는 p보다 가깝습니다. 자세한 내용은 W3C의 "선택기의 특이성 계산"을 확인하세요.

8. 다중 클래스 정의

태그는 동시에 여러 클래스를 정의할 수 있습니다. 예를 들어 두 가지 스타일을 정의해 보겠습니다. 첫째, 첫 번째 스타일의 배경은 #666이고, 두 번째 스타일의 테두리는 10픽셀입니다.

페이지 코드에서

을 다음과 같이 호출할 수 있습니다. two>

이런 식으로 최종 표시 효과는 이 div에 #666의 배경에도 10px 테두리가 있다는 것입니다. 가능합니다. 시도해 볼 수 있습니다


9. 하위 선택기 사용

하위 선택기를 사용하는 것이 효율성에 영향을 미치는 이유 중 하나라는 것을 알면 클래스 정의를 많이 절약할 수 있습니다. 다음 코드를 보세요:

 

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