CSS 첫 줄 및 첫 문자 요소가있는 단락 드롭캡
CSS 선택기 나 속성 중 일부는 야생에서 거의 사용되지 않는다고 생각되지만 실제로 CSS1 이후부터 존재했습니다. 그들 중 일부는 :첫 줄 과 :첫 편지 페소 요소.
사용하는 방법?
이 유사 요소는 기본적으로 형제와 유사하게 작동합니다. : before 및 : after - 나는 또한 매우 직설적이라고 생각합니다. 그만큼 :첫 편지 선택한 요소의 첫 글자 또는 문자를 대상으로 지정합니다. 의사 요소 드롭 캡 (drop cap)과 같은 타이포그래피 효과를 만드는 데 일반적으로 사용됩니다. 완료 방법은 다음과 같습니다..
p : 첫 글자 font-size : 50px;
이 코드는 다음 프레젠테이션을 생성합니다..
그러나 몇 가지 유의해야 할 점은이 효과는 첫 번째 문자 앞에 다른 요소 (예 : 이미지)가없는 경우에만 적용됩니다. 또한 동일한 대상 요소가 연속적으로있을 때 모든 요소가 영향을받습니다..
또한, :첫 줄, 이 의사 요소 대상 요소의 첫 번째 줄을 타겟팅합니다. 아래 예제는 단락의 첫 번째 줄을 어떻게 굵게 표시하는지 보여줍니다..
p : 첫 줄 font-weight : bold;
이전 코드와 마찬가지로 :첫 편지, 이것도 페이지에있는 단락 요소의 첫 번째 줄 모두에 영향을 미칩니다..
따라서 실제로는 드롭 캡을 추가하거나 첫 번째 라인을 변경하려고 할 때 만 첫 번째 단락에서 우리는 좀 더 구체적으로 설명 할 필요가 있습니다. 추가 클래스 속성을 추가하거나 이러한 유사 요소를 : 첫 번째 자식 또는 : 첫 번째 유형 선택기, 이렇게.
p : first-child : 첫 글자 font-size : 50px; p : first-child : first-line font-weight : bold;
우리가 가서, 영향을받는 문단은 이제 첫 번째 문단 일뿐입니다..
일하는 의사 요소
좋아, 의사 요소를 활용하여 단락의 모양을 더 잘 디자인 해 보자. 그러나 우리가 시작하기 전에 우리는 우리의 드롭 캡을위한 특별한 서체가 필요합니다. 그리고 여기는 나의 선택입니다 : Paul Lloyd의 Hominis. 다음과 같이 스타일 시트에 새 글꼴 패밀리를 정의합니다..
@ font-face 글꼴 - 가족 : 'HominisNormal'; src : url ( 'fonts / HOMINIS-webfont.eot'); url ( 'fonts / HOMINIS-webfont.eot? #iefix') 형식 ( 'embedded-opentype'), url ( 'fonts / HOMINIS-webfont.woff') 형식 ( 'woff' HOMINIS-webfont.ttf ') 형식 ('truetype '), url ('fonts / HOMINIS-webfont.svg # HominisNormal ') 형식 ('svg '); font-weight : normal; 글꼴 스타일 : 일반; 다음으로 단락의 기본 글꼴 모음을 설정합니다..
p color : # 555; font-family : 'Georgia', Times, serif; 줄 높이 : 24px;
이 예에서는 : 첫 번째 자식 selector를 사용하여 첫 번째 단락을 대상으로하고 더 눈에 띄도록 장식 스타일을 적용합니다.
p : first-child 패딩 : 30px; border-left : 5px solid # 7f7664; background-color : # f5f4f2; 선 높이 : 32px; box-shadow : 5px 5px 0px rgba (127, 118, 100, 0.2); 위치 : 상대적;
그런 다음 드롭 캡을 추가합니다. :첫 편지, 글꼴 크기를 확대하고 새 글꼴 패밀리를 지정합니다.
p : first-child : 첫 글자 font-size : 72px; 왼쪽으로 뜨다; 패딩 : 10px; 높이 : 64px; font-family : 'HominisNormal'; 배경색 : # 7F7664; margin-right : 10px; 색깔 : 백색; border-radius : 5px; 줄 높이 : 70px;
또한 첫 번째 줄을 강조 할 것입니다. :첫 줄, 그렇게.
p : first-child : first-line font-weight : bold; 글꼴 크기 : 24px; color : # 7f7664;
마지막으로, 클립을 사용하여 첫 번째 단락에 장식 속성을 추가하고 싶습니다. :후 의사 요소.
p : first-child : after background : url ( "... /images/paper-clip.png") no-repeat scroll 0 0 transparent; content : ""; 디스플레이 : 인라인 블록; 높이 : 100px; 위치 : 절대; 오른쪽 : -5px; 상단 : -35px; 너비 : 100px;
이것이 우리가 필요로하는 모든 코드입니다. 단락은 훨씬 더 좋아 보일 것입니다.
아래 링크에서 라이브 데모를 볼 수도 있습니다.
- 데모보기
- 소스 다운로드
최종 생각
이 게시물의 앞부분에서 언급했듯이, 이러한 유사 요소, 특히 :첫 편지 과 :첫 줄 CSS1부터 포함되었으므로 Internet Explorer 8 이전 버전에서도 지원됩니다..
그러나, 내가 아는 한, 그들은 야생에서 그렇게 많이 구현되지는 않습니다. 따라서이 튜토리얼을 통해 웹 사이트에서 CSS 기능을 사용해 보시기 바랍니다..
