CSS to język stylizacji używany do modyfikowania wyglądu stron internetowych. Jest to jedna z najbardziej znaczących technologii, które są używane do budowy strony internetowej. Teraz musisz się zastanawiać, jak CSS rządził stylem? Dobrze! CSS robi to, upewniając się, że elementy pojawią się na stronie internetowej, jak ich kolor tekstu, kolor tła, styl czcionki itp. Dlatego należy zastosować odpowiednią strukturę, aby napisać skuteczny kod CSS.

Ten zapis przedstawi przewodnik krok po kroku, aby zrozumieć, w jaki sposób CSS jest ustrukturyzowany?

• podstawowa składnia CSS.
• Jak wdrożyć CSS do dokumentu HTML.
• Jak pracować z selektorami CSS, a następnie specyficzność selektora.
• Białe przestrzenie w CSS.
• Komentarze w CSS.

Zacznijmy od składni CSS.

Składnia CSS

Podstawowa składnia CSS obejmuje selektor wraz z blokiem deklaracji. Blok deklaracji składa się z dwóch rzeczy i.mi. właściwość CSS o jej wartości.

Na powyższym rysunku p jest selektorem wskazującym akapit elementu HTML, kolor jest właściwością CSS, a zielony to wartość przypisana do właściwości kolorów.

Jak zastosować CSS do dokumentu HTML

CSS można zastosować do dowolnego dokumentu HTML na trzy sposoby.mi. Używanie stylów wbudowanych, za pomocą wewnętrznego arkusza stylów lub arkuszy stylów zewnętrznych. W tym artykule wyjaśniono działanie wszystkich trzech metod stylizacji za pomocą przykładów.

Wbudowane CSS

Metoda w stylu wbudowanym jest najczęściej wykorzystywana do wdrożenia unikalnego stylu na jednym elemencie. Musimy więc użyć atrybutu „stylu” w elemencie HTML, aby zaimplementować dowolną właściwość CSS do określonego elementu.

Przykład

Poniższy przykład implementuje styl wbudowany na

element:

Wbudowane CSS

Powyższy kod ustawia kolor tekstu jako czerwony, kolor tła jako niebieski i wyrównuje tekst w środku:

Wewnętrzne CSS

Wewnętrzna metoda stylu CSS określa styl w znaczniku i w sekcji głównej. Służy do wdrożenia określonego stylu na całej stronie.

Przykład Ten przykład opisuje wewnętrzny arkusz stylów dla wszystkich

elementy

Wewnętrzne CSS

Witamy w Linuxhint.com

Witamy w Linuxhint.com

Witamy w Linuxhint.com

Wyjście pokazuje, że styl określony w elemencie stylu zaimplementowanym we wszystkich

elementy:

Zewnętrzne CSS

Jak sama nazwa wskazuje, zewnętrzny arkusz stylów to osobny plik CSS, którego można użyć do stylizacji całej strony internetowej. W takim przypadku odniesienie zewnętrznego pliku CSS zostanie dodane do pliku HTML.

Przykład Ten przykład definiuje różne style dla różnych elementów HTML, a te style zostaną zaimplementowane za pomocą zewnętrznego arkusza stylów.

Html

Plik HTML zawiera link do zewnętrznego pliku CSS:

Zewnętrzne CSS

Witamy w Linuxhint.com

Witamy w Linuxhint.com

Witamy w Linuxhint.com

CSS

H2
Kolor: złoto;
kolor tła: czarny;

P
kolor pomarańczowy;
kolor tła: Seagreen;
Text-Align: Center;

Powyższy kod wytworzy następujące dane wyjściowe:

Podsumujmy, czego nauczyliśmy się w tej sekcji, użyj wbudowanego CSS. Użyj stylu wewnętrznego dla jednostronicowych stron internetowych, jednak gdy pracujesz na szerokiej stronie internetowej, która ma więcej niż jedną stronę, a następnie użyj zewnętrznego arkusza stylów.

Selektory CSS

Selektory są używane do celów HTML, które chcesz stylizować, a istnieje wiele rodzajów selektorów CSS, takich jak:

• CSS selektor elementu jest skierowany do elementów HTML na podstawie ich nazwy.
• CSS Selektor identyfikatora jest skierowany do elementów HTML na podstawie ich identyfikatora.
• CSS Selektor klas jest skierowany do elementu HTML na podstawie atrybutu klasowego.
• CSS uniwersalny selektor Celuje wszystkie elementy obecne na stronie.

Przykład Poniższy styl kodu różne elementy HTML i.mi. H2 i P przy użyciu selektora elementu, odpowiednio selektora klasy i selektora identyfikatora.

Html

H2 za pomocą selektora elementów

akapit za pomocą selektora klasy

Akapit za pomocą selektora identyfikatora

CSS

