이 글은 주로 프론트엔드 개발을 위한 CSS 원칙에 대한 자세한 설명을 소개하고 있습니다. 필요한 친구들은
프론트엔드 개발을 위한 CSS 원칙 상세 설명
웹 프론트엔드 개발에 종사하는 사람들은 CSS를 많이 다뤄봤지만, CSS가 어떻게 작동하는지 모르는 사람들도 있을 것입니다. 이것이 CSS 수준을 향상시키는 데 병목 현상이 발생하면 이에 대해 더 많이 알아야 합니까? 1. 브라우저 개발 및 CSS
2. 브라우저가 페이지를 렌더링하고 로드하는 방법
2. 페이지의 특정 부분을 렌더링할 때 그 위의 모든 부분이 다운로드되었습니다(단, 관련 요소가 모두 다운로드되었다는 의미는 아닙니다).
3. 의미상 해석 가능한 태그 삽입 파일(JS 스크립트, CSS 스타일)이 발견되면 IE 다운로드 프로세스에서 다운로드를 위해 별도의 연결을 활성화합니다.
4. 다운로드 후 구문 분석을 수행합니다. 구문 분석 중에는 페이지의 모든 하위 요소에 대한 다운로드를 중지합니다.
5. 스타일 시트가 다운로드되면 이전에 다운로드한 모든 스타일 시트와 함께 구문 분석됩니다. 구문 분석이 완료되면 이전의 모든 요소(이전에 렌더링된 요소 포함)가 다시 렌더링됩니다.
6. JS나 CSS에서 재정의가 있는 경우 나중에 정의된 함수가 이전에 정의된 함수를 덮어씁니다.
2. 브라우저 렌더링
모드 및 알고리즘 3. 렌더링된 콘텐츠의 크기
3. CSS란 무엇이며 CSS의 장점
1. 공연과 콘텐츠를 분리하세요. 디자인 부분을 분리하여 별도의 스타일 파일에 넣고, HTML 파일에는 텍스트 정보만 저장합니다. 이러한 페이지는 인덱싱 엔진 검색에 더 친숙합니다.
2. 페이지 탐색 속도를 향상시킵니다. 동일한 페이지 시각적 효과를 위해 CSS+p를 사용하여 재구성된 페이지 용량은 TABLE로 인코딩된 페이지 파일 용량보다 훨씬 작습니다. 전자는 일반적으로 후자의 1/2 크기입니다. 브라우저는 긴 태그를 많이 컴파일할 필요가 없습니다.
3. 유지관리 및 수정이 용이합니다. CSS 파일 몇 개만 수정하면 전체 웹사이트를 다시 디자인할 수 있습니다.
4. 브라우저 CSS 매칭 원리
브라우저 CSS 매칭은 왼쪽에서 오른쪽으로 검색하지 않고, 오른쪽에서 왼쪽으로 검색합니다. 예를 들어 앞에서 언급한 p#pBox pspan.red{color:red;} 브라우저의 검색 순서는 다음과 같습니다. 먼저 html에서 class='red'인 모든 span 요소를 검색하고 찾은 후 다음과 같은지 검색합니다. p 요소에 p 요소가 있는지 확인한 다음 p의 상위 요소에 ID가 pBox인 p 요소가 있는지 확인합니다. 둘 다 있으면 CSS가 일치합니다.
오른쪽에서 왼쪽으로 검색하는 브라우저의 장점은 관련 없는 스타일 규칙과 요소를 최대한 빨리 필터링할 수 있다는 것입니다. Firefox는 이 검색 방법을 keyselector(키워드 쿼리)라고 부릅니다. 소위 키워드는 스타일 규칙의 마지막(가장 오른쪽) 규칙입니다. 위의 키는span.red입니다.
5. CSS 최적화
소위 효율적인 CSS는 요소를 찾을 때 브라우저가 가능한 한 적은 작업을 수행하도록 허용하는 것입니다. 검색 스타일에 따라 CSS를 작성할 때 흔히 저지르는 비효율적인 실수는 다음과 같습니다.
더 나은 쓰기: #pBox
설명: ID 선택자가 고유하기 때문에 p를 추가하면 불필요하고 불필요한 CSS 일치가 추가됩니다.
2.
선택자 앞에 태그 이름
을 사용하지 마세요. 일반 작성 방법:span.red
더 나은 작성 방법: .red
설명: 첫 번째와 동일하지만 여러 .red를 정의하고 요소별로 스타일이 다른 경우 제거할 수 없습니다. 예를 들어 CSS와 같은 파일의 정의는 다음과 같습니다.
p.red{color:red;} span.red{color:#ff00ff}
이렇게 정의하면 삭제하면 헷갈리겠지만 추천합니다. 이렇게 쓰지 않는 것이 좋습니다
3. 계층적 관계는 최대한 적게 사용하세요
일반 작성: #pBoxp.red{color:red;}
더 나은 작성 방법: .red{..}
4. 대신 클래스를 사용하세요. 계층적 관계
일반적인 작성 방법: #pBox ul li a{display:block; }
더 나은 작성 방법: .block{display:block;}
5. CSS 렌더링 효율성에서 id와 클래스의 효율성은 기본적으로 동일합니다
클래스는 첫 번째 로드에서
됩니다. 캐스케이딩에 더 나은 효과가 있습니다. 루트 요소에서 id를 사용하는 것이 더 좋습니다(id는 미묘한 속도 이점을 갖습니다). 읽어주셔서 감사합니다. 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!
위 내용은 프런트엔드 개발을 위한 CSS 원칙에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!