CSS 의사 요소 : 후 : 의사 요소 글꼴 및 아이콘 전에 CSS의 사용 :: 전 :: 후

CSS의 의사 요소에 :: 전 :: 후

 

CSS의 :: 널리 우리의 일상 개발에 사용되었으며, 그들이 할 수 후 : 우리의 문서 구조의 사용이 더 간결하기 전에. 여전히 특히 이해하지 후에 그러나 많은 사람들이 :: 및 ::, 정확히 무엇을하기 전에하는거야? 사용 방법? 언제 그들을 사용해야합니까? 저자는 의사 요소의 사용에 약간의 이해와 경험을 요약 한 것입니다.

첫째, 개념 :

1. 정의

The CSS ::before(::after) 의사 요소는  선택한 요소의 가상 첫 번째 (마지막) 아이를 일치합니다. 일반적으로 사용하여 요소에 화장품 콘텐츠를 추가하는 데 사용되는  content CSS 속성을. 이 요소는 기본적으로 인라인입니다.

정의에 의하면 우리는 알고 :: 가상 요소를 매칭 한 후, 주로 현재 내용의 장식 요소를 증가하는 데 사용됩니다 : 전. 그의 쇼의 내용은 "그 자체입니다 content기본 인라인 요소입니다."

CSS의 핵심 목적을 도입, 또는 주문에 후 : 사실 전 :: 의미 달성했다. 우리의 실제 개발 시간에 종종 약간의 효과를 달성하기 위해, 문서의 노드의 수를 실제 컨텐츠를 생성,이 경험을 가지고 같은 가입하거나 텍스트의 스타일을 지원 :

<스타일> 
    UL { 
        목록 스타일 : 없음; 
    } 
    리튬 { 
        디스플레이 인라인; 
    } 
</ 스타일> 
<탐색> 
    <UL> 
        <LI> HTML 5 </ 리> 
        <LI> | </ 리> 
        <LI> CSS3 </ 리> 
        <LI> | </ 리> 
        <LI> 자바 스크립트 </ 리> 
    </ UL> 
</ NAV>

때이 같은 쇼 :

물론,이의 예를 들어 "|"가 표시되어있는 경우에만 휴식 문자, 아니 실용적인 의미, 그가 단지 방금 만든 장식이이 문서 내에서 생성해서는 안 된 리튬 요소. 그런 다음 그들에게 대신 그것의 스타일 (CSS)에 의해 갈 수없는 노드를 작성?

이러한 요구를 들어,이 전에,이 두 의사 요소 장식의 현재 요소에 해당 후 :: :: 태어나되었다, 그들은 노드가 DOM 트리에 표시되지만 디스플레이에 노드하지 않습니다하지 않습니다 효과. 우리가 사용하는 :: 전 :: 코드의 상단에 재건 후 :

<스타일> 
    UL { 
        목록 스타일 : 없음; 
    } 
    리튬 { 
        디스플레이 인라인; 
    } 
    리 :하지 (: 마지막으로 아이) : {후 
        내용 : "|"; 
    } 
</ 스타일> 
<탐색> 
    <UL> 
        <LI> HTML 5 </ 리> 
        <LI> CSS3 </ 리> 
        <LI> 자바 스크립트 </ 리> 
    </ UL> 
</ 탐색>

디스플레이는 변경되지 않지만, 문서 구조는 더욱 분명해진다.

2.

:: 전 :: 매우 간단한 사용 후, 그것은 한 후 요소에,이 두 가지 요소는 기본적으로 인라인 요소 두 가지 요소의 존재로 간주 될 수 있지만, 우리는 자신의 스타일에 추가 할 수 있습니다. :: :: 사용시주의를 지불해야 전후에, 당신이 그렇지 않으면이 두 의사 요소가 표시되지, 컨텐츠를 설정해야합니다. 컨텐츠 속성, 내용은 그들에 포함 된 의사 요소로한다. 예를 들면 :

