CSS 이해 ' 내용 ' 재산-CSS 튜토리얼-php.cn

Understanding the CSS 'content' Property

코어 포인트

css

및 pseudo elements와 함께 사용됩니다. , content, ::before, 문자열, , , , ::after 및 를 포함한 다양한 값을 지원합니다. normal 속성을 사용하여 텍스트, 인코딩 된 문자, 미디어 파일 및 카운터 값을 삽입 할 수 있습니다. 예를 들어, 함수는 지정된 속성의 값을 삽입하는 데 사용될 수 있습니다. counter 또는 attr 값은 open-quote 속성을 사용하여 개방 또는 닫힌 인용문을 생성합니다. 지정된 요소에서 열린 또는 닫힌 인용문을 제거하는 데 또는 값이 사용될 수 있습니다. url CSS initial 속성은 주로 inherit 및 pseudo elements와 함께 사용되지만 pseudo 요소와 함께 사용하여 목록 총알 또는 숫자의 모양을 사용자 정의 할 수 있습니다.
프론트 엔드 개발자라면 의사 요소와 CSS의 속성에 대해 들어 보았을 것입니다. 이 기사는 의사 요소에 대한 깊은 다이빙에 빠지지 않지만 개념에 익숙하지 않거나 빠른 검토가 필요한 경우 Smashing Magazine에 대한 Louis Lazaris의 기사를 확인하는 것이 좋습니다. content 이 기사는 attr() 속성에 중점을 둘 것입니다. CSS의
및 open-quote pseudo 요소와 함께 사용됩니다 (단일 결장 또는 이중 결장 구문과 함께 사용할 수 있음). 이 속성은 생성 된 컨텐츠를 웹 페이지에 삽입하는 데 사용되며 모든 주요 브라우저에서 완전히 지원됩니다. close-quote content no-open-quote 속성의 기본 구문 no-close-quote 속성의 구문은 다음과 같습니다. 여기에는 각 값이 포함되어 있습니다.
와 함께 content 이것은 단지 예일 뿐이며 나중에 자세히 소개됩니다. 다음 섹션에서는 ::before를 포함한 각 값에 대해 논의 할 것입니다. ::after ::marker value :

가 content로 설정되면 의사 요소가 생성되지 않습니다. 로 설정하면

및 pseudo-elements의 경우

로 계산됩니다. content content 이 방법은 이미 의사 요소를 정의하는 중첩 요소에 사용될 수 있지만 일부 컨텍스트에서 의사 요소를 무시하려고합니다. ::before 값 : ::after

이 값은 컨텐츠를 문자열로 설정하고 텍스트 내용이 될 수 있습니다. 라틴어가 아닌 문자를 사용하는 경우 문자를 인코딩해야합니다. 각 예를 살펴 보겠습니다. 다음 html을 고려하십시오 :

그런 다음 다음 css :

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

로그인 후 복사

여기서는 텍스트 내용을 목록 항목 중 하나에 삽입하고 인코딩 된 문자 (이 경우 저작권 기호)를 단락 요소에 삽입합니다.

문자열 값은 단일 또는 이중 인용문 일 수있는 인용문으로 동봉해야합니다.

<🎜 🎜> <<> 값 :

p::after {
  content: " (" attr(title) ")";
}

로그인 후 복사

값은 특정 매체를 표시하는 데 관심이있을 때 매우 편리합니다. 이미지와 같은 외부 리소스를 가리키면 할 수 있습니다. 어떤 이유로 자원이나 이미지를 표시 할 수없는 경우 무시되거나 일부 자리 표시자가 대신 사용됩니다. 이 값을 보여주는 몇 가지 코드를 살펴 보겠습니다.

<<> 이것은 html : <🎜 🎜>입니다 이것은 SitePoint의 Favicon과 일부 텍스트를 보여주는 CSS입니다. <uri> <<> value :

또는

<🎜 🎜> 이 값은 <uri> 속성과 함께 사용할 수있는 가장 복잡한 값입니다. 두 가지 다른 기능 중 하나로 작성됩니다. CSS 카운터에 대한 자세한 내용은이 기사를 확인하십시오. 그러나 여기에 간단한 개요가 있습니다. 첫 번째 함수의 경우

의 경우, 생성 된 텍스트는이 의사 요소 범위 내에서 지정한 이름의 가장 안쪽 카운터의 값입니다. 기본적으로 소수점으로 형식화되지만 로마 숫자로도 형식화 될 수도 있습니다.

다른 함수 <🎜

p::before {
  content: normal;
}

p::after {
  content: none;
}

로그인 후 복사

