Абзац Dropcap с елементите от първа и първа буква на CSS
Има няколко CSS селектора или свойства, които мисля, че рядко се използват в природата, но всъщност те съществуват от дните на CSS1; някои от тях са включени :първа линия и :първа буква pesudo-елементи.
Как да използвам?
Тези псевдоелементи по същество работят подобно на техните братя и сестри -: преди и след - и мисля, че те също са доста ясни. Най- :първа буква ще насочи първата буква или символ на избран елемент, това псевдо-елемент обикновено се използва за създаване на типографски ефект като капачка. Ето как се прави.
p: първа буква font-size: 50px;
Този код води до следното представяне.
Трябва да се отбележат няколко неща, но този ефект ще се прилага само когато първият знак не се предшества от друг елемент, например изображение. Освен това, когато имаме едни и същи целеви елементи подред, всички те също ще бъдат засегнати.
Освен това, по отношение на :първа линия, това псевдо-елемент ще се насочи към първия ред на целевия елемент, този пример по-долу показва начина, по който сме удебелени в първия ред от абзаца.
p: първа линия font-weight: bold;
Подобно на предишния код на :първа буква, това също ще засегне всички първи редове в елементите на абзаца, които се намират в страницата.
Така че, в реални случаи, когато обикновено искаме да добавим капачка или да променим първия ред само в първия параграф трябва да бъдем по-конкретни - или чрез добавяне на допълнителен атрибут на клас, или чрез прилагане на тези псевдо-елементи заедно с :първо дете или : Първата по вид като селектор.
p: първо дете: първа буква font-size: 50px; p: първо дете: първа линия font-weight: bold;
Ето, засегнатият параграф сега е само първият.
Псевдоелементи на работа
Добре, нека сега се опитаме да създадем по-добър вид на абзаца, като използваме псевдо-елементи. Но преди да започнем, се нуждаем от специален шрифт за нашата капачка и тук е моят избор: Hominis от Paul Lloyd. След това определяме ново семейство шрифтове в таблицата със стилове, както следва.
@ font-face семейство на шрифтове: 'HominisNormal'; src: url ('fonts / HOMINIS-webfont.eot'); src: формат url ("fonts / HOMINIS-webfont.eot? #iefix") ('embedded-opentype'), url ('fonts / HOMINIS-webfont.woff') формат ('woff'), url ('fonts / HOMINIS-webfont.ttf ') формат (' truetype '), url (' fonts / HOMINIS-webfont.svg # HominisNormal ') формат (' svg '); тегло на шрифта: нормално; стил на шрифта: нормален; След това, ние задаваме фамилията по подразбиране за абзаците.
р цвят: # 555; семейство на шрифта: "Georgia", Times, serif; височина на линията: 24px;
В този пример ще използваме :първо дете селектор, за да насочите първия абзац и да приложите декоративни стилове, за да изглежда по-забележимо:
p: първо дете [запълване: 30px; граница наляво: 5px твърдо # 7f7664; фонов цвят: # f5f4f2; височина на линията: 32px; box-shadow: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); позиция: относителна;
След това добавяме капка с помощта на :първа буква, увеличаване на размера на шрифта, както и присвояване на ново семейство на шрифта;
p: първо дете: първа буква font-size: 72px; поплавък: наляво; пълнеж: 10px; височина: 64px; семейство на шрифта: „HominisNormal“; фонов цвят: # 7F7664; margin-right: 10px; цвят: бял; граничен радиус: 5px; височина на линията: 70 пиксела;
Ще подчертаем и първата линия :първа линия, така.
p: първо дете: първа линия font-weight: bold; размер на шрифта: 24px; цвят: # 7f7664;
И накрая, искаме да добавим декоративен атрибут към първия параграф с помощта на кламер :след псевдо-елемент.
p: първо дете: след фон: url ("… / images/paper-clip.png") превъртане без повторение 0 0 прозрачно; съдържание: ""; дисплей: вграден блок; височина: 100 пиксела; позиция: абсолютна; дясно: -5px; отгоре: -35px; ширина: 100px; Това е целият код, от който се нуждаем, сега нашият параграф трябва да изглежда много по-добре;
Можете също да видите демонстрацията на живо от връзките по-долу:
- Преглед на демо
- Изтеглете Източник
Заключителна мисъл
Както споменахме по-рано в този пост, тези псевдоелементи, по-специално :първа буква и :първа линия е включен след CSS1, следователно те се поддържат и в Internet Explorer 8 по-рано.
И все пак, доколкото знам, те не се прилагат до голяма степен в дивата природа. Така че, ние се надяваме, че този урок по някакъв начин ще ви вдъхнови да опитате тези CSS функции на вашия уебсайт.
