앞과 뒤의 의사 요소 이해하기
캐스 케이 딩 스타일 시트 (CSS)는 주로 HTML 마크 업에 스타일을 적용하기위한 것이지만, 문서에 여분의 마크 업을 추가하는 것이 중복되거나 불가능한 경우도 있습니다. 실제로 CSS에 방해없이 추가 마크 업을 추가 할 수있는 기능이 있습니다 실제 문서, 즉 의사 요소.
당신은이 용어에 대해 들어 봤습니다. 특히 자습서 중 일부를 따라 왔을 때.
실제로 CSS로 분류 된 몇 가지 CSS 제품군이 있습니다. 의사 요소 ~와 같은 :첫 줄, :첫 편지, ::선택, :전에 과 :후. 그러나이 기사에서는 우리의 범위를 :전에 과 :후, “의사 요소” 여기에서는 특별히 두 가지를 모두 참조 할 것입니다. 우리는이 주제를 기초부터 살펴볼 것입니다..
구문 및 브라우저 지원
그만큼 의사 요소 이후 실제로 주위에있다. CSS1, 하지만 :전에 과 :후 우리가 여기에서 토론하고있는 것은 CSS2.1. 처음에는 의사 요소 구문에 단일 콜론을 사용하면 웹이 진화하면서 CSS3에서 의사 요소 더블 콜론을 사용하도록 개정 ::전에 & ::후 - 그것과 구별하기 가상 클래스 (즉,. : 마우스 오버, :유효한, 등등).
그러나 단일 콜론 형식이나 이중 콜론 형식을 사용하더라도 브라우저는 여전히이 중 하나를 인식합니다. Internet Explorer 8은 단일 콜론 형식 만 지원하므로 더 넓은 브라우저 호환성을 원한다면 싱글 콜론을 사용하는 것이 더 안전합니다.
그것은 무엇을 하는가??
즉, 의사 요소 여분의 요소를 삽입합니다. 전에 또는 후 내용의 요소이므로 두 요소를 모두 추가 할 때 다음과 같은 마크 업과 기술적으로 동일합니다..
:전에 이 주요 내용. :후
그러나 이러한 요소는 문서에서 실제로 생성되지 않습니다. 그들은 여전히 표면에 표시되어 있지만 문서 소스에서 찾을 수 없으므로 사실상 모조품 집단.
의사 요소 사용하기
사용 의사 요소 비교적 쉽다. 다음 구문 선택자 : 이전 요소를 추가합니다. 전에 이 구문을 사용하는 동안 내용의 selector 선택기 : 이후 그 뒤에 내용을 추가하고 그 안에 내용을 추가하면 함유량 재산.
예를 들어, 아래 스 니펫은 앞뒤에 따옴표를 추가합니다. 블록 쿼터.
blockquote : before content : open-quote; blockquote : after content : close-quote;
의사 요소 스타일 지정하기
가짜 요소 임에도 불구하고 의사 요소 실제로 “레알” 요소; 색상 변경, 배경 추가, 글꼴 크기 조정, 텍스트 내부 정렬 등과 같은 스타일 선언을 추가 할 수 있습니다..
blockquote : before content : open-quote; 글꼴 크기 : 24pt; 텍스트 정렬 : 가운데; 선 높이 : 42px; color : #fff; 배경 : #ddd; 왼쪽으로 뜨다; 위치 : 상대적; 상단 : 30px; blockquote : after content : close-quote; 글꼴 크기 : 24pt; 텍스트 정렬 : 가운데; 선 높이 : 42px; color : #fff; 배경 : #ddd; float : 오른쪽; 위치 : 상대적; 하단 : 40px;
측정 기준 지정
생성 된 요소는 기본적으로 인라인 수준 요소이므로 높이와 너비를 지정하려고 할 때 먼저이를 블록 요소로 정의해야합니다. 표시 : 블록 선언.
blockquote : before content : open-quote; 글꼴 크기 : 24pt; 텍스트 정렬 : 가운데; 선 높이 : 42px; color : #fff; 배경 : #ddd; 왼쪽으로 뜨다; 위치 : 상대적; 상단 : 30px; border-radius : 25px; / ** 블록 요소로 정의 ** ** / display : block; 높이 : 25px; 너비 : 25px; blockquote : after content : close-quote; 글꼴 크기 : 24pt; 텍스트 정렬 : 가운데; 선 높이 : 42px; color : #fff; 배경 : #ddd; float : 오른쪽; 위치 : 상대적; 하단 : 40px; border-radius : 25px; / ** 블록 요소로 정의 ** ** / display : block; 높이 : 25px; 너비 : 25px;
배경 이미지 첨부
또한 일반 텍스트가 아닌 이미지로 내용을 대체 할 수 있습니다. 비록 함유량 속성은 url () 문자열을 사용하여 이미지를 삽입하지만 대부분의 경우 나는 배경 첨부 된 이미지를보다 잘 제어 할 수있는 속성.
blockquote : before content : ""; 글꼴 크기 : 24pt; 텍스트 정렬 : 가운데; 선 높이 : 42px; color : #fff; 왼쪽으로 뜨다; 위치 : 상대적; 상단 : 30px; border-radius : 25px; 배경 : url (images / quotationmark.png) -3px -3px #ddd; 디스플레이 : 블록; 높이 : 25px; 너비 : 25px; blockquote : after content : ""; 글꼴 크기 : 24pt; 텍스트 정렬 : 가운데; 선 높이 : 42px; color : #fff; float : 오른쪽; 위치 : 상대적; 하단 : 40px; border-radius : 25px; 배경 : url (images / quotationmark.png) -1px -32px #ddd; 디스플레이 : 블록; 높이 : 25px; 너비 : 25px;
그러나 위의 스 니펫에서 볼 수 있듯이 우리는 여전히 함유량 속성 및 이번에는 빈 문자열을 사용하십시오. 그만큼 함유량 재산은이다 요구 사항 항상 적용되어야합니다. 그렇지 않으면 의사 요소 작동하지 않을 것이다 도대체 무엇이.
가상 클래스와 결합
그들은 다른 종류의 의사, 우리는 가상 클래스 와 함께 의사 요소 하나의 CSS 규칙에서 함께 사용하면됩니다. 예를 들어 인용 부호 배경 우리가 마우스를 가리면 조금 어두워집니다. 블록 쿼터.
blockquote : 호버 : 뒤에, blockquote : 호버 : before (배경색 : # 555;
전환 효과 추가
그리고 우리는 전이 우아한 색 변환 효과를 내기 위해.
전환 : 모두 350ms; -o-transition : 모두 350ms; -moz-transition : 모두 350ms; -webkit-transition : 모두 350ms;
불행히도 전환 효과는 최신 버전의 Firefox에서만 작동하는 것으로 보입니다. 전환 특성이 적용될 수 있도록 더 많은 브라우저가 따라 잡기를 바랍니다. 의사 요소 미래에.
- 데모
- 소스 다운로드
더 많은 영감
영감을 얻기 위해 웹 디자인에 대한 아이디어를 줄 수있는 세 가지 멋진 예제를 선택했습니다..
매혹적인 그림자
이 자습서에서는 Paul Underwood가 더 현실적이고 매혹적인 그림자 효과를 만드는 방법을 설명했습니다. :전에 과 :후 의사 요소. 둘 다 절대적으로 배치되어 부정 Z- 색인 값.
누적 이미지 효과
사용 의사 요소 마크 업상의 단일 이미지로만 지저분한 누적 이미지 효과를 만들 수도 있습니다. 그만큼 의사 요소 는 네거티브를 사용하여 실제 이미지의 뒷면에 누적 이미지의 환영을 생성하는 데 사용됩니다 Z- 색인.
결론
피세도 요소 간단하게 “시원한” 궁극적으로 사용할 수 있습니다. 2 개의 상여 성분 실제 HTML 구조를 전혀 방해하지 않고 추가하는 모든 요소에 대해, 그리고 나서 우리가 상상할 수있는 거의 모든 요소로 바꾸어줍니다..
실제로 몇 가지 개선 사항이 있습니다. 의사 요소 현재 작업중인 의사 요소 중첩 div :: before :: before content : "; 과 다중 의사 요소 div :: before (3) content : "; 미래의 웹 디자인 실습에서 훨씬 더 많은 가능성을 열 것입니다. 현재 브라우저에서 구현되는 동안 기다려 보겠습니다..
