ATOZ CSS Screencast : CSS 의사 요소-CSS 튜토리얼-php.cn

AtoZ CSS Screencast: CSS Pseudo Elements

코어 포인트

CSS 의사 요소는 HTML 코드에없는 페이지의 요소이며 다른 요소에 적용되는 CSS 스타일을 사용하여 작동 할 수 있습니다.

css의 및 pseudo-elements는 텍스트, 이미지, 속성 값 및 카운터를 포함하여 페이지 컨텐츠를 생성하는 데 사용될 수 있습니다. 또한 최소한의 마킹으로 복잡한 모양을 만드는 데 사용될 수 있습니다.

CSS의 다양한 의사 요소에는 , , , , 및

가 포함됩니다. 요소의 특정 부분을 스타일링하고 요소의 내용 전후에 컨텐츠를 삽입하고 블록 레벨 요소의 첫 번째 글자 또는 첫 번째 줄을 스타일링하는 데 사용될 수 있습니다. :before :after 비디오 설명

(플레이어로드 ...)이 비디오는 ATOZ CSS 시리즈의 일부입니다. 여기에서 시리즈에서 다른 콘텐츠를 찾을 수 있습니다.

:first-line 텍스트 레코드 :first-letter CSS Pseudo Element는 HTML 코드에 표시되지 않는 페이지의 요소입니다. :selection 그들은 다른 요소에 적용되는 모든 CSS 스타일로 작동 할 수 있습니다. :before > 두 가지 특수 의사 요소 (:after 및 )는 CSS에서 페이지 컨텐츠를 생성하고 잠재적 인 사용 사례가 많은 데 사용될 수 있습니다.

이 섹션에서는 다음과 같이 배울 것입니다

5 개의 다른 의사 요소 CSS에서 텍스트, 이미지 속성 값 및 카운터를 생성합니다. 최소한의 마크 업으로 복잡한 모양을 만드는 방법 pseudo element

CSS에는 5 개의 의사 요소가 있습니다 :

:before :after

이들은 이중 콜론으로 의사 급과 구별되지만 단순화를 위해 일반적으로 CSS에서 단일 콜론을 사용하여 작성됩니다.

자리 표시 자 텍스트 블록에 대한 긴 참조가 있습니다. 텍스트가 개혁 된 후에도 적용되는

를 사용하여 텍스트의 첫 줄의 색상을 변경할 수 있습니다. 플로팅 및 더 큰 글꼴 크기로

를 사용하여 선택한 텍스트의 색상을 변경할 수도 있습니다.

나는

및 pseudo-elements를 사용하여 블록 참조 전후에 큰 따옴표를 추가 할 수 있습니다. 텍스트는

속성에서 생성 된 다음 CSS 스타일을 사용하여 원하는 효과를 얻을 수 있습니다.

컨텐츠 생성

및 pseudo-elements를 사용하면 페이지에 다양한 컨텐츠를 추가 할 수 있습니다.

우리는 페이지에 텍스트 내용을 추가하는 방법을 보았지만 이미지, 속성 값, 카운터 또는 빈 문자열을 추가 할 수도 있습니다.

이미지를 추가하는 것은 를 사용하여 배경 이미지를 추가하는 것과 유사합니다. 여기에서 를 속성의 값으로 사용하십시오. 실제로 에 대한 빈 문자열을 만들어 배경 이미지를 사용하고 의사 요소에 액세스하는 것을 선호합니다. 이것은 ,

및 url()와 같은 모든 일반적으로 사용되는 속성을 사용할 수 있으므로 이미지를보다 제어 할 수 있습니다. url() content 속성을 사용하여 HTML 속성의 값을 페이지에 주입 할 수도 있습니다. 인쇄 스타일 시트를 만들 때 링크의 URL을 출력하여 페이지에서 읽을 수 있도록 다음 코드 스 니펫을 추가하고 싶습니다. content 내부 링크 또는 해시 링크가 아닌 링크에 대한 링크 텍스트 다음에 링크가 추가됩니다. background-position 컨텐츠를 생성하는 마지막 특별한 경우는 삽입 카운터 변수의 값입니다. 법적 이용 약관의 복잡한 목록을 번호 매기기에 매우 유용하다는 것을 알았습니다. background-repeat 여기에 일련의 타이틀이 있으며 아래는 일련의 중첩 목록입니다. 각 장 제목에 숫자가 있고 각 목록 항목은 각 장마다 자식 번호입니다. background-size

각

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

로그인 후 복사

에 대해 "섹션"카운터를 증가시킵니다. 각 장 제목 이전에 각 목록 항목 앞에서 항목 카운터의 값을 출력합니다. 카운터 사이에 추가 문자열을 추가하여 복잡한 번호 매기기 시스템을 생성 할 수 있습니다. 이 방법의 단순화 된 형태는 목록에서 숫자 또는 총알 스타일을 제어하는 데 사용될 수 있습니다.

content

<<> 모양

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

로그인 후 복사

<🎜 🎜> 페이지의 각 요소에는 두 개의 "추가"요소가있을 수 있고 선호도에 따라 스타일을 유지할 수 있으므로 다양한 복잡한 모양을 만들 수 있습니다.

데모 예제에 대해 생각하면서 CSS 트릭의 모양에 대한 언급이 눈에 띄고 단계별로 작동하는 방법을 소개합니다. 하나의 요소로 음과 양 기호를 만들어 봅시다.

상자부터 시작하여

를 사용하여 원으로 변환 할 수 있습니다. 원의 높이와 동일한

