CSS można dodać jako osobny plik lub osadzony bezpośrednio w dokumencie HTML. Jeśli chcesz dołączyć CSS w HTML, to „Style wbudowane”, „Wbudowane style” i „Arkusze stylów zewnętrznych” to trzy metody osiągnięcia tej funkcjonalności. Jednak idealnym sposobem na tworzenie i zastosowanie stylów do HTML jest wykorzystanie zewnętrznych arkuszy stylów, ponieważ minimalna modyfikacja znaczników będzie wymagana do wpływania na wiele stron jednocześnie.

W tym spisie omówi procedurę dla dodanie jakiś Zewnętrzny plik CSS W Html. Wyjaśnimy również łączenie I Importowanie Zewnętrzny plik CSS w HTML. Ponadto zostaną podane przykłady związane z wymienionymi metodami. A więc zacznijmy!

Jak dodać zewnętrzny plik CSS w HTML

Jeśli chcesz jednocześnie zastosować styl na wiele stron internetowych, dodanie zewnętrznego pliku CSS jest idealne. Zewnętrzny CSS jest uważany za osobny plik obejmujący wszystkie reguły stylu i można go powiązać z dowolną stroną HTML Twojej witryny. Dodanie zewnętrznego pliku CSS pozwala na modyfikację wyglądu Twojej witryny, wprowadzając zmiany tylko w jednym pliku. Również prowadzenie osobnych plików CSS, JavaScript i HTML umożliwia utrzymanie kodu i poprawę czytelności.

Istnieją dwie metody dodawania zewnętrznego pliku CSS HTML: Łączenie i importowanie.

Łączenie zewnętrznego pliku CSS w HTML

Przede wszystkim utworzymy plik CSS w HTML. W tym celu możesz otworzyć swój ulubiony edytor kodu; Jednak użyjemy kodu Visual Studio.

Po otwarciu kodu vs utworzymy "styl.CSS ” Plik CSS do dodawania stylów:

Następnie określamy styl, który chcemy zastosować na stronie internetowej w otwartym pliku CSS. Tutaj przypisaliśmy wartości do "tło" I "czcionka" właściwości dla HTML "ciało" a także dodał "kolor" Do nagłówka:

ciało
Tło: różowy;
Czcionka: 18px Arial, bez Serif;

H1
kolor niebieski;

Naciskać „Ctrl+S” Aby zapisać dodany kod w "styl.CSS ” plik:

„” Tag jest wykorzystywany do łączenia zewnętrznego CSS z plikiem HTML. Ten tag jest dodawany w „” sekcja dokumentu HTML. Połączyliśmy nasz plik HTML z "styl.CSS ” w poniżej podanym programie, za pomocą znacznika. Następnie dodaliśmy nagłówek z

tag i akapit z

etykietka. Określony styl w "styl.CSS ” Plik zostanie zastosowany do tych elementów HTML:

To jest Linuxhint.com

Uczymy się, jak dodać plik CSS w HTML

Zapisz ten program JavaScript i otwórz swój plik HTML w przeglądarce:

Jak widać, z powodzeniem zastosowaliśmy określony styl do naszych elementów HTML, łącząc je z zewnętrznym plikiem CSS:

Importowanie zewnętrznego pliku CSS w HTML

Inną metodą dodawania zewnętrznego pliku CSS jest użycie "@import" Zasada w dokumencie HTML. JavaScript "@import" Deklaracje podają przeglądarce instrukcje dotyczące ładowania i wykorzystania stylów z zewnętrznego pliku CSS.

Możesz zaimportować zewnętrzny plik CSS w HTML, po prostu dodając deklarację „@Import” w znaczniku dokumentu HTML. W ten sposób będziesz mógł dodać inne reguły CSS dla elementów HTML, w tym samym znaczniku:

To jest Linuxhint.com

Uczymy się, jak dodać plik CSS w HTML

W dostarczonym programie JavaScript zaimportowaliśmy "styl.CSS ” plik, a styl określony z wymienionym plikiem zostanie zastosowany do nagłówków. Dodaliśmy również styl do akapitu elementu HTML:

Nasz "mój projekt.html ” Plik ma następujące elementy HTML z zastosowanymi stylami:

Wniosek

Dodanie pliku CSS w HTML jest przydatne, jeśli chcesz zastosować styl na wiele stron internetowych jednocześnie. Ponadto, gdy przechowujesz pliki HTML, JavaScript i CSS osobno, kod staje się łatwy w zarządzaniu. W tym zapisie omówiono procedurę dodawania pliku CSS w HTML. Wyjaśniliśmy również łączenie i importowanie zewnętrznego pliku CSS w HTML. Ponadto podano również przykłady związane z wymienionymi metodami.