는 비슷하지만 가장 바깥 층에서 가장 안쪽 레이어까지 순서대로 지정된 이름 (첫 번째 매개 변수)을 가진 모든 카운터를 나타냅니다. 이 모든 값은 지정된 문자열 (두 번째 매개 변수)으로 분리됩니다. 카운터 변수의 이름을 <🎜 🎜>,

또는 <🎜 🎜>로 지정하면 선언이 무시됩니다.

다음은 카운터를 사용하는 방법의 예입니다.

<h2>Tutorial Categories</h2>
<ol>
  <li>HTML and CSS</li>
  <li class="new">Sass & Less</li>
  <li>JavaScript</li>
</ol>

<p class="copyright">SitePoint, 2015</p>

로그인 후 복사

이것은 css : <🎜 🎜>입니다
이것은 주문한 목록과 유사하게 생성 된 컨텐츠를 사용하여 항목을 번호로 제공합니다. 이 경우 주문 목록을 쉽게 사용할 수 있습니다. 이러한 유형의 카운터는 다른 요소 사이에 번호가 매겨 질 때 훨씬 더 편리합니다. <🎜 🎜> <<> 값 : counter() counters() 앞에서 언급했듯이 <,,> 함수는 지정된 속성의 값을 삽입합니다. 이는 유일한 매개 변수입니다. 관련 요소에 속성이 없으면 빈 문자열이 반환됩니다.
이것은 예입니다 : <🎜 🎜>
위의 HTML을 사용하면 다음 CSS는 링크 텍스트 옆의 브래킷에 content 속성 값을 표시합니다. counter() 이 트릭은 종종 인쇄 된 웹 페이지에 링크를 표시 할 수 있도록 인쇄 스타일 시트에 사용됩니다. counters()
<<> value :
또는 counter() <🎜 🎜>
가 이러한 값 중 하나로 설정되면 content 속성은 열린 또는 닫힌 인용문을 생성합니다. 일반적으로 요소와 함께 사용되지만 모든 요소와 함께 사용할 수 있습니다. 따라서 다음을 수행 할 수 있습니다 <q> <🎜 🎜> 값은 <🎜 🎜> pseudo element에만 적용됩니다 (이유는 명백합니다). <🎜 🎜>를 사용하고 동일한 요소에
값이 없으면 생성되지 않습니다. 아무것.
p::before { content: normal|counter|attr|string|open-quote|url|initial|inherit; }
로그인 후 복사
로그인 후 복사

<<> value : close-quote 또는 ::after <🎜 🎜> <🎜 🎜> ::before 값은 지정된 요소에서 열린 따옴표를 제거하고 <🎜 값은 닫힌 따옴표를 제거합니다. 이러한 값이 어떻게 유용 할 수 있는지 궁금 할 것입니다. 다음 html을 봅니다 : <🎜 🎜> open-quote 이전 단락에서 화자는 누군가를 인용하고 ( "현명한 사람 ..."),이 사람은 다른 사람을 인용합니다 ( "그 말 ..."). 따라서 우리의 인용문은 3 개의 레이어로 중첩됩니다. 구문 적 으로이 문제를 다루는 올바른 방법이 있습니다. 생성 된 컨텐츠를 사용하는 경우 인용문이 올바르게 중첩되도록 할 수있는 방법은 다음과 같습니다.
첫 번째 선택기는
속성을 사용하여 3 개의 레이어 깊이로 사용하려는 인용문의 유형을 정의합니다. 그런 다음 의사 요소를 사용하여 컨텐츠로 따옴표를 삽입합니다. 이것은 우리가 이전 섹션에서 한 것과 유사합니다. 그러나 어떤 이유로 우리가 인용문을 삽입하지 않고 두 번째 층을 무시하고 싶다면 어떨까요? 우리는 no-open-quote 및 no-close-quote 값을 사용하여 그것들을 무시할 수 있습니다 : .
<,>이 경우, 나는
라는 클래스를 인용문의 두 번째 레이어에 추가했습니다. 이렇게하면 인용문 중첩이 여전히 인식되지만 요소에 대한 인용문은 나타나지 않습니다. 따라서이 단락의 세 번째 인용문은 단일 곱슬 버팀대 대신 이중 곱슬 교정기를 갖습니다. no-open-quote <🎜 🎜> <<> 결론 no-close-quote
이 튜토리얼이
p::after { content: " (" attr(title) ")"; }
로그인 후 복사
로그인 후 복사
속성의 각 값과 다양한 시나리오에서이를 사용하는 방법을 더 잘 이해하는 데 도움이되기를 바랍니다.
CSS 내용 속성에 대한 <🎜 🎜> <<> FAQ (FAQ) <🎜

