꼭 읽어야 할 CSS 권위 있는 가이드 노트-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

꼭 읽어야 할 CSS 권위 있는 가이드 노트

Mar 09, 2017 pm 05:53 PM

css

다음 편집자는 꼭 읽어야 할 CSS 권위 있는 가이드 노트를 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 에디터로 구경오세요

1장 CSS와 문서

1, 요소: 교체 요소(img 입력), 비 교체 요소(대부분의 범위).

2, 링크: rel(대표 관계: 스타일시트, 후보 스타일시트: 대체 스타일시트); 미디어: (전체(모든 프리젠테이션 미디어, 화면, 인쇄), 제목(조정 후보) ).

3, @import url(sheet1.css)을 스타일 내에서 사용해야 하며, 다른 CSS 규칙 앞에 배치해야 합니다.

4, 하위 접근성: <style> - 스타일--></style>, 이전 브라우저에서는 스타일을 무시하고 CSS를 이해할 수 있는 브라우저는 스타일 시트를 정상적으로 읽을 수 있습니다.

5, CSS 주석: /* */. 🎜>

제2장 선택자

1. 문장을 그룹화할 때는 반드시 각 문장의 끝에 점을 사용하세요.

2, p.warming.help {배경:red;}는 클래스에 따뜻함과 도움말이 포함된 p 요소만 일치합니다. p에 따뜻함과 기타 요소가 포함되어 있으면 일치할 수 없습니다. 실제로 브라우저는 해당 요소의 고유성을 확인하지 않습니다. 하지만 이렇게 하면 dom

4, 속성 선택기: h1[class] {...}

h1[class=''] 작성이 더 어려워집니다. {...} 완전 일치

h1[class~=''] {...} 부분 일치 [class^=''] [class$ start with ='']는 무엇으로 끝나나요? class*=''] 모든 요소 포함

*[lang|='en']en과 같거나 en으로 시작하는 lang 속성을 선택하는 특정 속성 선택기 -

5, 하위 요소 선택: h1>strong; 인접한 형제 요소 h1+p를 선택합니다(h1과 p는 공통 상위 요소를 갖고 마지막으로 p를 선택합니다). 링크 의사 클래스: 방문하지 않은 링크: 링크: 방문함. (둘 다 정적임), <body link='' vlink=''>

동적 의사 클래스: focus.:focus, mouseover:hover, 활성화: 활성(동적 의사- 클래스는 모든 요소에 사용 가능)

권장되는 의사 클래스 순서: link-visited-focus-hover-active. 오해하기 쉬운 첫 번째 하위 요소(:first-child)는 모두 첫 번째 하위 요소(다음 예에서 첫 번째 하위 요소인 요소에는 첫 번째 p, 첫 번째 li 및 Strong 및 em이 포함됩니다).

&lt;p&gt;
    &lt;p&gt;helooo&lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;111&lt;/li&gt;
        &lt;li&gt;&lt;strong&gt;222&lt;/strong&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;p&gt;
        &lt;em&gt;333&lt;/em&gt;
    &lt;/p&gt;
&lt;/p&gt;

로그인 후 복사

*:lang(fr){color:red;}와 같이 언어(:lang())에 따라 선택하면 모든 프랑스어 요소가 빨간색으로 변합니다.

의사 요소 선택기: 첫 번째 문자: 첫 번째 문자, 사용자 에이전트는 의사 요소 <p:first-letter>;

첫 번째 줄: 첫 번째 줄

전후:전:후.

위 내용은 꼭 읽어야 할 CSS 권위 있는 가이드 노트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.