CSS pierwszy typu

Arkusz stylów kaskadowych ma właściwość, aby podkreślić pierwszą zawartość HTML wśród kilku określonych typów, a następnie zastosować efekty. HTML i CSS odgrywają istotną rolę we wdrażaniu tego zjawiska.

Jak działa pierwsza nieruchomość w CSS?

Ta właściwość działa w taki sposób, że treść, na której chcemy zastosować dowolny określony efekt, jest napisane za pomocą słów kluczowych „pierwszego w rodzaju”. Automatycznie uzyskuje dostęp do zawartości zadeklarowanej po raz pierwszy w kodzie. Podstawową składnią do tej właściwości jest:

Tag treści HTML: pierwszy w rodzaju
// Efekty, które chcesz zastosować.

Dlaczego używamy pierwszego typu w CSS?

W CSS możemy zastosować różne skutki na zawartość HTML. Jednym z głównych i ważnych podejść do stosowania efektów na znacznikach HTML jest wewnętrzny, wbudowany lub zewnętrzny CSS. Wbudowany CSS jest zapisywany wewnątrz znaczników, co oznacza, że ​​jest używany tylko wtedy, gdy zastosowano efekt na tym znaczniku. Podczas gdy wewnętrzne i zewnętrzne CSS są używane, gdy klasy i identyfikatory, których używamy w arkuszu stylów, są dostępne tylko przez te tagi, w których dołączyliśmy nazwy klas i identyfikatorów.

Ale w przypadku „pierwszego typu” nie musimy używać klas ani identyfikatorów. Ta właściwość jest używana, gdy chcesz użyć jednego znacznika HTML w powtarzalnej liczbie razy. Ta właściwość ułatwiła proces stosowania efektów na tag. Tutaj na początku piszemy prosty kawałek kodu w stylu, zamiast znajdować każdy znacznik zawartości HTML i wspomnieć o znaczniku stylu z efektami w nim.

Przykład 1: Pierwszy typ w akapicie i nagłówku

Ta właściwość pierwszego typu jest stosowana po prostu do akapitu treści HTML.

Po pierwsze, zostanie ustawiony kolor tła strony internetowej. Jest to dodatkowa właściwość używana do uczynienia wyjścia bardziej atrakcyjnym. Nagłówek jest zadeklarowany wraz z

Tag nagłówka. Znowu używany jest tutaj nowy nagłówek. Tym razem zmierza 2

. Następnie używany jest prosty tag akapitowy. Wewnątrz tagów otwierających i zamykania akapitu dodaliśmy manekinowy tekst przykładowy. Nowy nagłówek

dodaje się, a następnie nowy tag akapitowy. To jest hierarchia lub sekwencja wszystkich użytych treści HTML:

…

…

…

…

…

Kod nadwozia HTML

Ten typ typu CSS jest stosowany na kilka z tych znaczników HTML tylko na nich, które pojawiły się pierwsze. To z pewnością pomoże użytkownikowi zidentyfikować tagi pierwszego poziomu.

Kod HTML CSS

Po korpusie HTML musisz dodać CSS w sekcji głowy kodu HTML. W pozycji głównej podaliśmy tytuł naszej stronie. Następnie, wewnątrz stylu, akapit jest dodawany do pierwszej właściwości. Dodaliśmy kolor i podważyliśmy styl czcionki do akapitu.

P: Pierwszy typu
Kolor czerwony;
Styl czcionki: Kursywa;

Ponadto, kierując 3

jest nakładany żółtym kolorem, a styl czcionki jest wybierany.

Zamknij wszystkie tagi i zapisz kod z rozszerzeniem HTML, aby utworzyć stronę internetową HTML w przeglądarce. W przeciwnym razie '.Rozszerzenie TXT 'będzie tworzy tekst, aby pojawić się na stronie internetowej po otwarciu pliku w przeglądarce internetowej.

Wyjście

Po wykonaniu pliku zobaczysz, że właściwość pierwszego typu jest stosowana do nagłówka i akapitu.

Przykład 2: CSS Pierwszy typ w listy opisów opisu

W HTML lista opisów służy do zawierania zawartości HTML, tak jak robi to prosta lista nieuporządkowana. Po pierwsze, są to podstawowe terminologie listy opisu, które zostaną użyte w przykładowym kodzie:

• dotyczy listy opisu.

• Ten znacznik jest przeznaczony do definicji terminu opisowego lub nazwy.
• Służy do opisania każdego wymienionego terminu.

Teraz zobaczymy, jak to działa w kodzie nadwozia HTML. Wewnątrz ciała dodaje się nagłówek. Następnie rozpoczynamy listę opisu za pomocą

tag, a potem dwa

są używane. Wewnątrz obu terminów

, Zastosowaliśmy 3 opisy terminów

.Ten przykład pokazuje warzywa i owoce jako DT i nazwy jako

. Niewielki kawałek kodu jest napisany poniżej.

Warzywa:

1. Pomidory

Następnie zamknij wszystkie tagi i przejdź do części CSS.

Kod nadwozia HTML

Po zakończeniu części HTML w znaczniku stylu, zastosuj efekt do

Tag z wagą lub stylem czcionki.

Dt
Font-Weight: Bold;

Jak

tagi to dwa, nie wspomnialiśmy o właściwości pierwszego typu, ten efekt zostanie zastosowany do obu

wartości.

Wszystkie terminy, które są napisane jako

mają między sobą odległość wyściółki. Tak więc po prostu napisaliśmy nazwę „DD”, aby zastosować ten efekt do wszystkich DDS.

Dd
Margines: 3px;

Kod HTML CSS

Ale chcemy zastosować efekt graniczny tylko na tym DD, który pojawia się pierwsza wśród wszystkich 6 <

tagi. Więc użyjemy tej właściwości CSS. Również efekt tła jest dodawany do

tag za pomocą granicy.

DD: pierwszy w rodzaju
Granica: 2px solidny fiolet;
Kolor tła: Lightgreen;

Wyjście

Podczas egzekucji zobaczysz, że pierwszy

jest podświetlony kolorem tła i granicą.

Notatka
W ciele HTML nie ma żadnych kryteriów, których należy wymienić w znaczniku lub wyróżnieniu specjalnie, aby pokazać, że dany znacznik jest pierwszym lub że chcemy zastosować wpływ na określony tag. Musisz tylko upewnić się, że wszystkie tagi są prawidłowo zadeklarowane wraz z tagami otwierania i zamykania. A kolejność treści HTML należy odnotować podczas pisania kodu, ponieważ ta pierwsza właściwość typu będzie stosowana tylko do treści zadeklarowanej jako pierwsza.

Wniosek

W tym artykule staraliśmy się pomóc użytkownikowi w ważnym aspekcie projektowania CSS w pierwszej właściwości typu. Ta właściwość jest przydatna, gdy trzeba zastosować efekty na pierwszą zadeklarowaną zawartość HTML wśród liczby tego samego rodzaju treści. Najpierw zaczęliśmy od podstawowego działania pierwszego efektu typu i potrzeby tej właściwości na projektowaniu stron internetowych. Wyjaśniliśmy dwa przykłady, w tym nagłówek i wybór akapitu w pierwszym przykładzie. Podczas gdy drugi przykład zawiera listę opisu, która ma mieć wpływ za pośrednictwem tej właściwości CSS.