학습 스타일에 액세스 할 수있는 더 많은 방법은 CSS 선택기를 불러 오기.
A, 선택
1. 종
① 유형 선택 : 직접 HTML 태그의 이름, 예를 들어 : 몸, P, DIV 등;
② 후손 선택기 : 공간, 예를 들어 : DIV (P)가 에 DIV를 선택 모든 미래 세대의 페이지 요소;
③ ID 선택기 : 예를 들어 "#ID", 모양 #introduction , 할 사람들 이론적 ID가 고유하게 정의되어야하지만, 이전 버전과의 호환성이 HTML 코드를 작성하는 브라우저가 잘되지 않습니다 : 요소 (참고의 도입에 대한 ID를 선택 모든 요소는 패턴이 ID)가 첨가되며
④ 클래스 선택 : 양식 "을 .class", 예를 들어, .latest는 선택 모든 최신의 요소의 클래스를;
⑤ 아이 선택기 : ">", 예를 들어 함께 div> P 사업부에서 선택된 제 P 소자 직접 자손;
⑥ 인접 형제 선택자 : 폼 "+", 예를 들어 + P (H2)의 선택된 H2 뒤에 , H2 및 제 동일 부모 요소 (P) 소자;
⑦ 일반 형제 선택기 : 양식 "~", 예를 들어, H2 ~ 페이지 선택 H2 뒤 의 H2와 같은 부모 요소 모두가 P 요소;
⑧ 선택자 "*"는 선택 (예를 들면 와일드 카드의 다른 유사 SQL 언어)를 나타내는 모든 요소;
⑨ 특성 선택기 : 양식 "을 입력하고 타입 ="이메일 " ]"는, 예를 들면, 약식 [제목] []의 속성 값이 유사한 정규식 일치 구문로 채워질 수있다 : 모든 약식 소자는 타이틀 속성이 (주를 선택 예 : A [^ HREF = "HTTP"] 모두 HREF HTTP로 시작이 선택된 : (A)의 요소);
⑩ 의사 요소 : 이중 콜론 "::"선택기, 예를 들어, 대한과 P : 첫 번째 문자 가 의미를 몇 가지 실질적인 상호 작용을 삽입하는 경우 때문에, 신중하게 의사 요소를 사용하여 (첫 번째 문자에서 페이지 요소를 선택 내용이, CSS가 제대로로드되지 않은 경우 문제를 많이해야하지만 스크린 리더의 통일 된 방법이없는 경우)을 해석;
⑩① 가상 클래스 ""선택자, 예컨대 단일 콜론 DIV : 마우스 오버 마우스 키패드 때문에, 또한 DIV (이동되는 애플리케이션에 DIV 스타일을 나타내고, 상기 이동 단말기 수도 정말로 추천 호버 의 의미에 추가 실질적인 대화 내용을 배치하지 마십시오 : 요소에 맴 돕니 다).
둘째, 스택 및 상속
1. "스택"스타일 시트
CSS (캐스 케이 딩 스타일 시트)이 때문에 계층 특성, CSS를 호출 할 이유. 이 말도 안되는 것 같다,하지만 CSS 캐스케이드 규칙은 코드가 여러 번 다시 사용할 때 제대로 실행되도록 할 수 있습니다. 소위 라미네이트는 사실 문맥 순차적 인 코드 및 우선 순위 요인은 궁극적으로 패턴에 적용되는, 덮어 쓰기되는 결정합니다.
2. 상속
일부 속성 등등 텍스트 색상, 글꼴 크기 및 그들의 요소를 상속 자손을 적용됩니다. 상속은 CSS 코드 다중화되어 있지만되도록 만드는 다중화 통상 표시 상태에서 원하는 패턴으로 라미네이트.
3. 우선 순위
간단히 말해, 우선 순위는 몇 단계로 나누어, 동일한 우선 순위의 선택은 높은 우선 순위를 만들기 위해 연결 하지만, 내부 CSS, 낮은 우선 순위 선택의 실현에 아무리 함께 많은 최종 구성 선택기는 우선 순위가 높은 선택의 우선 순위보다 높은되지 않습니다 .
인라인 스타일; 가장 높은 우선 순위를 ①
② 두번째 기록 : ID 선택기;
③ 셋째 등급 : 등급 선택 및 의사 클래스 선택기 (3 같음) 선택기 속성;
넷째 ④ : 입력 선택기, 가상 요소 선택기 (모두 동일하다);
⑤ 다섯 번째 : 얻은 부모 요소의 스타일을 상속합니다.
셋째, 성능을 향상시키기 위해 스타일을 적용
스타일을 적용하기위한 방법 ①에서 < 스타일 > </ 스타일 > 정의; ② 이용 < 링크 href를 = "xxx.css" /> 태그는 외부로부터 도입되고, ③ @import 'xxx.css' 외부로부터 도입된다.
2. 성능을 향상
파일 크기를 줄일 번째는 소란에서입니다 "화면의 속도,"페이지 네트워크에서 최적화 하나를 줄이기 위해, 세 번째는 페이지 자체에서 순서를로드하는 방법을 찾는 것입니다. 따라서 :
① HTTP 요청을 감소
우리는 모든 요청이 파일을 별도의 HTTP 요청에 전송됩니다 것을 알고, 브라우저는 다운로드하는 데 시간이 걸릴하고 페이지를 렌더링합니다. 따라서, 우리는의 사용을 최소화해야 @import를 , 하나 또는 2 CSS 파일의 수를 최소화;
② 압축 파일
기록 CSS 높은 압축비는, 압축 후의 CSS 파일 크기의 70 ~ 80 %까지 감소 될 수 있도록 다수의 속성 및 CSS의 값은, 반복 알고있다. 이것은 분명히 대역폭 사용을 줄일 수 있습니다, 많은 웹 서버는 브라우저의 지원에 자동 압축 온라인 리소스를 할 수 있습니다. 동시에, 서버가 더 긴 시간 CSS 파일 캐시를 설정하는 데 도움 수 있습니다. 압축 파일 및 캐시 된 콘텐츠는 두 가지의 가장 중요한 사이트의 성능을 향상시키기 위해 적당하다;
③ 일상, 자바 스크립트 스크립트 차단 페이지 렌더링을로드 할 수 없습니다
초보자는 종종 네트워크 코드에있는 모든 사람을보고, < 스크립트 > 태그는 HTML 본문 요소의 끝에 배치하지만, 많은 사람들이이 페이지 로딩 속도가 왜 분명하지 않다 향상시킬 수 있다고한다. 자바 스크립트 구현 프로세스가 비교적 느린이며, 브라우저가 스크립트의 첫 번째 섹션에있는 추가 과정에서 HTML을 해석 다운로드 < 헤드 > 태그는, 그것은 흑백 상태에서 아래의 첫 번째 렌더링 본문 부분을 무시합니다 사용자 환경이 좋지 있도록 먼저 다운로드에서 자바 스크립트를 실행합니다. 따라서, 고전적인 접근 방식이다 < 스크립트 > 태그 백 스윙. HTML5에서 < 스크립트 > 두 속성 태그 : 비동기과 연기, 그들의 역할은 완전 폐색 HTML 구문 분석 및 비동기로드 스크립트 2. 스크립트를 실행할 때로드 된 HTML 실행되면, 비동기 적으로로드 된 스크립트를 만드는 일이다 스크립트. 그러나이 두 속성은 HTML5가 IE10을 의미, 특성 및 이전 지원하지 않을 수 있습니다.
요약 : 우리는 다른 선택기 사이의 우선 순위 관계를 빗질하는 동안, 보통 CSS 선택기와 쉬운 조작을위한 새로운 선택기를 알고, 그리고 마지막으로로드 된 웹 페이지의 속도를 개선하는 방법에 대해 설명합니다.