실제 CSS의 일반적인 문제와 기술 요약

1. CSS 약어를 잘 활용하면 페이지 파일의 크기를 줄이고 다운로드 속도를 높이고 코드를 읽을 수 있습니다.
좋다:

div {
테두리 : 1px 고체 #ccccccc;
왼쪽 경계 : 1px 고체 #ccccccc;
국경 오른쪽 : 1px soli #ccccccc;
국경-바닥 : 1px 고체 #ccccccc;
}

다음과 같이 쓸 수 있습니다

P {국경 : 1px Solid #CCCCCCC}

Another example:

div {
마진-탑 : 10px;
마진 오른쪽 : 20px;
마진 바닥 : 30px;
마진-히프트 : 40px;
}

다음과 같이 다시 작성할 수 있습니다.

/*쓰기 순서, 오른쪽, 아래로, 왼쪽*/
div {마진 : 10px 20px 30px 40px}
/*값과 장치는 공간을 가질 수 없으며 공간은 각 값 사이의 공간으로 분리됩니다*/

(자세한 내용은 다음을 참조하십시오 : CSS2 참조 설명서, 일반적으로 사용되는 CSS 약어 요약)

2. HTML 요소의 클래스 속성에 대한 여러 규칙을 동시에 설정할 수 있습니다 (다중 클래스 정의).
보통 우리는 다음과 같이 씁니다.

실제로, 우리는 다음과 같은 p 요소에 대한 여러 규칙을 지정할 수 있습니다.

CSS :
.a {...}
.B {….}
HTML :

이 요소에는 A와 B에 설정된 스타일도 포함됩니다.

참고 : 여러 규칙 사이의 공간과 별도로 분리됩니다.

3. 값이 0이 아닌 한 단위를 명확하게하십시오
크기를 정의하는 것을 잊어 버린 것은 CSS 초보자의 일반적인 문제입니다. HTML에서 너비 = "100"을 쓸 수 있지만 CSS에는 정확한 장치가 제공되어야합니다. 예를 들어 : 너비 : 100px; 0 값의 크기는 동일합니다.

참고 : 숫자와 단위 사이에 빈 그리드를 추가하지 마십시오.

4. CSS에 의해 정의 된 요소 이름은 HTML 및 XHTML에서도 구별되므로 소문자를 사용하는 것이 좋습니다.
#AAA와 같은 #AAA는 P 및 P도 다릅니다.
#AAA가 CSS에서 정의되면 HTML 요소에서 AAA를 사용하여 적용하면 #AAA에 정의 된 스타일을 얻을 수 없습니다.
예제 코드 :

CSS :
#AAA {Border : 1PX Solid #CCC}
HTML :

1 픽셀 에지 선을 표시 할 수 없습니다

5. CSS의 최근 우선 순위 원칙 요소에서 여러 스타일을 정의하면 최신 첫 번째 레벨 첫 번째 레벨 스타일은 다른 스타일로 정의됩니다.
좋다:

CSS :
p {색상 : 빨간색}
.Blue {색상 : 파란색}
.yllow {색상 : 옐로우}
HTML :

여기에 빨간색이 표시됩니다

여기에 파란색이 표시됩니다

여기에 녹색을 보여줍니다

여기에 노란색이 있습니다

알아채다:
(1) 몇 가지 우선 순위 시퀀스의 스타일에주의를 기울입니다 (우선 순위는 위에서 아래로 감소) :
-벨레 스타일 설정
-헤드 영역 설정
-외부 참조 CSS 파일 (2) 우선 순위는 액세스 순서로 설정되지 않지만 CSS의 주문 순서가 설정됩니다.
위의 예에서 볼 수 있듯이 노란색이 표시됩니다

.yllow가 .Blue 뒤에 있기 때문에 노란색으로 표시됩니다.

6. 예를 들어 ID 및 클래스를 줄이기 위해 하위 선택기를 사용하는 정의 : 예를 들어.

#포함하다 {..}
#contain_ul {...}
.contail_li {...}

다음으로 변경할 수 있습니다.

#포함하다 {..}
#contain ul {...}
.contain ul li {...}

7. 배경을 추가하여 배경을 변경하여 배경을 변경하지 마십시오 : URL ( "xxx.gif")) 배경으로 : URL (xxx.gif).
일부 브라우저에 따옴표를 추가하면 오류가 발생할 수 있습니다.

8. 배경 그림의 경로는 현재 CSS 페이지와 관련이 있습니다.

예를 들어:
다음과 같은 디렉토리 구조 이미지입니다
-xxx.gif
-CSS
-xx.css
-Index.html
코드 내용
index.html은 xx.css 파일을 나타냅니다.
xxx.gif 이미지를 인용 할 xx.css, 쓰기 방법은 다음과 같습니다. 배경 : url (../ images/xxx.gif)

9. 그룹 선택기를 사용하여 H1, H2, H3, Div {font-size : 16px; font-weight : bold}와 같은 다른 요소에 동일한 스타일을 적용하십시오.
그런 다음 H1, H2, H3, DIV 요소의 스타일은 모두 글꼴 16 픽셀이며 글꼴은 굵은 체로

10. 올바른 링크 스타일을 작성하십시오.
순서대로 쓰지 않으면 원하는 결과를 얻지 못할 수 있습니다. 순서를 기억하기 위해, 우리는 각 단어의 첫 글자를 추출합니다. lvha, 당신은 사랑, 증오 및 두 단어를 암기하여 질서를 기억할 수 있습니다.

11. 금지 된 컨텐츠 변경 및 강제 콘텐츠 테이블 또는 레이어 변경 콘텐츠가 변경되지 않거나 일부 CSS 속성을 통해 이러한 요구 사항을 충족 할 수 있기를 바랍니다.
라인 포장은 금지되어 있습니다 : 흰색 공간 : Nowrap
강제 라인 브레이크 : Word-Wrap : Break-break;

12. 상대와 절대의 차이
절대적으로 CSS는 다음과 같습니다. 그는 절대적인 위치를 의미합니다 원래 포인트는 부모를 기반으로 원래 지점으로 표시됩니다. TRBL이 설정되고 상위 레벨이 위치 속성을 설정하지 않으면 현재 절대는 브라우저의 왼쪽 상단에 원래 지점과 함께 위치되며 위치는 TRBL에 의해 결정됩니다.

상대적으로, CSS의 글은 다음과 같습니다 상위 레벨의 패딩과 같은 현재 레벨의 현재 레벨은 부모 내용 영역의 원래 지점과 관련하여 위치합니다.

13. Div와 Span의 차이
DIV는 다른 내용을 배치하기 위해 단락, 테이블 등을 포함 할 수있는 블록 레벨 요소입니다. 일반적으로 DIV를 사용하여 웹 페이지에서 각 블록을 배치하고 찾습니다.
SPAN은 실질적인 의미가없는 내부 관련 요소입니다.

14. 디스플레이와 가시성의 차이
디스플레이 : 없음 및 가시성 : Hidden은 요소를 숨길 수 있지만 가시성을 숨길 수 있습니다.
디스플레이 : 페이지에서 상당히 제거되지 않으며 직업 위치도 삭제됩니다.