프런트엔드 개발을 위한 CSS 원칙에 대한 자세한 설명

이 글은 주로 프론트엔드 개발을 위한 CSS 원칙에 대한 자세한 설명을 소개하고 있습니다. 필요한 친구들은

프론트엔드 개발을 위한 CSS 원칙 상세 설명

웹 프론트엔드 개발에 종사하는 사람들은 CSS를 많이 다뤄봤지만, CSS가 어떻게 작동하는지 모르는 사람들도 있을 것입니다. 이것이 CSS 수준을 향상시키는 데 병목 현상이 발생하면 이에 대해 더 많이 알아야 합니까?

1. 브라우저 개발 및 CSS

웹 브라우저는 주로 HTTP 프로토콜을 통해 웹 서버에 연결하여 웹 페이지를 얻습니다. 서버는 웹 서버에 데이터를 보내고 웹 페이지를 검색합니다. 현재 가장 일반적으로 사용되는 HTTP는 RFC2616에 완전히 정의된 HTTP/1.1입니다. HTTP/1.1에는 Internet Explorer가 완전히 지원하지 않는 자체 표준 세트가 있지만 다른 많은 최신 웹 브라우저는 이러한 표준을 완벽하게 지원합니다. 웹페이지의 위치는 웹페이지의 주소인 URL(Uniform Resource Locator)로 표시됩니다. http:로 시작하는 모든 항목은 HTTP 프로토콜을 통해 로그인한다는 의미입니다. 많은 브라우저는 ftp: FTP(파일 전송 프로토콜), gopher: Gopher, https: HTTPS(SSL로 암호화된 HTTP)와 같은 다른 유형의 URL 및 프로토콜도 지원합니다.

초기 웹 브라우저는 간단한 HTML 버전만 지원했습니다. 독점 소프트웨어 브라우저의 급속한 개발로 인해 비표준 HTML 코드가 생성되었습니다. 그러나 HTML이 성장함에 따라 디자이너의 요구 사항을 충족하기 위해 많은 디스플레이 기능이 추가되었습니다. 이러한 능력이 증가함에 따라 스타일을 정의하는 외국어는 점점 더 의미가 없게 됩니다.

이학운이 1994년에 독창적인 CSS 제안을 제안했습니다. BertBos는 Argo라는 브라우저를 디자인하고 있었고 CSS에 대해 함께 작업하기로 결정했습니다.

이미 스타일시트 언어에 대한 제안이 몇 가지 있었지만 "캐스케이딩"이라는 개념을 가장 먼저 포함시킨 것은 CSS였습니다. CSS에서는 파일 스타일을 다른 스타일 시트

에서 상속받을 수 있습니다. 독자는 어떤 곳에서는 자신이 선호하는 스타일을 사용할 수 있고, 다른 곳에서는 작가의 스타일을 상속하거나 "레이어"할 수 있습니다. 이 레이어링 방법을 통해 저자와 독자 모두 자신의 디자인을 유연하게 추가하고 자신의 취향을 혼합할 수 있습니다.

1997년 초

W3C는 CSS를 전담하는 실무 그룹을 조직했으며 그 리더는 Chris Lilley였습니다. 이 작업 그룹은 첫 번째 판에서 다루지 않은 문제에 대해 논의하기 시작했으며, 그 결과 1998년 5월 두 번째 판 요구 사항이 출판되었습니다. 2007년 현재, 제3판은 아직 완성되지 않았습니다.

2. 브라우저가 페이지를 렌더링하고 로드하는 방법

왜 일부 웹사이트는 열 때 매우 느리게 로드되고, 전체 페이지는 페이지가 동시에 표시되는 반면 일부 웹사이트는 위에서 아래로 점진적으로 표시됩니까? 이를 이해하려면 다음과 같은 일반적인 프로세스부터 시작할 수 있습니다:

　1. 브라우저 다운로드 순서는 위에서 아래로, 렌더링 순서도 위에서 아래로입니다. 의 동시에 수행됩니다.

2. 페이지의 특정 부분을 렌더링할 때 그 위의 모든 부분이 다운로드되었습니다(단, 관련 요소가 모두 다운로드되었다는 의미는 아닙니다).
3. 의미상 해석 가능한 태그 삽입 파일(JS 스크립트, CSS 스타일)이 발견되면 IE 다운로드 프로세스에서 다운로드를 위해 별도의 연결을 활성화합니다.
　4. 다운로드 후 구문 분석을 수행합니다. 구문 분석 중에는 페이지의 모든 하위 요소에 대한 다운로드를 중지합니다.
5. 스타일 시트가 다운로드되면 이전에 다운로드한 모든 스타일 시트와 함께 구문 분석됩니다. 구문 분석이 완료되면 이전의 모든 요소(이전에 렌더링된 요소 포함)가 다시 렌더링됩니다.
　6. JS나 CSS에서 재정의가 있는 경우 나중에 정의된 함수가 이전에 정의된 함수를 덮어씁니다.

여기서 핵심은 2~5번 3가지 입니다. 렌더링 효율성은 다음 세 가지 사항과 관련이 있습니다.

1. CSS 선택기의 쿼리 위치 지정 효율성

2. 브라우저 렌더링
모드 및 알고리즘 3. 렌더링된 콘텐츠의 크기

3. CSS란 무엇이며 CSS의 장점

CSS란 무엇인가요?

1. CSS는 Cascading Style Sheets의 약자입니다.

2. CSS 언어는 컴파일이 필요 없고 브라우저에서 직접 해석하고 실행할 수 있는 마크업 언어입니다(브라우저 해석 언어입니다).

3. 표준 웹 디자인에서 CSS는 웹 콘텐츠(XHTML)의 표현을 담당합니다.

4. CSS 파일은 일부 CSS 태그를 포함하는 텍스트 파일이라고도 할 수 있습니다. CSS 파일은 파일 이름 접미사로 CSS를 사용해야 합니다.

5. CSS 파일만 변경하면 웹페이지의 전체적인 표현을 바꿀 수 있어 작업량을 줄일 수 있어 모든 웹디자이너에게 필수과목입니다.

6. CSS는 W3C CSS 워킹 그룹에서 제작하고 유지 관리합니다.

CSS+p를 사용하여 웹페이지를 재구성하면 기존의 TABLE 웹페이지 레이아웃과 비교할 때 다음과 같은 세 가지 중요한 이점이 있습니다.

　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를 작성할 때 흔히 저지르는 비효율적인 실수는 다음과 같습니다.

　1. ID 선택기
🎜> 일반 쓰기: p#pBox

더 나은 쓰기: #pBox

설명: ID 선택자가 고유하기 때문에 p를 추가하면 불필요하고 불필요한 CSS 일치가 추가됩니다.

2.

class

선택자 앞에 태그 이름
을 사용하지 마세요. 일반 작성 방법: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 중국어 웹사이트의 기타 관련 기사를 참조하세요!