<스타일> 
    P : {전에 
        내용 : "H"; 
    P : {후 
        콘텐츠 "D"; 
    } 
  </ 스타일> 
  <P> WORL여보세요 </ P>

완전한 안녕하세요을 표시합니다.

:: 전 :: 가상 요소가에, 문서의 실제 요소의 위치에 영향을 미치지 않습니다 후 : 영향을받지 않습니다 마지막 아이 의사 클래스 선택기 : 첫째 자녀 나.

3. 운영

:: 전 :: 가상 노드 후, 오히려 앞의 예에서 해당 노드 개체를 찾을 수 documont가 아닌 노드, 것보다, 우리는 JS 다음을 수행 코드 :

CONSOLE.LOG (document.querySelector ( "UL"). childNodes에);

단 NodeList를 오브젝트 3 개 노드 및 두 개의 더미 소자를 얻을 목적으로되지 않는다. :: 전 :: 후가 아닌 실제 노드 때문에, 그래서 우리가 그들을하지 않았다, 클릭 수 및 기타 사용자 설정 이벤트를 전송하지 않습니다. :: 전 :: 후, 이벤트를 설정할뿐만 아니라, 사용자 이벤트를 캡처하고 의사 요소에 이벤트 "거품"요소가있는 것은 아니지만. 그 이유 왜 따옴표에서 "거품"단어, 그가 정말 버블 링되지 않았기 때문에, 더 정확하게 :: 및 :: 이벤트가 이동 요소를 캡처 할 수 있도록 한 후, srcElement 객체 이벤트 요소가되기 전에 의사 요소 오히려 의사 요소 자체보다.

문서를 획득하며 노드 오브젝트 :: 후 :: 대응 전에 있지만 같은 스타일 속성 CSS의 인터페이스에 의해 획득 될 수있다 수 없습니다

window.getComputedStyle ( 
    document.querySelector ( '리'), '전' 
)

CSSStyleDeclaration의 오브젝트를 돌려, 당신은 현재의 스타일 값을 얻을 수 있습니다.

:에서 재판 https://www.cnblogs.com/laden666666/p/6089880.html

 

이미지 글꼴은 무엇입니까?

---

비슷한 사진 글꼴은 사용하는 동안, 스타일을 변경할 수 있으며, 스타일 사진이 때로는 재 설계를 할 필요가 변경 (색상, 기울기)

 

 

어떻게 아이콘 글꼴을 사용 하는가?

---

구체적인 방법은 이하 IcoMoon 주어진다

1, 개방 IcoMoon 사이트, IconMoon 앱을 클릭합니다.

　

2, 특정 아이콘 인터페이스를 연 후, 당신은 또한 선택할 수있는 더 많은 아이콘를보기 라이브러리에서 아이콘을 추가 할 기본 아이콘 아래에, 그가주는 아이콘을 사용하여 생성 자신의 아이콘을 추가 할 수 있습니다 (무료 지불했다).

3.이 생성 폰트 다운로드의 오른쪽 하단 모서리가 될 것이다, 글꼴은 현재 선택의 인터페이스 아이콘을 생성하고 생성, 당신은 또한 관련 설정을 다운로드 할 수 있습니다 (예 : 지원 클래스를 보자 IE6 / 7의).

다운로드가 완료된 후 4, 다음과 같은 파일이있을 것이다,이 파일이 가장 잘 보존 임의로 삭제되지 않습니다.

(5), 다음 (당신은 또한 글꼴 아이콘 CSS 파일 --style.css 자체를 사용하여 관련 콘텐츠를 볼 수 있습니다) 특정 사용 아이콘 글꼴을 제공

복사 (1), 프로젝트에 글꼴 폴더가 일부 브라우저는 형식을 지원하기 때문에 (직접 복사 할 수 있습니다 기본적으로 모두 동일하기 때문에 여기에 코드가 메모리를 필요로하지 않는다) 동일하지 않습니다, 글꼴, 여러 파일의 이유 도입을 선언　　

           글꼴 - 스타일 : 정상; 
       }

 

(2), 폰트를 사용　

.IconMoon { 

           글꼴 -family : 'icomoon' ; 

       }