H2
kolor tła: czarny;
Kolor: Goldenrod;
Text-Align: Center;

.styl
kolor tła: czarny;
Zielony kolor;
Text-Align: Center;

#styl1
kolor tła: czarny;
kolor czerwony;
Text-Align: Center;

Otrzymamy następujące dane wyjściowe:

Specyficzność

Czasami występuje starcie.mi. Dwa selektory/style ukierunkowane na ten sam element HTML, co stanie się w takim przypadku i który selektor otrzyma preferencję. Dobrze! Mamy ogólną zasadę specyficzności

• !ważne ma większą specyficzność, więc wszystko zastąpi
• Inline ma drugą najwyższą specyficzność, dzięki czemu może zastąpić wszystko oprócz !ważny
• Selektor identyfikatora ma większą swoistość wśród innych selektorów, ale niższe niż !Ważne i wbudowane
• Następnie pojawia się selektor klas, selektor atrybutów i pseudoklasa
• Selektor elementów i pseudoelementy
• Universal Selector ma najniższą swoistość
• Jeśli ta sama reguła zostanie powtórzona w arkuszu zewnętrznym, ostatnia zostanie zaimplementowana

Zrozumiemy specyficzność z przykładem:

Przykład Poniższy podany przykład wyjaśni pojęcie specyficzności.

Html

Witamy w Linuxhint.com

Przykład specyfiki

CSS

P
kolor pomarańczowy !ważny;

#styl1
kolor czerwony;

.styl
Zielony kolor;

P
kolor niebieski;

H1
kolor niebieski;

H1
Zielony kolor;

Wyjście będzie:

W powyższym przykładzie zaobserwowaliśmy następujące punkty:

• Element jest celem !Ważne, id, klasę i selektor elementów ale

  element jest stylizowany zgodnie z !ważny co to pokazuje !Ważna ma najwyższą specyficzność.

• Istnieją dwa różne selektory elementów, które zdefiniują dwa różne style dla

  element, selektor elementu, który na końcu ma priorytet.

Aby uzyskać lepsze zrozumienie, tasuj kolejność selektorów i obserwuj różnicę!

Białe przestrzenie w CSS

W CSS przeglądarki ignorują białe przestrzenie, jednak prawidłowe użycie białych przestrzeni może zwiększyć czytelność kodu.

Przykład: Ten przykład wyjaśnia, w jaki sposób białe przestrzenie/ przerwy linii zwiększa czytelność kodu:

Html

H2 za pomocą selektora elementów

Przykład specyfiki

CSS

.styl
kolor tła: czarny; Zielony kolor; Text-Align: Center;

#styl1
kolor tła: czarny;
kolor czerwony;
Text-Align: Center;

W selekcecie klasy cały kod jest zapisywany w tym samym wierszu, podczas gdy w selektorze identyfikowym piszemy każdą właściwość na nowym wierszu. WhiteSpaces/Line Breaks Zwiększ czytelność kodu. Wyjście weryfikuje, że przeglądarka nie dba o to, jak napisałeś kod i obaj selektorzy pomyślnie wykonali:

Komentarze w CSS

W CSS wszystkie skomentowane sekcje zostaną zamknięte w „/*” i „*/”. Wszystko, co pojawia się w komentarzach, zostanie zaniedbane przez przeglądarkę. W komentarzach można dodać dodatkowe szczegóły, aby zrozumieć kod.

Przykład Ten przykład dodał kilka komentarzy, które pomogą nam zrozumieć kod.

Html

Pierwszy paragraf

Akapit drugi

CSS

/* selektor klas*/
.styl
kolor tła: czarny;
kolor pomarańczowy;
Text-Align: Center;

/* selektor identyfikator*/
#styl1
kolor tła: czarny;
kolor czerwony;
Text-Align: Center;

Powyższy kod generuje następujące dane wyjściowe:

Wyjście weryfikuje, że komentarze zapewnia lepsze zrozumienie kodu bez wpływu na wyniki.

Wniosek

Podstawowa struktura CSS zawiera podstawową składnię wyboru elementu HTML za pomocą selektorów CSS i stylizacji wybranego elementu za pomocą właściwości CSS.CSS można zaimplementować do pliku HTML na trzy sposoby.mi. Styl inline, aby ustawić styl dla określonego elementu, wewnętrzny styl za pomocą znacznika i dodawanie zewnętrznego pliku CSS.

W tym artykule omówiono wszystkie podstawy ustrukturyzacji pliku CSS. Zaczynając od podstawowej składni CSS, a następnie wyjaśnia różne typy selektorów CSS i CSS. Ponadto wyjaśnia koncepcję specyficzności w CSS i stwierdza, że ​​spośród wszystkich selektorów identyfikatorów selektorów CSS ma większą specyficzność. Wreszcie wyjaśnia znaczenie komentarzy i białych przestrzeni w CSS.