Arkusze stylów kaskadowych, czyli CSS, to język stylizacji używany do stylizacji elementów HTML pojawiających się na stronach internetowych. CSS pozwala generować arkusze stylów wielokrotnego użytku, które można użyć do stylizowania wielu stron internetowych jednocześnie. Te arkusze stylów oszczędzają dużo czasu i są łatwe w utrzymaniu. Ale czy kiedykolwiek zastanawiałeś się, jak połączyć arkusze stylów CSS z dokumentami HTML? Cóż, otrzymaliśmy odpowiedź podsumowaną na tym blogu.

Trzy sposoby, w jaki możesz połączyć CSS z HTML. Są one zaciągnięte poniżej.

1. Wbudowane CSS
2. Wewnętrzne CSS
3. Zewnętrzne CSS

Wszystkie te podejścia zostały omówione na tym blogu.

Jak połączyć wbudowane CSS z HTML

Jeśli przyjmujesz to podejście, musisz skorzystać z atrybutu stylu konkretnego elementu, który chcesz stylizować. Po prostu wstaw styl do metki początkowej elementu.

Takie podejście nie jest zalecane, ponieważ stylizacja jest wykonywana w obrębie znacznika początkowego konkretnego elementu, co sprawia, że ​​kod jest trudny do odczytania i utrzymania. Co więcej, wbudowany CSS nie jest wielokrotnego użytku, dlatego musisz stylizować każdy element osobno, czyniąc zadanie stylizacji, zabijając w ten sposób cel korzystania z CSS.

Tutaj zademonstrowaliśmy to podejście z przykładem.

Html

Jak połączyć CSS z HTML

Wbudowane CSS

W powyższym kodzie generowane są trzy elementy, które są; ,

, I

. Wszystkie trzy z nich są stylizowane przy użyciu atrybutu stylu. Tymczasem pojemnik Div ​​otrzymał pewną wyściółkę i granicę, nagłówek i akapit otrzymują określony kolor tekstu.

Wyjście

Elementy zostały stylizowane przy użyciu wbudowanego CSS.

Jak połączyć CSS z HTML wewnętrznie

Takie podejście kieruje użytkownikom elementy stylowe za pomocą znacznika w sekcji głównej dokumentu HTML. Możesz użyć nazw elementów lub użyć klas lub identyfikatorów przypisanych do elementów, aby stylizować je za pomocą wewnętrznego CSS.

Aby zrozumieć działanie tego podejścia, zapoznaj się z przykładem.

Html

Jak połączyć CSS z HTML

Wbudowane CSS

Ponownie trzy elementy, które są ,

, I

są jednak generowane, aby je stylizować, używamy znacznika w sekcji głównej dokumentu. Zauważ, że ponieważ powyższy kod składa się tylko z trzech elementów, dlatego używamy bezpośrednio nazw elementów, aby je stylizować, jednak, gdy istnieje wiele elementów podobnego typu, możesz przypisać do nich klasy i identyfikatory, aby stylizować każdy z nich z nich inaczej. Kod wygeneruje to samo wyjście co powyżej.

Jak połączyć CSS z HTML zewnętrznie

To podejście pozwala połączyć CSS z HTML za pomocą zewnętrznych arkuszy stylów. To podejście wymaga wykonania arkuszy stylów w osobnym pliku, a następnie połączenia tego pliku zewnętrznego do pliku HTML za pomocą znacznika.

Tutaj załączyliśmy zrzuty ekranu edytora kodu, aby poprawnie zademonstrować to podejście.

Html

Ten zrzut ekranu powyżej pokazuje plik HTML. W tym dokumencie nie musisz stylizować elementów, po prostu umieść swoje elementy w sposób, który chcesz, aby pojawili się na stronie internetowej. W celu połączenia arkusza stylów po prostu użyj atrybutu i podaj link pliku CSS z atrybutem HREF znacznika.

CSS

Ten zrzut ekranu reprezentuje arkusz stylów CSS. W tym pliku po prostu użyj nazw elementów lub klas/identyfikatorów przypisanych do ich stylizowania. Kod pokazany na zrzutach ekranu wygeneruje również to samo wyjście.

Takie podejście jest uważane za najlepsze podejście, ponieważ pozwala oddzielnie generować arkusze stylów, dzięki czemu kod jest czysty, czytelny i możliwy do utrzymania.

Wniosek

Aby połączyć CSS z HTML, dostępne są trzy podejścia; Wbudowane CSS, wewnętrzne CSS i zewnętrzne CSS. Winline CSS wymaga użycia atrybutu stylu konkretnego elementu w znaczniku początkowym do jego stylizowania, tymczasem wewnętrzne CSS pozwala użytkownikom stylizować elementy za pomocą znacznika w sekcji głównej dokumentu HTML. Wreszcie, zewnętrzne CSS oznacza, że ​​musisz generować arkusze stylów w innym pliku i podłączyć go z dokumentem HTML za pomocą znacznika. Zewnętrzne podejście CSS jest preferowane przez resztę, ponieważ sprawia, że ​​kod jest czytelny i możliwy do utrzymania.