Pierwsza litera CSS

Arkusz stylów kaskadowych odgrywa ważną rolę w dekorowaniu pierwszej litery tego słowa w HTML. Czasami potrzebujemy użytkownika, aby zwrócić uwagę na określony tekst, zgodnie z naszymi wymogami. Aby osiągnąć ten cel, używamy dekoracji tekstu i efektów na pierwszej liście słowa akapitu lub nagłówka. Pomaga to w rozwinieniu koncentracji użytkownika na odpowiednim punkcie. Ten wybór odbywa się za pośrednictwem selektora CSS :: pierwszego litera, którym jest pseudoelement CSS.

Pseudoelement CSS

Jest to słowo kluczowe dodawane do selektora, które umożliwia ozdobę lub stylizowanie konkretnej sekcji wybranego elementu. Podstawowa składnia zastosowana do tego stylizacji jest zdefiniowana w następujący sposób:

Selektor w tym artykule reprezentuje pierwszą literę tego słowa. Nieruchomość w stylu obejmuje właściwość graniczną, kolor, czcionkę, margines, dekorację tekstową, wyściółkę i właściwość tła. W tym przewodniku stosujemy trzy główne właściwości stylu.

Czcionka i styl kolorów w pierwszej liście

Najpierw stosujemy dwie nieruchomości w pierwszym stylizacji litery. Zaczynając od znacznika otwierającego HTML, deklarujemy głowę, a następnie otwieramy tag stylu. Ponieważ musimy zastosować jakikolwiek wpływ na pierwszą literę, należy o tym wspomnieć w momencie stylizacji. W przeciwnym razie dotknie cały tekst akapitu. Tak więc „P” dla akapitu jest wspomniany wraz z pierwszą deklaracją literową. Zielony kolor i rozmiar czcionki w procentach są stosowane.

Następnie sekcja głowy jest zamknięta. Tag nadwozia jest komplementowany przez środkowy znacznik. Jest to przykład stylizacji wbudowanej. Wewnątrz ciała ponownie dodajemy nagłówek. W celu zastosowania koloru do niego stosuje się wbudowane CSS. Ostatecznie dodano akapit, w którym zastosowaliśmy styl. Możemy również zastosować dowolny styl do pierwszej litery nagłówka jak w akapicie.

Kod:

Zapisz kod i uruchom go w przeglądarce. Zobaczysz wynikową stronę, na której pierwsza litera akapitu jest większa w porównaniu z resztą tekstu, a jego kolor zostanie zmieniony. Ta zmiana w stylu jest przydatna w przekształcaniu koncentracji czytelnika.

Wyjście:

Styl graniczny w pierwszej liście

Drugim sposobem na uczynienie pierwszą literą jest zastosowanie kwadratowego kształtu lub granicy wokół pierwszej litery tekstu. Opracujmy, jak to działa.

Tym razem bierzemy dwa sposoby stylizacji pierwszego listu, stosując jeden styl na nagłówku, a drugi do akapitu. Wewnątrz stylu ta sama wartość pierwszego litera jest zadeklarowana do nagłówka „H3”. Styl graniczny ma „solidny”.

Kod:

Podobnie w pierwszej liście akapitu stosujemy styl graniczny jako podwójny. Możemy również zastosować prostą granicę lub kropkowaną, zastępując nazwę w stylu granicznym słowem „kropkowanym”. Wewnątrz ciała deklarowane są nagłówek i akapit, oba zawierające manekin tekst, aby pokazać efekty, które na nich zastosowaliśmy. Zapisz plik edytora tekstu, a następnie uruchom go w domyślnej przeglądarce.

Wyjście:

Zobaczysz, że na nagłówku pierwsza litera to „T” i jest stylizowana z solidną granicą. Możesz również zastosować więcej wpływów na granicę, na przykład kolor graniczny itp. Przyciągnie to więcej w porównaniu do całego tekstu. W akapicie znajduje się pierwsza litera „L” „Lorema”. Jest to stylizowane przez podwójną granicę.

Notatka: Oba efekty graniczne są stosowane w pierwszej liście pierwszego słowa, jak wspomnieliśmy w CSS. Ale jeśli definicja pierwszego litera zostanie usunięta, granica zostanie zastosowana do całego tekstu, w nagłówku lub w akapicie.

Styl dekoracji tekstu w pierwszej liście

Pierwszą literę tekstu można również stylizować, dekorując tekst. Tym razem używamy pierwszej litery z listy. Na każdą listę wpłynie inny styl dekoracji tekstu. Własność dekoracji tekstu CSS ma kilka aspektów; Pójdziemy z linią dekoracji tekstu.

Najpierw rozważ sekcję ciała kodu HTML. Zastosowane są dwa proste nagłówki. To, że deklarujemy prostą listę. Z dwóch rodzajów list używamy tutaj nieuporządkowanej listy.

Tag jest zadeklarowany. Wewnątrz tagów z listy nie uporządkowanej deklarujemy listy za pomocą znacznika
• .

  1 2 3 4 5

  Shiza Ahsan

  Wszystkie trzy listy są zadeklarowane wewnątrz znacznika

  . Każda lista jest zamknięta osobno i po deklaracji wszystkich list,
  jest stosowany. Każda lista jest stosowana z nazwą identyfikacyjną. Styl pierwszej litery jest stosowany przez identyfikację każdego przykładu, ponieważ stosujemy różne style dla każdego wiersza na liście.

  Kod HTML:

  Jeśli identyfikatory z listy są usunięte, wówczas pojedynczy styl jest stosowany do wszystkich wierszy na liście. Teraz zamknij sekcję ciała. Idź w kierunku sekcji głowy ciała HTML.

  Wewnątrz stylu tag zastosowany jest kolor nagłówka. Jest to opcjonalny efekt, aby wyjaśnić działanie. Całe ciało jest stosowane przez styl do wyrównania po lewej stronie strony internetowej.

  1 2 3 4 5

  Ul li Margines: 15px;

  Częstym efektem stosowanym do wszystkich linii na liście jest efekt marginesu. Aby zachować odległość między dwiema liniami na liście, stosujemy ten efekt. Następnie każda linia na liście jest stosowana w różnych stylach. Na przykład, w przykładowym identyfikatorze 1, stosujemy efekt dekoracji tekstu z podkreśleniem kropkowanym na pierwszym liście.

  1 2 3 4 5

  #przykład1 :: pierwsza litera Dekoracja tekstu: Podkreśl kropki;

  Podobnie przykład2 i przykład3 są stosowane przez dekorację tekstu czerwonej linii przez literę. Podczas gdy trzeci wiersz na liście ma efekt overline niebieski.

  Kod CSS:

  Po dodaniu wszystkich efektów zapisz kod, a my uruchamiamy plik. Pierwsza litera „S” słowa „Shiza” ma pod spodem kropkowana linia. Pierwsza litera „S” drugiej linii ma za pomocą czerwonej linii. A „Z” Zaroon zawiera niebieską linię przechodzącą nad nim.

  Wyjście:

  Wniosek

  Pierwsza litera tekstu CSS w HTML odgrywa ważną rolę w rozwinieniu uwagi użytkownika. W tym artykule krótko podajemy podstawowe wprowadzenie do selektora pierwszego liter, który jest elementem właściwości pseudo CSS. Ten styl nieruchomości ma kilka kategorii. Możemy złożyć każdy z nich, aby podkreślić pierwszy list. Trzy stosowane właściwości to efekt czcionki plus kolor, efekt graniczny i właściwość tekstu tekstowego o różnych stylach i kolorach linii przechodzących pod lub przez pierwsze litery.