CSS 웹페이지 제작을 위한 9가지 실용적인 팁 공유
- 高洛峰원래의
- 2017-03-10 11:19:281545검색
이 기사에서는 웹사이트 재구성의 기초를 마련하기 위해 CSS 웹페이지를 만드는 9가지 실용적인 기술을 공유합니다.
1. CSS 약어를 사용하세요. 약어를 사용하면 CSS 파일의 크기를 줄이고 읽기 쉽게 만들 수 있습니다. CSS 약어의 주요 규칙은 "CSS 기본 구문"을 참조하세요.
2. 값이 0이 아닌 이상 단위를 명확하게 정의하세요. 크기 단위를 정의하는 것을 잊었습니다. CSS 초보자입니다
이 기사에서는 웹사이트 재구성의 기초를 마련하는 몇 가지 일반적인 CSS 기술을 요약합니다. 유용한 내용을 배울 수 있기를 바랍니다.
1. CSS 약어 사용
약어를 사용하면 CSS 파일 크기를 줄이고 읽기 쉽게 만들 수 있습니다. CSS 약어의 주요 규칙은 "CSS 기본 구문"을 참조하세요.
2. 값이 0이 아닌 이상 단위를 명확하게 정의하세요
크기 단위 정의를 잊어버리는 것은 CSS 초보자들이 흔히 저지르는 실수입니다. HTML에서는 ;100만 쓸 수 있지만 CSS에서는 "너비:100em"과 같이 정확한 단위를 지정해야 합니다. 단위를 정의하지 않은 상태로 둘 수 있는 예외는 두 가지뿐입니다: 줄 높이와 값 0입니다. 다른 값은 단위 뒤에 와야 합니다.
3. 대소문자 구분
XHTML에서 CSS를 사용할 때, CSS는 대소문자를 구분합니다. 이 오류를 방지하려면 모든 정의 이름을 소문자로 지정하는 것이 좋습니다.
class 및 id 값도 HTML과 XHTML에서 대소문자를 구분해야 합니다. CSS의 정의가 XHTML의 태그와 일치하는지 주의 깊게 확인하십시오.
4. 클래스 및 ID 이전의 요소 제한을 취소하십시오.
요소에 대한 클래스 또는 ID를 정의하기 위해 작성할 때 다음을 수행할 수 있습니다. ID는 페이지에서 고유하고 페이지에서 여러 번 사용될 수 있으므로 이전 요소 한정을 생략합니다. 예를 들면 다음과 같습니다.
p#content { /* 선언. . */ }
fieldset.details { /* 선언 */ }
은
#content { /* 선언 */ }
.details { /* 선언 */ }으로 작성할 수 있습니다.
이렇게 하면 일부 바이트가 절약됩니다.
5. 기본값
보통 padding의 기본값은 0이고, background-color의 기본값은 투명입니다. 그러나 기본값은 브라우저마다 다를 수 있습니다. 충돌이 두려운 경우 다음과 같이 스타일 시트 시작 부분에서 모든 요소의 여백 및 패딩 값을 0으로 정의할 수 있습니다.
* {
margin:0; 0;
6. 상속 가능한 값을 반복적으로 정의할 필요가 없습니다.
CSS에서 하위 요소는 색상, 글꼴 등 상위 요소의 속성 값 을 자동으로 상속합니다. , 상위 요소에 정의되어 있으므로 반복 정의 없이 하위 요소에 직접 상속될 수 있습니다. 그러나 브라우저가 일부 기본값으로 정의를 재정의할 수 있다는 점에 유의하세요.
7. 가장 가까운 첫 번째 원칙
동일한 요소에 대한 정의가 여러 개 있는 경우 가장 가까운(최소 수준) 정의가 우선 적용됩니다. 업데이트: Lorem ipsum dolor set
CSS 파일에서 p 요소를 정의하고 classupdate
p {
margin:1em 0
font-size:1em; >색상:#333;
}
.업데이트 {
글꼴 두께:굵게
색상:#600;
이 두 정의 중 클래스가 p보다 가깝기 때문에 class="update가 사용됩니다. 자세한 내용은 W3C의 "선택기의 특이성 계산"을 확인하세요.
8. 다중 클래스 정의
태그는 동시에 여러 클래스를 정의할 수 있습니다. 예: 먼저 두 가지 스타일을 정의합니다. 첫 번째 스타일의 배경은 #666이고 두 번째 스타일의 테두리는 10px입니다.
.one{;배경:#666;}.two{테두리:10px 단색 #F00;}
페이지 코드에서는 다음과 같이 호출할 수 있습니다.
최종 표시 효과는 p에 #666 배경과 10px 테두리가 모두 있다는 것입니다. 예, 가능합니다. 시도해 볼 수 있습니다.
9. 하위 항목 선택자를 사용하세요
CSS 초보자는 하위 항목 선택자를 사용하는 것이 효율성에 영향을 미치는 이유 중 하나라는 사실을 모릅니다. 하위 선택기를 사용하면 많은 클래스 정의를 저장할 수 있습니다. 다음 코드를 살펴보겠습니다.
이 코드의 CSS 정의는 다음과 같습니다.
p#subnav ul { /* 일부 스타일 */ }
p#subnav ul li.subnavitem { /* 일부 스타일 */ }
p#subnav ul li.subnavitem a.subnavitem { /* 일부 스타일 */ }
p#subnav ul li.subnavitemselected { /* 일부 스타일 */ }
p#subnav ul li.subnavitemselected a.subnavitemselected { /* 일부 Styling */ }
위 코드를 대체하려면 다음 방법을 사용할 수 있습니다.
스타일 정의는 다음과 같습니다.
#subnav { /* 일부 스타일 지정 */ }
#subnav li { /* 일부 스타일 지정 */ }
#subnav a { / * 일부 스타일 */ }
#subnav .sel { /* 일부 스타일 */ }
#subnav .sel a { /* 일부 스타일 */ }
코드와 CSS를 더 간결하고 읽기 쉽게 만들려면 하위 선택기를 사용하세요.
위 내용은 CSS 웹페이지 제작을 위한 9가지 실용적인 팁 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!