@import 및 링크에 대해 스타일의 차이의 도입은 온라인으로 많은 주장이있다. 일반적으로,이 몇 가지 있지만, 나는이 일이 우리가 탐구하기 위해 함께 작동 할 수있는 장소가 될 것입니다 의심한다.
차
1 차 제휴
@import CSS 문법 규칙은, 수입 스타일 시트의 역할을 제공, 링크가 CSS 파일을로드 할 수 있습니다뿐만 아니라 HTML 태그에 의해 제공됩니다, 당신은 또한 RSS, REL 연결 속성을 정의 할 수 있습니다.
2.로드 순서 차별화
페이지가로드 될 때 레이블이 동시에 CSS로드를 통합됩니다 링크, 페이지가로드 된 후 @import 도입 CSS로드.
3. 호환성 차이
@import은 CSS2.1 구문, 단지 + IE5에서 확인 할 수있다; 링크 HTML 요소 레이블로, 호환성 문제가 없습니다.
4.DOM 제어 성 차이
JS 조작하여 DOM은, 삽입 된 링크 태그의 스타일을 변경하는 단계;를 DOM 방법의 기반이 때문에 문서가 @import 스타일에 삽입 할 수없는 상.
제 오른쪽 중량 차이
@import의 주요 스타일의 도입을 연결하는 권리는 스타일을 소개했다. (??)
우리는 당신이 일반적으로 하위 5와 같은 문을 볼 수 있습니다 온라인 시간의 차이를 모두 검색 할 수 있습니다. IS 제 5 조 정말입니까? 질문에 엽니 다.
그래서 여기에 우리가 기사를 확인하기 위해 몇 가지 데모가
재 검증하자 말 무거운 무게 전에 관련 개념을 CSS :
CSS의 중량 우선, CSS 선택기 높은 가중치 선택기, 즉 높은 우선 순위의 선택을 의미한다.
CSS 우선 성능 같은 HTML 엘리먼트 시간의 요소를 설정 다른 선택의 다른 우선 순위는, 스타일의 낮은 우선 스타일의 높은 우선 순위로 적용한다.
CSS는 우선 순위 가중치를 다음과 같이 :
! 중요> 인라인 스타일> ID> 클래스, 가상 클래스, 속성> 태그 이름> 상속> 와일드 카드
이해 무거운 무게 계산을 용이하게하기 위해, 우리는 다음과 같은 방법으로 수치 해석을 가정합니다 :
데모:
学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#myid { /* id选择器权重为100 */
background-color: pink;
}
#divid .myspan input { /* 权重为 100 + 10 + 1 = 111 */
background-color: yellow;
}
input[type="button"] { /* 权重为 10 */
color: white !important; /* !important权重为无穷大 */
}
input.myclass { /* 此为标签指定式选择器，权重为 1 + 10 = 11 */
color: black;
}
</style>
</head>
<body>
<div id="divid">
<span class="myspan">
<input type="button" id="myid" class="myclass" name="myname"
value="点我" style=" color: green;">
<!-- style样式的权重为1000 -->
</span>
</div>
</body>
</html>상기 계산에 따른 버튼 : 노란색 배경, 폰트 백색이어야한다.
여기서 다시, 우리의 주제로 돌아 가기 : 스타일은 @import보다 큰의 도입을 연결하는 정말 무거운 권리는 무엇입니까?
CSS 방식의 도입을 다시 할 수있는 권리가 있습니까?
위 demo :
/* green.css */
div {
background-color: green;
border: 3px solid red;
}
/* yellow.css */
div {
background-color: yellow;
border: 3px solid black;
}
/* blue.css */
@import url("green.css");
div{
background-color: blue;
}EG1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 实例1\. link标签引入yellow.css，内联样式引入green.css -->
<link rel="stylesheet" href="yellow.css">
<style type="text/css">
@import url("green.css");
</style>
</head>
<body>
<div style="width: 50px; height: 50px;"></div>
<!-- 盒子为，绿色背景，红色边框，即green.css生效 -->
</body>
</html>EG2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 实例2\. 内联样式引入green.css，link标签引入yellow.css -->
<style type="text/css">
@import url("green.css");
</style>
<link rel="stylesheet" href="yellow.css">
</head>
<body>
<div style="width: 50px; height: 50px;"></div>
<!-- 盒子为黄色背景，黑色边框，即yellow.css生效 -->
</body>
</html>비교 (12)와 두 가지 예, 우리는 다시 측면에 대한 권리를 가지고 있지 않은이 두 가지 개념을 소개하는 링크와 @import CSS의 방법을 찾을 수 있지만, 단순히 CSS를 적층 라인 베일을 보여줍니다. 스타일에 기록 된 모든 뒤에 이전 스타일을 재정의합니다.
EG3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 实例3\. 内联样式引入green.css，内联样式中设置粉色背景 -->
<style type="text/css">
@import url("green.css");
div {
background-color: pink;
}
</style>
</head>
<body>
<div style="width: 50px; height: 50px;"></div>
<!-- 盒子为粉色背景，红色边框，即green.css已生效，但背景色被内联样式层叠为粉色 -->
</body>
</html>
学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）G4)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 实例4\. link标签引入blue.css，blue.css中引入green.css -->
<link rel="stylesheet" href="blue.css">
</head>
<body>
<div style="width: 50px; height: 50px;"></div>
<!-- 盒子为蓝色背景，红色边框，即green.css已生效，但背景色被blue.css层叠为蓝色 -->
</body>
</html>실시 예 3 및 4 분석 결과를 알 수있다 :
수입 @,이 현상 쇼 (3)는 예를 들어, 우리는 빨간색 테두리, 힘에 @import 도입 green.css를 사용하여 증명 인라인 스타일을 볼 수 있지만, 그 스타일은 배경 분홍색 배경에 인라인 스타일을 멀리 스택, 그리고 단지 등 우리가 인라인 스타일의 상단에, 참조의 스타일은 구조에 통합되어, 실제로 그것을 스택 할 수 있도록, 인라인 스타일 전에 그래서 인라인 스타일을 배치됩니다.
마찬가지로, 실시 예 4에서, 상단에 도입 blue.css 파일 링크 태그가 빨간색 테두리를 소개 green.css @import 여전히 증명 시행 green.css 수도 있지만 배경 패턴 자체가 blue.css입니다 파란색 배경, 멀리 스택 스타일 @ 수입도에 도입 blue.css 자신의 스타일 앞에 위치.
위의 예제의 도입에 의해 입증 스타일 그래서 무게는 @import 스타일이 불공평라고 소개보다 큰 연결합니다.
의심?
우리는 또한 링크 및 @import의 상단 사이의 차이는, 페이지가로드 될 때, CSS 스타일은 시간의 도입이 선행 @import를로드하는 것입니다 링크 말을하지 말? 왜 링크 스타일은 @import 도입 아를 도입 스타일을 덮어 쓸 것?
먼저, 브라우저의 구현 과정에 대한 몇 가지 개념을 살펴 보자 :
로딩 : 도메인 이름 확인 요청 URL에있어서, 다음 (예를 들어, HTML, CSS, JS, 이미지 등)에 응답하여 파일을 수신하고, 서버에 요청을 보낸다.
분석 : 응답 (예 : HTML DOM 트리, 속성 시트, CSS JS 객체 스타일 규칙 등) 내부 데이터 구조를 구축, 구문 분석에 대한 자원 (HTML, CSS를, JS 등)에로드.
렌더링 : 건설 위치 계산, 계산 스타일의 각 요소, 트리를 렌더링 한 다음 렌더링 책 페이지 (페이지 생성 요소)에 따라 레이아웃 도면 프로세스를 완료합니다.
그래서 위의 브라우저의 실행 후 우리의 이해에 따라, 우리는 나에게 질문을 계속 :
링크가 그것을 렌더링 @import 에센하지 전에 @import로드?
사실, 작업을 렌더링 브라우저는 일반적으로 두 번 이상 실행. 마지막으로 렌더링이,이 모든 스타일로드 페이지 요소 앞에 있나 통합 렌더링 된 페이지를 그리는 렌더 트리를 기반으로해야합니다, 렌더링 재됩니다.
CSS를 구문 분석 엔진은 CSS 파일을 구문 분석 할 때, 그리고 우리가 파일의 맨 위에있는 경우 @import에, 대안으로 수입 @import의 CSS 파일이 방법을 이해 둘 수는 가져온 CSS의 @import로 대체됩니다 모든 스타일 파일.
도입 @import 스타일이 밖으로 쌓아 이유 마지막으로 알아 냈어. 그것의 로딩 후,하지만이 스타일이로드 된 후 테이블 위에 배치됩니다하지만, 그것은 자연적으로 최종 렌더링 스타일에 대해 동일한 이름 다음에 적층 될 것입니다.