이러한 CSS 원칙을 이해하고 있나요?

CSS는 HTML(Standard Generalized Markup Language의 응용 프로그램) 또는 XML(Standard Generalized Markup Language의 하위 집합)과 같은 파일 스타일을 표현하는 데 사용되는 컴퓨터 언어입니다. CSS는 웹페이지를 정적으로 수정할 수 있을 뿐만 아니라 다양한 스크립팅 언어와 협력하여 웹페이지의 다양한 요소의 형식을 동적으로 지정할 수도 있습니다. CSS는 웹 페이지의 요소 위치 레이아웃에 대해 픽셀 수준의 정밀한 제어를 수행할 수 있고 거의 모든 글꼴 크기 스타일을 지원하며 웹 페이지 개체 및 모델 스타일을 편집하는 기능이 있습니다. 웹 프론트엔드 개발에 종사하는 사람들은 CSS를 많이 다루었습니다. 어떤 사람들은 CSS가 어떻게 작동하는지 알지 못할 수도 있습니다. 이것이 CSS 수준을 향상시키는 데 병목 현상이 발생하면 이에 대해 더 많이 알아야 합니까?

　 1. 브라우저 개발 및 CSS

웹 브라우저는 주로 HTTP 프로토콜을 통해 웹 서버에 연결하여 웹 페이지를 얻습니다. 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이 성장하면서 디자이너의 요구 사항을 충족하기 위해 많은 디스플레이 기능이 추가되었습니다. 이러한 능력이 증가함에 따라 스타일을 정의하는 외국어는 점점 더 의미가 없게 됩니다.

　CSS의 원래 제안은 1994년 이학운이 제안한 것입니다. 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의 장점 CSS란 무엇인가요?

CSS는 Cascading Style Sheets의 약어입니다.

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

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

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

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

CSS는 W3C의 CSS 워킹 그룹에서 제작 및 유지 관리됩니다.

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

　1. 공연과 콘텐츠를 분리하세요. 디자인 부분을 분리하여 별도의 스타일 파일에 넣고, HTML 파일에는 텍스트 정보만 저장합니다. 이러한 페이지는 검색 엔진에 더 친숙합니다.

　2. 페이지 탐색 속도를 향상시킵니다. 동일한 페이지 시각적 효과를 위해 CSS+DIV를 사용하여 재구성된 페이지 용량은 TABLE로 인코딩된 페이지 파일 용량보다 훨씬 작습니다. 전자는 일반적으로 후자의 1/2 크기입니다. 브라우저는 긴 태그를 많이 컴파일할 필요가 없습니다.

　3. 유지 관리 및 수정이 쉽습니다. CSS 파일 몇 개만 수정하면 전체 웹사이트를 다시 디자인할 수 있습니다.

　 IV. 브라우저 CSS 매칭 원칙

　브라우저 CSS 매칭은 왼쪽에서 오른쪽으로 검색하지 않고 오른쪽에서 왼쪽으로 검색합니다. 예를 들어 앞서 언급한 DIV#pBox pspan.red{color:red;}의 경우 브라우저의 검색 순서는 다음과 같습니다. 먼저 html에서 class='red'인 모든 범위 요소를 검색하고 찾은 후 검색합니다. p 요소에 p 요소가 있는지 확인한 다음 p의 상위 요소에 ID가 pBox인 p 요소가 있는지 확인합니다. 둘 다 있으면 CSS가 일치합니다.

　오른쪽에서 왼쪽으로 검색하는 브라우저의 장점은 관련 없는 스타일 규칙과 요소를 최대한 빨리 필터링할 수 있다는 것입니다. Firefox는 이 검색 방법을 keyselector(키워드 쿼리)라고 부릅니다. 소위 키워드는 스타일 규칙의 마지막(가장 오른쪽) 규칙입니다. 위의 키는span.red입니다.

5. CSS 최적화

소위 효율적인 CSS는 스타일과 일치하는 요소를 찾을 때 브라우저가 가능한 한 적은 수의 검색을 수행한다는 것을 의미합니다. 다음은 CSS를 작성할 때 저지르는 몇 가지 비효율적인 실수입니다. 1. ID 선택기 앞에 태그 이름을 사용하지 마세요

보통 작성: DIV#pBox

더 나은 작성: #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와 클래스의 효율성은 기본적으로 동일합니다

　Class는 첫 번째 로드에서 캐시되므로 루트 요소에서 id를 사용하면 더 나은 결과를 얻을 수 있습니다. (id는 미묘한 속도 이점을 가지고 있습니다) .

프런트엔드 친구들에게는 좋은 CSS 기술을 익히는 것이 매우 중요합니다. 이 글이 도움이 되기를 바랍니다.

관련 권장 사항:

CSS 개발을 위한 가장 포괄적인 공통 기술

CSS 세부 사항에 대한 자세한 설명

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

위 내용은 이러한 CSS 원칙을 이해하고 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!