CSS 스타일 우선 순위 수준 검토
CSS (Cascading Style Sheet) 제 생각에 가장 간단한 언어는 다른 웹 관련 언어와 비교 되었기 때문에 웹 사이트를 만드는 법을 배우기 시작한 많은 사람들이이 언어와 HTML을 먼저 배울 것입니다..
이 글에서는 CSS 기본 사항으로 돌아갑니다. CSS 스타일을 처음 적용하는 방법, 적용 할 스타일, 일부 스타일 선언이 서로 덮어 쓰는 방법, 다른 스타일 선언을 덮어 쓰는 방법 등을 검토합니다..
그래서,이 게시물은 특별히 어려움을 겪기 시작한 초보자들을위한 것입니다. 첫 번째 스타일 시트를 컴파일 할 때 여전히 실수와 오류가있을 수 있습니다. 그럼 시작하자..
기본 브라우저 스타일
Firefox, Chrome, Safari, Opera 및 Internet Explorer는 현재 시장에서 상위 5 대 데스크톱 브라우저입니다. 이러한 브라우저와 다른 모든 브라우저는 HTML 요소를 렌더링하는 기본 기본 스타일을 포함하는 표준 규칙을 따릅니다..
따라서 스타일을 추가하지 않고 임의의 HTML 요소를 넣으면 브라우저에 올바르게 렌더링 된 것을 볼 수 있습니다.
그러나 이러한 요소를 신중하게 검사하면 브라우저마다 각기 다른 값을 갖습니다. “태만” IE6, 7 및 Firefox 3.0과 같은 오래된 브라우저의 경우 브라우저에서 불일치가 발생합니다..
예를 들어 위의 스크린 샷에서 볼 수 있듯이 최신 Firefox는 블록 쿼터 기본적으로 여백 : 16px 40px 16px 40px, 다른 한편으로는 Internet Explorer 7 렌더링 할 것이다. 블록 쿼터 와 여백 : 0px 40px.
위에 표시된 불일치를 극복하기 위해 많은 웹 디자이너와 개발자는 모든 스타일을 CSS 재설정. 이 CSS 파일에는 일반적으로 거의 모든 HTML 유형 선택자, 동일한 규칙으로 정의.
사용 가능한 많은 CSS 재설정이 있지만 여기에 내 3 가지 즐겨 찾기가 있습니다.
- Normalize.css
- CSS 재설정
- HTML5 스타일 시트 재설정
셀렉터
방문한 웹 디자인 / 개발 블로그에서이 용어를 읽는 경우가 많습니다. 셀렉터.
CSS의 선택기는 적용 할 스타일에 대해 HTML 문서의 모든 부분을 대상으로 지정하는 데 사용되는 구문입니다. 세 가지 기본 선택기가 있습니다. 첫 번째 웹 사이트에서 사용되는 공통 선택기 일 것이므로 여기에서 논의 할 것입니다. 우리는 미래의 게시물에서 다른 사람들을 다룰 것입니다..
유형 선택기
위에서 한 번 언급 한대로 유형 선택기는 문서의 지정된 HTML 요소를 대상으로합니다. 예 :
p / ** 선언 ** /
모든 피 아니면 그 절 요소를 사용하고이를 사용하면 결국 브라우저에서 제공된 기본 스타일을 덮어 씁니다..
클래스 선택기
요소에 클래스 또는 많은 클래스를 추가 한 경우 해당 클래스를 대상으로 지정할 수도 있습니다. 그만큼 클래스 선택기 ~로 시작하다 점 매개 변수.
.상자 / ** 선언 ** /
위의 스 니펫은 상자 클래스가있는 모든 요소와 일치하거나 더 구체적으로 선택할 수 있습니다..
p.box / ** 선언 ** /
광고 소재는 피 요소가 상자 수업.
우리가 수업 selector, 두 스타일 모두에서 동일한 스타일 선언 유형 선택기와 기본 브라우저 덮어 쓴다..
ID 선택기
그만큼 신분증 매우 제한적인 속성이므로 신분증 요소에 있어야하며 고유해야합니다..
함유량
우리가 신분증 요소에서 우리는 id selector 그 요소를 목표로 삼는다. id selector는 해시로 정의됩니다. # 매개 변수.
#uniqueID / ** 선언 ** /
이후 신분증 는 고유하므로 선택기 유형의 최우선 순위가 가장 높습니다. 그래서 우리가 스타일을 선언 할 때 신분증 선택기는 궁극적으로 동일한 선언을 모두 덮어 씁니다. 수업, 유형 선택자와 기본 브라우저 스타일.
스타일 삽입하기
우리는 모든 필수 기본 선택자를 살펴 보았습니다. 이제 HTML 문서에 이러한 스타일이 어떻게 포함되는지 살펴 보겠습니다..
외부 스타일
외부 스타일은 별도의 파일에 추가되는 스타일로 보통 .CSS 파일을 사용하여 HTML 문서에 링크됩니다. 태그를 사용하여 해당 스타일 적용.
그리고 파일에 선언 된 모든 스타일은 우리가 언급 한 것처럼 동작합니다. 셀렉터 위의 섹션, 즉 주로 덮어 씁니다. 기본 브라우저 스타일을 사용하고 선택기의 우선 순위 수준에 따라 다른 스타일 선언을 덮어 씁니다..
이 연습은 특히 많은 페이지가 첨부 된 수천 줄의 CSS 코드가있을 때 스타일을 첨부하는 가장 좋은 방법입니다.
이렇게하면 스타일을 쉽게 관리 할 수 있습니다. 예를 들어 CSS 파일을 타이포그래피와 관련된 모든 스타일을 제어하는 typography.css와 같이 특정 역할에 따라 여러 파일로 분리 할 수 있습니다.
내부 스타일
내부 스타일은 일반적으로 HTML 문서에 직접 포함되는 스타일입니다. 꼬리표.
그러나 HTML 페이지가 너무 길어 스타일이 포함되는 위치에만 영향을 미칠 수 있기 때문에 수백 줄의 스타일을 사용하는 경우에는이 방법을 사용하지 않는 것이 좋습니다. 10 페이지를 말하면, 그 스타일을 복사하여 모든 페이지에 삽입해야하며, 스타일을 변경해야 할 경우 10 페이지로 변경해야합니다. 이것은 지루한 작업입니다.
우선 순위 수준에 따라 내부 스타일이 높아 지므로 외부 스타일을 덮어 씁니다..
인라인 스타일
인라인 스타일은 HTML 요소에 직접 포함되는 스타일입니다..
이것은 단락이다.
위의 예제는 5px 여백을 단락 요소에 추가하고 내부 및 외부 스타일로 해당 요소에 대해 선언 된 여백도 덮어 씁니다.
마크 업이 모든 스타일 선언으로 어수선해질 수 있으므로이 작업을 수행하지 마십시오. 많은 스타일이 포함되어 있다면 모든 HTML과 스타일을보고 관리하는 것이 악몽이 될 것입니다.
추가 읽기: CSS를 삽입하는 3 가지 방법 - W3CSchools.
중요한 규칙!
요소에 대해 특정 스타일을 적용해야하지만 그 요소에 대한 동일한 스타일은 스타일 시트 또는 문서의 다른 곳에서도 선언해야하는 경우가 있습니다. 예 :
우리는 임베디드 스타일을 가진 다음 앵커 태그를 가지고 있습니다.
이것은 링크입니다.
또한 스타일 시트에 앵커 태그에 대한 별도의 스타일이 있습니다..
a 테두리 : 1 픽셀 단색 # 333; 배경색 : # 555;
이 예에서 Google은 !중대한 규칙이 요소의 스타일 시트 대신 스타일 시트의 스타일을 사용하도록하는 규칙.
a 경계선 : 1 픽셀 단색 # 333! 중요; 배경색 : # 555! 중요;
그만큼 !중대한 규칙은이 스타일이 가장 중대한 요소에 직접 포함 된 경우에도 다른 스타일 위에 적용해야합니다. (인라인 스타일).
추가 읽기:! 중요한 CSS 선언 : 어떻게 그리고 언제 사용 하는가 - Smashing Magazine.
결론
우리는이 기사의 모든 주제를 다뤘습니다. 이제 각 선택기와 스타일을 포함하는 방식이 브라우저의 메커니즘에서 다른 우선 순위 수준을 갖음을 알 수 있습니다. 앞에서 언급했듯이이 주제는 초보자 수준을 대상으로하므로 노련한 웹 디자이너에게는 새로운 것이 아닙니다..
그러나 모든 웹 디자이너는 기본에 대한 기본 지식이 때로는 주제에 대한 기본 지식을 검토하는 데 필요하다는 데 동의 할 것이라고 생각합니다. 사실, 우리는 종종 기본적인 것들을 놓치고 있습니다. 우리는 이처럼 굉장한 (그리고 미친) 것들에 더 감동하는 경향이 있습니다..
마지막으로, 필자는이 기사에서 토론 내용을 자세히 검토 할 수있는 데모 및 소스 파일을 제공했습니다..
- 데모
- 소스 다운로드
나는이 게시물을 즐기시기 바랍니다. 만약 당신이이 게시물을 부정확하게 찾았거나, 몇 가지 중요한 사항을 놓친 경우, 아래의 코멘트 섹션에서 저에게 알려 주실 것을 주저하지 마십시오..