p::before { content: normal; } p::after { content: none; }
로그인 후 복사
로그인 후 복사
~~CSS 컨텐츠 속성이란 무엇이며 사용 방법은 무엇입니까?~~
CSS quotes 속성은 생성 된 컨텐츠를 페이지 레이아웃에 삽입 할 수있는 강력한 도구입니다. 그것은 일반적으로 및
pseudo elements와 함께 사용되며 HTML에 포함하는 대신 CSS를 통해 장식용 내용을 추가합니다. 예를 들어,
속성을 사용하여 블록 참조 주위에 따옴표를 삽입하거나 제목 앞에 장식 이미지를 추가 할 수 있습니다. 속성의 값은 문자열, URL, 카운터 또는 속성의 값일 수 있습니다. no-open-quote CSS 컨텐츠 속성은 및 ::before 이외의 요소와 함께 사용할 수 있습니까? ::after css 속성은 주로
및 pseudo elements와 함께 사용됩니다. 그러나 목록 항목의 태그 상자를 나타내는 content pseudo element와 함께 사용할 수 있습니다. 이를 통해 목록 총알 또는 번호의 모양을 사용자 정의 할 수 있습니다. ::before CSS 컨텐츠 속성을 사용하여 속성 값을 표시하는 방법은 무엇입니까? ::after css ::marker 특성은 함수를 사용하여 표시 할 수 있습니다. 예를 들어, 사용자가 실제 URL을 볼 수 있도록 링크의 속성 값을 표시하는 데 사용할 수 있습니다. 구문은
입니다.
CSS 컨텐츠 속성을 사용하여 이미지를 삽입 할 수 있습니까?
예, CSS
특성을 함수를 사용하여 이미지에 삽입 할 수 있습니다. 이미지는 content 또는 pseudo element가 배치되는 곳에 삽입됩니다. 예를 들어, attr()는 image.jpg라는 이미지를 삽입합니다. href CSS 컨텐츠 속성과 함께 카운터를 사용하는 방법은 무엇입니까? content: attr(href) css
특성은 또는 함수를 사용하여 표시 될 수 있습니다. 이것은 문서의 제목 또는 섹션을 자동으로 번호로 매수하는 데 유용합니다. 먼저 속성을 사용하여 카운터를 생성하거나 재설정하여 속성을 사용하여 증가시킵니다. 그런 다음 를 사용하여 카운터의 현재 값을 표시 할 수 있습니다. CSS 컨텐츠 속성에서 특수 문자를 사용할 수 있습니까?
예, 유니 코드를 사용하여 CSS content 속성에서 특수 문자를 사용할 수 있습니다. 예를 들어, url()는 총알을 삽입합니다. 항상 BackSlash () 유니 코드로 시작하는 것을 잊지 마십시오. ::before CSS 컨텐츠 속성이 SEO에 영향을 미칩니 까? ::after CSS를 통해 추가 된 콘텐츠는 일반적으로 검색 엔진에서 색인화되어야하는 콘텐츠가 아닌 장식적인 것으로 간주됩니다. 따라서 SEO에 중요한 것이 아니라 장식용 콘텐츠에 CSS content: url(image.jpg) 속성을 사용하는 것이 가장 좋습니다.
CSS 컨텐츠 속성을 사용하여 HTML을 삽입 할 수 있습니까?
~~아니요, CSS~~
속성은 HTML을 삽입하는 데 사용할 수 없습니다. 텍스트, 이미지, 카운터 및 속성 값 만 삽입 할 수 있습니다. HTML을 삽입 해야하는 경우 HTML 문서에서 직접 수행하거나 JavaScript를 사용해야합니다.
CSS 컨텐츠 속성은 모든 브라우저에서 지원됩니까? content Chrome, Firefox, Safari 및 Edge를 포함한 모든 현대식 브라우저는 CSS counter() 속성을 광범위하게 지원합니다. 그러나 이전 버전의 Internet Explorer에서는 완전히 지원되지 않을 수 있습니다. counters() CSS 컨텐츠 속성에 애니메이션 할 수 있습니까?
~~아니요, CSS~~
속성은 애니메이션이 될 수 없습니다. 값 범위가있는 속성이 아니라 특정 값이 설정되어 있기 때문입니다. 애니메이션을 만들어야하는 경우 또는 와 같이 애니메이션 할 수있는 다른 CSS 속성을 사용하는 것을 고려하십시오. content

~~위 내용은 CSS 이해 ' 내용 ' 재산의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!~~