Ставка Дропцап са елементима ЦСС-а првог реда и првог слова

Постоји неколико ЦСС селектора или својстава за које мислим да се ријетко користе у дивљини, али заправо постоје још од времена ЦСС1; неке од њих су и :Прва линија и :прво слово песудо-елементс.

Како се користи?

Ови псеудоелементи у основи раде слично њиховим браћом и сестрама -: пре и: после - и мислим да су такође прилично јасни. Тхе :прво слово ће циљати прво слово или знак одабраног елемента, ово псеудо-елемент се обично користи за креирање типографског ефекта као што је капица. Ево како се то ради.

 п: фирст-леттер фонт-сизе: 50пк;  

Овај код резултира следећом презентацијом.

Треба напоменути неколико ствари, међутим, овај ефекат ће се применити само када првом карактеру не претходи други елемент, на пример, слика. Поред тога, када имамо неке од истих циљаних елемената у низу, то ће такође утицати на све њих.

Даље, у смислу :Прва линија, Ово псеудо-елемент ће циљати први ред циљаног елемента, овај пример испод показује како смо подебљали прву линију параграфа.

 п: фирст-лине фонт-веигхт: болд;  

Као код претходника :прво слово, ово ће такође утицати на све прве линије у елементима пасуса које се налазе на страници.

Дакле, у стварним случајевима, када уопште желимо да додамо капу или да променимо прву линију само у првом пасусу морамо бити специфичнији - или додавањем додатног атрибута класе или применом ових псеудо-елемената заједно са :прво дете или : први тип као селектор.

 п: прво дете: прво слово фонт-сизе: 50пк;  п: прво дете: прва линија фонт-веигхт: болд;  

Ево га, погођени параграф је сада само први.

Псеудо-елементи на послу

У реду, покушајмо сада да направимо бољи изглед параграфа користећи псеудо-елементе. Али пре него што почнемо, потребан нам је посебан фонт за капу и овде је мој избор: Хоминис од Паула Ллоида. Затим дефинишемо нову фамилију фонтова у стилу, као што следи.

 @ фонт-фаце породица фонтова: 'ХоминисНормал'; срц: урл ('фонтс / ХОМИНИС-вебфонт.еот'); формат срц: урл ('фонтс / ХОМИНИС-вебфонт.еот? #иефик') ('ембеддед-опентипе'), урл ('фонтс / ХОМИНИС-вебфонт.вофф') формат ('вофф'), урл ('фонтс / ХОМИНИС-вебфонт.ттф ') формат (' труетипе '), урл (' фонтс / ХОМИНИС-вебфонт.свг # ХоминисНормал ') формат (' свг '); фонт-веигхт: нормал; фонт-стиле: нормал;  

Затим постављамо подразумевану фамилију фонтова за параграфе.

 п цолор: # 555; фамилија фонтова: 'Георгиа', Тимес, сериф; лине-хеигхт: 24пк;  

У овом примеру, користићемо :прво дете селектор за циљање првог параграфа и примени декоративне стилове да би изгледао истакнутије:

 п: прво-дете паддинг: 30пк; бордер-лефт: 5пк солид # 7ф7664; бацкгроунд-цолор: # ф5ф4ф2; лине-хеигхт: 32пк; бок-схадов: 5пк 5пк 0пк 0пк ргба (127, 118, 100, 0.2); позиција: релативна;  

Затим додајемо капицу користећи :прво слово, увећајте величину фонта и доделите му нову фамилију фонтова;

 п: прво дете: прво слово фонт-сизе: 72пк; флоат: лефт; паддинг: 10пк; хеигхт: 64пк; фамили-фонт: 'ХоминисНормал'; бацкгроунд-цолор: # 7Ф7664; маргин-ригхт: 10пк; бела боја; бордер-радиус: 5пк; лине-хеигхт: 70пк;  

Такође ћемо нагласити прву линију :Прва линија, овако.

 п: прво дете: прва линија фонт-веигхт: болд; фонт-сизе: 24пк; цолор: # 7ф7664;  

На крају, желимо да додамо декоративни атрибут првом параграфу користећи спајалицу :после псеудо-елемент.

 п: прво дете: после бацкгроунд: урл ("… /имагес/папер-цлип.пнг") сцролл 0-транспарент; цонтент: ""; дисплеј: инлине-блоцк; хеигхт: 100пк; позиција: апсолутна; десно: -5пк; топ: -35пк; видтх: 100пк;  

То је све што нам треба, сада би наш параграф требало да изгледа много боље;

Такође можете видети демо уживо са линкова испод:

• Виев Демо
• Довнлоад Соурце

Финал Тхоугхт

Као што смо раније поменули у овом посту, ови псеудо-елементи, конкретно :прво слово и :Прва линија је укључен од ЦСС1, стога су и подржани чак иу програму Интернет Екплорер 8 раније.

Ипак, колико ја знам, они се у великој мјери не проводе у дивљини. Надамо се да ће вас овај водич на неки начин инспирисати да испробате ове ЦСС функције на вашем веб сајту.