(3) 특히, 대응하는 아이콘 표시

유사 요소를 사용 CSS 선택기 전에 첨가되는

<LI> <스팬 클래스 = " 아이콘 재택"> 홈 아이콘 </ SPAN> </ 리> 선행 이것으로 

<LI> <스팬 클래스 = "아이콘-smile2">있는 앞 smile2 아이콘 </ SPAN> </ 리> 

<LI> <스팬 클래스 = "아이콘-tongue2">있는 FRONT A tongue2 아이콘 </ SPAN> </ 리>에서 

<LI> <스팬 클래스 = "아이콘-SAD2"> 초에서 SAD2 아이콘 </ SPAN> </ 리> 

<LI> <스팬 클래스 = "아이콘-윙크">이 전방 아이콘을 윙크 </ SPAN> </ 리>

에 해당하는 CSS 코드 :

.icon 가정 : {전 / * 내용的值是对应的图标代码* / 
           내용 : "\의 E900" ; 
       } 
       .icon - smile2 : {전에 
           내용 : "\ e9e2" ; 
       } 

       .icon - tongue2 : {전에 
           내용 : "\ e9e4" ; 
       } 

       .icon - SAD2 : {전에 
          내용 : "\ e9e6" ; 
       } 

       .icon - 윙크 : {전에 
           내용 : "\ e9e7" ; 

       }

 

전에 말했듯이 (4),이 아이콘의 성격에 글꼴, 그래서 당신은 쉽게 색상, 크기를 변경할 수 있습니다, 그림자 효과를 캐스팅　

 

가능한 코드

우리는 새로운 글꼴 아이콘 또는 빼기 아이콘을 추가 할 때 6은, 단순히 IconMoon 앱 페이지에 다시 웹 사이트를 연 다음 우리는 글꼴 디렉토리에 파일을 다운로드하기 전에 가져 오기 아이콘 selection.json 것입니다 클릭 당신은 다시 이전 작업을 기초로 선택하고 사용하기 매우 편리 할 수 ​​있습니다.

 

위 관련 중국어 PHP 웹 관련 콘텐츠의 요약입니다.

 

CSS의 :: 널리 우리의 일상 개발에 사용되었으며, 그들이 할 수 후 : 우리의 문서 구조의 사용이 더 간결하기 전에. 여전히 특히 이해하지 후에 그러나 많은 사람들이 :: 및 ::, 정확히 무엇을하기 전에하는거야? 사용 방법? 언제 그들을 사용해야합니까? 저자는 의사 요소의 사용에 약간의 이해와 경험을 요약 한 것입니다.

첫째, 개념 :

1. 정의

The CSS ::before(::after) 의사 요소는  선택한 요소의 가상 첫 번째 (마지막) 아이를 일치합니다. 일반적으로 사용하여 요소에 화장품 콘텐츠를 추가하는 데 사용되는  content CSS 속성을. 이 요소는 기본적으로 인라인입니다.

정의에 의하면 우리는 알고 :: 가상 요소를 매칭 한 후, 주로 현재 내용의 장식 요소를 증가하는 데 사용됩니다 : 전. 그의 쇼의 내용은 "그 자체입니다 content기본 인라인 요소입니다."

CSS의 핵심 목적을 도입, 또는 주문에 후 : 사실 전 :: 의미 달성했다. 우리의 실제 개발 시간에 종종 약간의 효과를 달성하기 위해, 문서의 노드의 수를 실제 컨텐츠를 생성,이 경험을 가지고 같은 가입하거나 텍스트의 스타일을 지원 :

<스타일> 
    UL { 
        목록 스타일 : 없음; 
    } 
    리튬 { 
        디스플레이 인라인; 
    } 
</ 스타일> 
<탐색> 
    <UL> 
        <LI> HTML 5 </ 리> 
        <LI> | </ 리> 
        <LI> CSS3 </ 리> 
        <LI> | </ 리> 
        <LI> 자바 스크립트 </ 리> 
    </ UL> 
</ NAV>

때이 같은 쇼 :

