전단 개발 의 CSS 원리 상세 설명
웹 전단 개발 에 종사 하 는 사람들 은 모두 CSS 와 많이 접촉 합 니 다.어떤 사람들 은 CSS 가 어떻게 일 을 하 는 지 모 를 수도 있 습 니 다.쓴 CSS 브 라 우 저 는 어떻게 해석 합 니까?이것 이 우리 가 CSS 수준 을 향상 시 키 는 병목 이 되 었 을 때 좀 더 알 아야 하지 않 겠 습 니까?
1.브 라 우 저의 발전 과 CSS
웹 브 라 우 저 는 주로 HTTP 프로 토 콜 을 통 해 웹 서버 를 연결 하여 웹 페이지 를 가 져 옵 니 다.HTTP 는 웹 브 라 우 저가 웹 서버 에 자 료 를 보 내 고 웹 페이지 를 가 져 오 는 것 을 허용 합 니 다.현재 가장 많이 사용 되 는 HTTP 는 HTTP/1.1 입 니 다.이 프로 토 콜 은 RFC 2616 에서 완전 하 게 정의 되 었 습 니 다.HTTP/1.1 은 인터넷 익스플로러 가 완전히 지원 되 지 않 는 기준 이 있 지만,많은 다른 현대 웹 브 라 우 저 들 은 이러한 기준 을 완전히 지원 한다.웹 페이지 의 위 치 는 URL(자원 포 지 셔 닝 문자 통일)로 표시 합 니 다.이것 은 웹 페이지 의 주소 입 니 다.http:HTTP 프로 토 콜 을 통 해 로그 인 합 니 다.많은 브 라 우 저 들 이 ftp:FTP(파일 전송 프로 토 콜),gopher:Gopher 및 https:HTTPS(SSL 로 암호 화 된 HTTP)등 다른 유형의 URL 과 프로 토 콜 을 동시에 지원 합 니 다.
초기 웹 브 라 우 저 는 간단 한 버 전의 HTML 만 지원 했다.전속 소프트웨어 의 브 라 우 저의 신속 한 발전 은 비 표준적 인 HTML 코드 의 발생 을 초래한다.그러나 HTML 이 성장 하면 서 디자이너 의 요 구 를 만족 시 키 기 위해 HTML 은 많은 디 스 플레이 기능 을 얻 었 다.이러한 기능 이 증가 함 에 따라 외부 정의 스타일 의 언어 는 점점 무의미 해 지고 있다.
1994 년 하 곤 리 는 CSS 의 최초 제안 을 했다.버 트 보스(BertBos)는 당시 아르 고 라 는 브 라 우 저 를 설계 하고 있 었 고,그들 은 함께 CSS 를 설계 하기 로 결정 했다.
당시 에는 이미 스타일 시트 언어 에 대한 조언 이 있 었 지만 CSS 는 처음으로'레이 어드'아 이 디 어 를 담 았 다.CSS 에서 한 파일 의 스타일 은 다른 스타일 시트 에서 계승 할 수 있 습 니 다.독 자 는 어떤 곳 에서 자신 이 더 좋아 하 는 스타일 을 사용 할 수 있 고 다른 곳 에서 계승 하거나'레이 어드'작가 의 스타일 을 사용 할 수 있다.이런 레이 어드 방식 은 작가 와 독자 로 하여 금 자신의 디자인 에 유연 하 게 가입 하고 각자 의 취 미 를 혼합 할 수 있 게 한다.
1997 년 초 W3C 내 에 CSS 전담 실무 팀 이 조직 됐 는데 그 책임 자 는 크 리 스 리 레 였 다.이 작업 팀 은 1 판 에 언급 되 지 않 은 문 제 를 토론 하기 시 작 했 는데 그 결 과 는 1998 년 5 월 에 출판 된 2 판 요구 이다.2007 년 까지 3 판 은 아직 완비 되 지 않 았 다.
2.브 라 우 저 는 페이지 를 어떻게 렌 더 링 하고 페이지 를 불 러 옵 니까?
왜 일부 사 이 트 는 열 때 로드 가 느 리 고 전체 페이지 가 동시에 표시 되 며 일부 사 이 트 는 꼭대기 에서 아래로 점차적으로 표 시 됩 니까?이것 을 이해 하려 면 먼저 아래 의 일반적인 절차 부터 시작 할 수 있다.
1.브 라 우 저 다운로드 순 서 는 위 에서 아래로,렌 더 링 순서 도 위 에서 아래로,다운로드 와 렌 더 링 을 동시에 진행 합 니 다.
2.페이지 의 일부분 을 렌 더 링 할 때 위의 모든 부분 이 다운로드 되 었 습 니 다(모든 관련 요소 가 다운로드 되 었 다 는 것 은 아 닙 니 다).
3.의미 해석 성 탭 에 파일(JS 스 크 립 트,CSS 스타일)을 삽입 하면 IE 의 다운로드 과정 에서 단독 연결 을 사용 하여 다운로드 합 니 다.
4.또한 다운로드 후 분석 하고 분석 하 는 과정 에서 페이지 의 모든 아래 요소 의 다운 로드 를 중단 합 니 다.
5.스타일 시트 는 다운로드 가 완료 되면 이전에 다운로드 한 모든 스타일 시트 와 함께 분석 하고 분석 이 완료 되면 이전 모든 요소(이전에 렌 더 링 된 것 포함)를 다시 렌 더 링 합 니 다.
6.JS,CSS 에 재 정의 가 있 으 면 정의 함 수 는 정의 함 수 를 덮어 씁 니 다.
여기 서 관건 은 2-5 라 는 세 번 째 점 이다.렌 더 링 효율 은 다음 세 가지 와 관계 가 있 습 니 다.
1.CSS 선택 기의 검색 포 지 셔 닝 효율
2.브 라 우 저의 렌 더 링 모드 와 알고리즘
3.렌 더 링 내용 의 크기
3.CSS 와 CSS 의 장점 은 무엇 입 니까?
CSS 란 무엇 입 니까?
1.표현 과 내용 이 분리 된다.디자인 부분 을 분리 해서 하나의 독립 된 스타일 파일 에 넣 고 HTML 파일 에는 텍스트 정보 만 저장 합 니 다.이런 페이지 는 검색엔진 에 더욱 우호 적 이다.
2.페이지 탐색 속 도 를 높 인 다.같은 페이지 의 시각 적 효과 에 대해 CSS+DIV 로 재 구성 한 페이지 용량 은 TABLE 인 코딩 된 페이지 파일 용량 보다 훨씬 작고 전 자 는 보통 후자 의 1/2 크기 에 불과 하 다.브 라 우 저 는 많은 지루 한 탭 을 컴 파일 할 필요 가 없습니다.
3.유지 보수 와 개판 이 용이 하 다.너 는 단지 몇 개의 CSS 파일 을 간단하게 수정 하기 만 하면 전체 사이트 의 페이지 를 다시 설계 할 수 있다.
4.브 라 우 저의 CSS 일치 원리
브 라 우 저 CSS 매 칭 은 왼쪽 에서 오른쪽으로 찾 는 것 이 아니 라 오른쪽 에서 왼쪽으로 찾 습 니 다.예 를 들 어 이전에 말 한 DIV\#divBox p span.red{color:red;},브 라 우 저의 검색 순 서 는 다음 과 같 습 니 다.html 에 있 는 모든 class='red'의 span 요 소 를 찾 은 다음 에 아버지 세대 요소 에 p 요소 가 있 는 지 확인 한 다음 에 p 의 아버지 요소 에 id 가 divBox 인 div 요소 가 있 는 지 판단 합 니 다.모두 존재 한다 면 CSS 가 일치 합 니 다.
브 라 우 저가 오른쪽 에서 왼쪽으로 찾 는 장점 은 무관 한 스타일 규칙 과 요 소 를 빨리 걸 러 내기 위해 서 입 니 다.Firefox 는 이러한 검색 방식 을 keyselector(키워드 조회)라 고 부 릅 니 다.키 워드 는 스타일 규칙 의 마지막(맨 오른쪽)규칙 이 고 위의 키 는 span.red 입 니 다.
5.CSS 최적화
효율 적 인 CSS 란 브 라 우 저 로 하여 금 style 에 맞 는 요 소 를 찾 을 때 가능 한 한 적 게 찾 게 하 는 것 입 니 다.다음은 우리 가 흔히 볼 수 있 는 CSS 를 쓰 는 데 저 효과 오 류 를 범 하 는 것 을 보 여 줍 니 다.
1.ID 선택 기 앞에서 태그 이름 을 사용 하지 마 십시오.
일반 표기 법:DIV\#divBox
더 좋 은 쓰기:\#divBox
설명:ID 선택 기 가 유일한 데다 div 가 불필요 한 CSS 매 칭 을 추가 하기 때 문 입 니 다.
2.class 선택 기 전에 탭 이름 을 사용 하지 마 십시오.
일반 표기 법:span.red
더 좋 은 쓰기:.red
설명:첫 번 째 조항 과 같 지만 여러 개의.red 를 정의 하고 서로 다른 요소 에서 스타일 이 다 르 면 지 울 수 없습니다.예 를 들 어 css 파일 에서 다음 과 같이 정의 합 니 다.
p.red{color:red;}
span.red{color:#ff00ff}
3.등급 관 계 를 최대한 적 게 사용
일반 쓰기:\#divBoxp.red{color:red;}
더 좋 은 쓰기:.red{..}
4.등급 관 계 를 클 라 스 로 대체 합 니 다.
일반 쓰기:\#divBox ul li a{display:block;}
더 좋 은 쓰기:.block{display:block;}
5.CSS 렌 더 링 효율 에서 id 와 class 의 효율 은 대체적으로 비슷 하 다.
class 는 첫 번 째 불 러 오 는 중 캐 시 되 어 레이 어드 에서 더욱 좋 은 효 과 를 얻 을 수 있 습 니 다.뿌리 요소 에 id 를 사용 하면 더욱 좋 습 니 다(id 는 미묘 한 속도 우위 가 있 습 니 다).
읽 어 주 셔 서 감사합니다. 여러분 에 게 도움 이 되 기 를 바 랍 니 다.본 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
전단 자동화 워 크 플 로 의 hooks예 를 들 어 우 리 는 git commt 전에 eslint 코드 검사, npm install 전에 프로젝트 의존 도 를 검사 하고 싶 습 니 다.전형 적 인 상황 에서 각종 도 구 는 특정한 동작 이 발생 할 때 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
