1. CSS 약어를 잘 활용하면 페이지 파일 크기를 줄이고, 다운로드 속도를 높이며, 코드를 간결하고 읽기 쉽게 만들 수 있습니다.
좋다:
div{
테두리 상단:1px 솔리드 #cccccc;
테두리 왼쪽:1px 단색 #cccccc;
테두리 오른쪽:1px soli #cccccc;
테두리 하단:1px 솔리드 #cccccc;
}는
다음과 같이 쓸 수 있습니다.
p{border:1px solid #cccccc}
또 다른 예:
div{
여백 상단:10px;
오른쪽 여백:20px;
여백 하단:30px;
여백-왼쪽:40px;
}는
다음과 같이 다시 작성할 수 있습니다.
/*위, 오른쪽, 아래, 왼쪽의 쓰기 순서에 주의하세요*/
div{마진:10px 20px 30px 40px}
/*값과 단위는 공백을 가질 수 없으며 각 값은 공백으로 구분됩니다*/
(자세한 내용은 CSS2 참조 매뉴얼, 일반적인 CSS 약어 요약을 참조하세요)
2. 여러 클래스 속성을 설정할 수 있습니다 동시에 html 요소가 규칙을 따릅니다(다중 클래스 정의).
보통 우리는 다음과 같이 씁니다.
실제로 p 요소에 대해 다음과 같은 여러 규칙을 지정할 수 있습니다.
CSS:
.에이{…}
.비{….}
HTML:
이 요소에는 a와 b 모두에 설정된 스타일이 포함되어 있습니다.
참고: 여러 규칙은 공백으로 구분하세요.
3. 값이 0이 아닌 이상 단위를 명확하게 정의하세요.
차원 정의를 잊어버리는 것은 초보 CSS 초보자 사이에서 흔히 발생하는 문제입니다. html에서는 width="100"이라고 쓸 수 있지만 CSS에서는 정확한 단위를 지정해야 합니다. 예: width:100px;height:50px;font-size:9pt, 0 값은 제외됩니다. 왜냐하면 어떤 단위에도 중요하지 않기 때문입니다. 0 값은 크기가 모두 동일합니다.
참고: 값과 단위 사이에 공백을 추가하지 마십시오.
4. 대소문자 구분 xhtml에서는 css에서 정의한 요소 이름이 html과 xhtml에서도 대소문자를 구분하므로, 항상 소문자를 사용하는 것이 좋습니다.
예를 들어, #aaa는 #AAA와 다릅니다. xhtml에서는 p와 P도 덮어쓰지 않습니다.
#aaa가 CSS에 정의된 경우 AAA를 사용하여 html 요소에 적용하면 #aaa에 정의된 스타일이 적용되지 않습니다.
샘플 코드:
CSS:
#aaa{테두리:1px 단색 #ccc}
HTML:
1픽셀 가장자리를 표시할 수 없습니다
. 5. CSS의 가장 최근 우선순위 원칙. 요소에 대해 여러 스타일이 정의된 경우 가장 최근 수준이 우선 적용되며 가장 최근 스타일이 다른 스타일 정의보다 우선 적용됩니다.
좋다:
CSS:
p{색상:빨간색}
.blue{색상:파란색}
.노란색{색상:노란색}
HTML:
여기에 빨간색으로 표시됨
여기 파란색으로 표시됨
여기에는 녹색으로 표시됩니다.
여기 노란색으로 표시됨
알아채다:
(1) 스타일의 여러 우선순위에 주의를 기울이십시오(우선순위는 위에서 아래로 감소합니다).
--요소 스타일 설정
--머리 부분의 설정
--외부 참조 CSS 파일 (2) 우선순위는 접근 순서가 아닌 CSS 선언 순서에 따라 결정됩니다.
CSS 정의에서 .yellow가 .blue 뒤에 있기 때문에
여기서는 노란색으로 표시됩니다
.6. 하위 선택기를 사용하여 ID 및 클래스 정의를 줄입니다. 예:
#포함하다{..}
#contain_ul{...}
.contail_li{...}는
다음과 같이 변경할 수 있습니다.
#포함하다{..}
#컨테이너{...}
.contain ul li{...}
7. 배경 이미지 경로에 따옴표를 추가하지 말고 background:url("xxx.gif")를 background:url(xxx.gif)로 변경합니다.
따옴표를 추가하면 일부 브라우저에서 오류가 발생할 수 있기 때문입니다.
8. 배경 이미지의 경로는 현재 CSS 페이지의 경로를 기준으로 합니다.
예를 들어:
다음과 같은 디렉토리 구조가 있습니다.
--xxx.gif
--css
--xx.css
--index.html
코드 내용
index.html은 xx.css 파일을 참조합니다.
xx.css는 xxx.gif 이미지를 참조해야 하며 작성 방법은 다음과 같습니다: background:url(../images/xxx.gif)
9. 그룹 선택기를 사용하여 h1, h2, h3와 같은 다른 요소에 동일한 스타일을 적용합니다. , div{font- 크기:16px;font-weight:bold}
그러면 h1, h2, h3 및 div 요소의 스타일은 모두 16픽셀이고 굵은 글꼴입니다.
10. CSS를 사용하여 다양한 링크 상태를 정의할 때 쓰기 순서에 주의해야 합니다. 상태: :link: 방문 :hover :활성.
이 순서대로 쓰지 않으면 원하는 효과를 얻지 못할 수도 있습니다. 순서를 기억하기 위해 각 단어의 첫 글자인 LVHA를 추출합니다. LoVe와 Hate 두 단어를 기억하면 순서를 기억할 수 있습니다.
11. 콘텐츠 래핑을 금지하고 콘텐츠를 강제로 래핑하는 것을 테이블이나 레이어에서 일부 CSS 속성을 통해 콘텐츠가 래핑되지 않거나 강제로 래핑되도록 할 수 있습니다.
줄바꿈 비활성화: white-space:nowrap
강제 줄 바꿈: word-wrap: break-word; word-break: 일반
12. 상대와 절대의 차이
;
Absolute, CSS의 작성 방법은 다음과 같습니다. position:absolute; 브라우저의 왼쪽 상단을 의미하며 TOP, RIGHT, BOTTOM, LEFT(이하 TRBL)와 협력하여 위치를 지정합니다. TRBL은 설정되어 있지 않으며, 기본적으로 원점은 부모의 원점입니다. TRBL이 설정되고 상위 항목이 위치 속성을 설정하지 않은 경우 현재 절대값은 브라우저의 왼쪽 상단을 원래 지점으로 사용하여 위치가 지정되고 위치는 TRBL에 의해 결정됩니다.
Relative, CSS의 작성 방법은 다음과 같습니다. 절대 상대 위치 지정을 의미합니다. 상위 항목이 없으면 BODY의 원래 위치를 원래 위치로 사용합니다. , TRBL로 위치 지정됩니다. 상위 항목에 padding 등의 CSS 속성이 있는 경우 현재 레벨의 원본 지점은 상위 콘텐츠 영역의 원본 지점을 기준으로 배치됩니다.
13. div와 범위를 구별하세요
div는 단락, 표 등을 포함할 수 있는 블록 수준 요소이며, 다양한 콘텐츠를 배치하는 데 사용됩니다. 일반적으로 우리는 div를 사용하여 웹 페이지의 각 블록을 레이아웃하고 배치합니다.
스팬은 실질적인 의미가 없는 인라인 요소입니다. 컨텐츠에 마크업을 추가하면 스팬에 스타일을 정의하여 컨텐츠의 스타일을 설정할 수 있습니다.
14. 디스플레이와 가시성의 구별
display:none과 visible:hidden은 모두 요소를 숨길 수 있지만 visible:hidden은 요소의 내용만 숨기지만 사용된 위치 공간은 그대로 유지됩니다.
Display:none은 페이지에서 요소를 제거하는 것과 동일하며 해당 요소가 차지하는 위치도 삭제됩니다.