물론,이의 예를 들어 "|"가 표시되어있는 경우에만 휴식 문자, 아니 실용적인 의미, 그가 단지 방금 만든 장식이이 문서 내에서 생성해서는 안 된 리튬 요소. 그런 다음 그들에게 대신 그것의 스타일 (CSS)에 의해 갈 수없는 노드를 작성?

이러한 요구를 들어,이 전에,이 두 의사 요소 장식의 현재 요소에 해당 후 :: :: 태어나되었다, 그들은 노드가 DOM 트리에 표시되지만 디스플레이에 노드하지 않습니다하지 않습니다 효과. 우리가 사용하는 :: 전 :: 코드의 상단에 재건 후 :

<스타일> 
    UL { 
        목록 스타일 : 없음; 
    } 
    리튬 { 
        디스플레이 인라인; 
    } 
    리 :하지 (: 마지막으로 아이) : {후 
        내용 : "|"; 
    } 
</ 스타일> 
<탐색> 
    <UL> 
        <LI> HTML 5 </ 리> 
        <LI> CSS3 </ 리> 
        <LI> 자바 스크립트 </ 리> 
    </ UL> 
</ 탐색>

디스플레이는 변경되지 않지만, 문서 구조는 더욱 분명해진다.

2.

:: 전 :: 매우 간단한 사용 후, 그것은 한 후 요소에,이 두 가지 요소는 기본적으로 인라인 요소 두 가지 요소의 존재로 간주 될 수 있지만, 우리는 자신의 스타일에 추가 할 수 있습니다. :: :: 사용시주의를 지불해야 전후에, 당신이 그렇지 않으면이 두 의사 요소가 표시되지, 컨텐츠를 설정해야합니다. 컨텐츠 속성, 내용은 그들에 포함 된 의사 요소로한다. 예를 들면 :

<스타일> 
    P : {전에 
        내용 : "H"; 
    P : {후 
        콘텐츠 "D"; 
    } 
  </ 스타일> 
  <P> WORL여보세요 </ P>

완전한 안녕하세요을 표시합니다.

:: 전 :: 가상 요소가에, 문서의 실제 요소의 위치에 영향을 미치지 않습니다 후 : 영향을받지 않습니다 마지막 아이 의사 클래스 선택기 : 첫째 자녀 나.

3. 운영

:: 전 :: 가상 노드 후, 오히려 앞의 예에서 해당 노드 개체를 찾을 수 documont가 아닌 노드, 것보다, 우리는 JS 다음을 수행 코드 :

CONSOLE.LOG (document.querySelector ( "UL"). childNodes에);

단 NodeList를 오브젝트 3 개 노드 및 두 개의 더미 소자를 얻을 목적으로되지 않는다. :: 전 :: 후가 아닌 실제 노드 때문에, 그래서 우리가 그들을하지 않았다, 클릭 수 및 기타 사용자 설정 이벤트를 전송하지 않습니다. :: 전 :: 후, 이벤트를 설정할뿐만 아니라, 사용자 이벤트를 캡처하고 의사 요소에 이벤트 "거품"요소가있는 것은 아니지만. 그 이유 왜 따옴표에서 "거품"단어, 그가 정말 버블 링되지 않았기 때문에, 더 정확하게 :: 및 :: 이벤트가 이동 요소를 캡처 할 수 있도록 한 후, srcElement 객체 이벤트 요소가되기 전에 의사 요소 오히려 의사 요소 자체보다.

문서를 획득하며 노드 오브젝트 :: 후 :: 대응 전에 있지만 같은 스타일 속성 CSS의 인터페이스에 의해 획득 될 수있다 수 없습니다

window.getComputedStyle ( 
    document.querySelector ( '리'), '전' 
)

CSSStyleDeclaration의 오브젝트를 돌려, 당신은 현재의 스타일 값을 얻을 수 있습니다.

:에서 재판 https://www.cnblogs.com/laden666666/p/6089880.html

 

이미지 글꼴은 무엇입니까?

---

비슷한 사진 글꼴은 사용하는 동안, 스타일을 변경할 수 있으며, 스타일 사진이 때로는 재 설계를 할 필요가 변경 (색상, 기울기)

 

 

어떻게 아이콘 글꼴을 사용 하는가?

---

구체적인 방법은 이하 IcoMoon 주어진다

1, 개방 IcoMoon 사이트, IconMoon 앱을 클릭합니다.

　

2, 특정 아이콘 인터페이스를 연 후, 당신은 또한 선택할 수있는 더 많은 아이콘를보기 라이브러리에서 아이콘을 추가 할 기본 아이콘 아래에, 그가주는 아이콘을 사용하여 생성 자신의 아이콘을 추가 할 수 있습니다 (무료 지불했다).

3.이 생성 폰트 다운로드의 오른쪽 하단 모서리가 될 것이다, 글꼴은 현재 선택의 인터페이스 아이콘을 생성하고 생성, 당신은 또한 관련 설정을 다운로드 할 수 있습니다 (예 : 지원 클래스를 보자 IE6 / 7의).

다운로드가 완료된 후 4, 다음과 같은 파일이있을 것이다,이 파일이 가장 잘 보존 임의로 삭제되지 않습니다.

(5), 다음 (당신은 또한 글꼴 아이콘 CSS 파일 --style.css 자체를 사용하여 관련 콘텐츠를 볼 수 있습니다) 특정 사용 아이콘 글꼴을 제공

복사 (1), 프로젝트에 글꼴 폴더가 일부 브라우저는 형식을 지원하기 때문에 (직접 복사 할 수 있습니다 기본적으로 모두 동일하기 때문에 여기에 코드가 메모리를 필요로하지 않는다) 동일하지 않습니다, 글꼴, 여러 파일의 이유 도입을 선언　　

           글꼴 - 스타일 : 정상; 
       }

 