를 사용하여 두 개의 색 반사를 만들 수 있습니다. 의사 요소가있는 두 개의 원을 만들고 <🎜 🎜>에 배치하여 두 가지 점이 생성됩니다. 반원형과 일치하는 경계를 사용하여 기호의 두 개의 원형 엔드 포인트를 만들 수 있습니다. 당신이 나에게 물어 보면, 그것은 멋지다.

나는 pseudo-elements를 사용하는 것을 좋아합니다.

h2 <<> CSS 의사 요소에 대한 자주 질문

a[href]:not([href*="#"]):after {
  content: attr(href);
}

로그인 후 복사

다른 유형의 CSS 유사 요소는 무엇입니까?

CSS 의사 요소는 요소의 특정 부분을 스타일링하는 데 사용됩니다. <🎜 🎜>,

, <🎜 🎜>,

, ::before, <🎜 🎜>, <🎜 ::after, ::first-letter 및 ::first-line를 포함한 여러 유형의 의사 요소가 있습니다. 각 유사 요소는 요소의 다른 부분을 대상으로합니다. 예를 들어, <🎜 🎜> 및 ::selection는 요소 컨텐츠 전후에 컨텐츠를 삽입하는 데 사용되며 <🎜 🎜> 및 ::backdrop는 블록 레벨 요소의 첫 번째 글자 또는 첫 번째 줄을 스타일링하는 데 사용됩니다. ::placeholder <<> ::before 및 <🎜 🎜> pseudo-elements를 사용하는 방법은 무엇입니까? ::after <🎜 🎜> <<> 및 ::first-letter pseudo elements는 요소 컨텐츠 전후에 컨텐츠를 삽입하는 데 사용됩니다. 그것들은 종종 아이콘을 추가하는 것과 같은 장식 목적으로 사용됩니다. 이 의사 요소를 사용하려면 ::first-line 속성을 지정해야합니다. 예를 들어 단락 전에 하트 아이콘을 추가하려면 다음 코드를 사용할 수 있습니다.

pseudo elements를 사용하여 양식 입력을 스타일링 할 수 있습니까?

예, 의사 요소를 사용하여 양식 입력을 스타일링 할 수 있습니다. 그러나 모든 형태의 입력이 의사 요소를 사용하여 스타일을 지정할 수있는 것은 아닙니다. 예를 들어, <<<> pseudo element는 입력 필드의 자리 표시 자 텍스트를 스타일링하는 데 사용될 수 있습니다. 예는 다음과 같습니다. `::before` 의사 요소를 사용하여 단락의 첫 글자를 스타일링하는 방법은 무엇입니까? `::after` 당신은 <🎜 🎜> pseudo element를 사용하여 블록 레벨 요소의 첫 글자를 스타일링 할 수 있습니다. 이것은 일반적으로 이니셜을 만드는 데 사용됩니다. 예는 다음과 같습니다.

같은 요소에서 여러 의사 요소를 사용할 수 있습니까?

예, 동일한 요소에서 여러 의사 요소를 사용할 수 있습니다. 예를 들어, 동일한 요소에서 ::before 및 ::after를 사용하여 컨텐츠 전후에 컨텐츠를 삽입 할 수 있습니다. 그러나 의사 요소의 순서가 있다는 것을 기억하는 것이 중요합니다. pseudo element는 항상 content pseudo element 전에 삽입됩니다.

모든 브라우저가 의사 요소를 지원합니까?

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

로그인 후 복사

대부분의 최신 브라우저는 의사 요소를 지원합니다. 그러나 일부 브라우저의 이전 버전은 모든 의사 요소를 지원하지 않을 수 있습니다. 의사 요소를 사용하기 전에 브라우저 호환성을 확인하는 것이 가장 좋습니다.

의사 요소와 의사 클래스의 차이점은 무엇입니까?

의사 요소와 의사 클래스는 특정 조건에 따라 요소에 스타일을 적용하는 데 사용됩니다. 그러나 다른 목적으로 사용됩니다. 의사 클래스는 마우스가 마우스 위로 떠오르거나 초점을 얻을 때와 같은 특정 상태에있을 때 스타일을 설정하는 데 사용됩니다. 반면, 의사 요소는 요소의 특정 부분을 스타일링하는 데 사용됩니다.

JavaScript와 함께 의사 요소를 사용할 수 있습니까? ::placeholder 의사 요소는 DOM의 일부가 아니므로 JavaScript를 사용하여 직접 액세스하거나 조작 할 수 없습니다. 그러나 JavaScript를 사용하여 상위 요소의 스타일을 변경하여 의사 요소에 적용되는 스타일을 변경할 수 있습니다.

pseudo element를 사용하는 방법은 무엇입니까?

`::selection` 의사 요소는 사용자가 선택한 텍스트의 모양을 변경하는 데 사용됩니다. 예를 들어, 선택한 텍스트의 배경색과 텍스트 색상을 변경할 수 있습니다. 예는 다음과 같습니다.

pseudo elements에 애니메이션 할 수 있습니까?

예, CSS 애니메이션 또는 전환을 사용하여 의사 요소를 애니메이션 할 수 있습니다. 그러나 모든 속성이 애니메이션이 될 수있는 것은 아닙니다. 예를 들어, 의사 요소의 불투명도 또는 변형을 애니메이션 할 수 있지만 ::selection 속성을 애니메이션 할 수는 없습니다.

위 내용은 ATOZ CSS Screencast : CSS 의사 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!