CSS는 Drop Cap_Experience Exchange로 단락 텍스트를 아름답게 만듭니다.

Selector:first-letter {font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00;}

아직 명확하지 않다고 생각되면 자세한 설명을 참조하세요.

우선,

에 있든 다른 블록 태그에 있든 HTML에 자신만의 텍스트가 있어야 합니다. ID, 클래스 또는 직접 태그를 지정할 수 있습니다. 먼저 텍스트 ID가 기사라고 가정하고 이 단락의 CSS를 처음부터 작성해야 합니다. >

#article:first-letter {……}

:first-letter는 객체의 첫 번째 문자에 대한 스타일 시트 속성을 설정하는 데 사용되는 의사 클래스입니다. 이 구문은 CSS2의 범위에 속합니다. 자세한 내용은 "CSS2 중국어 매뉴얼"을 참조하세요

문장의 각 속성에 대해 자세히 이야기해 보겠습니다. 먼저 이 단어를 텍스트의 단어보다 크게 만들어야 합니다. 따라서 여기에 부여되는 글꼴 크기는 텍스트 내용의 2.5배입니다. 물론 3회나 4회를 선택하여 필요에 따라 수정할 수도 있습니다.

#article:first-letter { font-size:2.5em }

왜 em 태그를 사용하나요? 때로는 독자가 브라우저 확대/축소 기능을 통해 텍스트 크기를 변경해야 하기 때문에 특정 크기로 설정하면 자연스럽게 비율이 맞지 않게 됩니다. 이것을 변경하여 어떤 느낌인지 확인할 수 있습니다. 크기는 있는데 글꼴이 잘못된 경우 글꼴을 늘리고 여기에 굵은 글꼴을 추가해야 합니다.

#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold;  }

좋습니다. 아직까지는 첫 번째 단어가 가라앉을 의도가 없는 것 같으니 여기서 중요한 점은 float:left입니다. float가 남아 있습니다. 객체가 플로팅 속성으로 설정되면 원래 블록 수준 요소인지 여부에 관계없이 블록 수준 요소의 특성을 갖게 된다는 점을 알아야 합니다. 설정되지 않은 주변 텍스트 흐름 면이 이 개체를 둘러쌉니다. 텍스트의 이미지 래핑에도 이 속성이 있습니다.

#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left;  }

한번 해보세요. 드롭캡 보셨나요? 물론, 좀 어수선한 편이라고 볼 수도 있겠네요. 위에 좀 더 튀어나온 부분이 있죠? 걱정하지 마십시오. 단어 상단에 더 많은 공간이 있도록 패딩을 사용하여 설정하면 첫 번째 단어가 첫 번째 줄과 같은 높이가 됩니다.

결국 또 무슨 말을 더 할 수 있을까요? 한번 생각해 보니

결과는 실패했습니다. 레이블 레이어를 통해 하위 개체의 첫 번째 문자를 제어할 수 없습니다.

물론 이 가상 클래스에 관심이 있다면 계속 공부하는 것이 좋습니다.

Selector: first-line { sRules }

Selector1 Selector2: first-child { sRules }