(2), 폰트를 사용　

.IconMoon { 

           글꼴 -family : 'icomoon' ; 

       }

(3) 특히, 대응하는 아이콘 표시

유사 요소를 사용 CSS 선택기 전에 첨가되는

<LI> <스팬 클래스 = " 아이콘 재택"> 홈 아이콘 </ SPAN> </ 리> 선행 이것으로 

<LI> <스팬 클래스 = "아이콘-smile2">있는 앞 smile2 아이콘 </ SPAN> </ 리> 

<LI> <스팬 클래스 = "아이콘-tongue2">있는 FRONT A tongue2 아이콘 </ SPAN> </ 리>에서 

<LI> <스팬 클래스 = "아이콘-SAD2"> 초에서 SAD2 아이콘 </ SPAN> </ 리> 

<LI> <스팬 클래스 = "아이콘-윙크">이 전방 아이콘을 윙크 </ SPAN> </ 리>

에 해당하는 CSS 코드 :

.icon 가정 : {전 / * 내용的值是对应的图标代码* / 
           내용 : "\의 E900" ; 
       } 
       .icon - smile2 : {전에 
           내용 : "\ e9e2" ; 
       } 

       .icon - tongue2 : {전에 
           내용 : "\ e9e4" ; 
       } 

       .icon - SAD2 : {전에 
          내용 : "\ e9e6" ; 
       } 

       .icon - 윙크 : {전에 
           내용 : "\ e9e7" ; 

       }

 

전에 말했듯이 (4),이 아이콘의 성격에 글꼴, 그래서 당신은 쉽게 색상, 크기를 변경할 수 있습니다, 그림자 효과를 캐스팅　

 

가능한 코드

우리는 새로운 글꼴 아이콘 또는 빼기 아이콘을 추가 할 때 6은, 단순히 IconMoon 앱 페이지에 다시 웹 사이트를 연 다음 우리는 글꼴 디렉토리에 파일을 다운로드하기 전에 가져 오기 아이콘 selection.json 것입니다 클릭 당신은 다시 이전 작업을 기초로 선택하고 사용하기 매우 편리 할 수 ​​있습니다.

 

위 관련 중국어 PHP 웹 관련 콘텐츠의 요약입니다.