HTML (Hypertext Markup Language) jest standardowym językiem do konstrukcji stron internetowych. Podczas gdy arkusz stylów kaskadowych jest wykorzystywany do dostarczania kilku właściwości stylizacji elementom HTML. Mówiąc dokładniej, możesz uzyskać dostęp do elementów HTML w CSS według nazwy elementu, według selektorów klas lub selektorów identyfikacyjnych.

Trzy metody dodawania arkusza stylów CSS do pliku HTML to wewnętrzny CSS, wbudowany CSS i zewnętrzne CSS. Jednak ten artykuł będzie kierował sposobem dodania zewnętrznego arkusza stylów w HTML.

Co to jest zewnętrzny arkusz stylu CSS?

Arkusz stylów zewnętrznych jest pomocny w sposób, w jaki możemy zmienić wygląd naszej witryny, modyfikując tylko jeden plik. Plik HTML musi mieć link do arkusza stylów wewnątrz „”Element, który zostanie wymieniony w komponencie głowy strony HTML.

Poniższy przykład pokazuje kilka elementów HTML, które zostaną zaprojektowane za pomocą właściwości CSS za pomocą zewnętrznego arkusza stylów.

Przykład: Jak tworzyć i łączyć zewnętrzny arkusz stylów do pliku HTML?

W pliku HTML najpierw dodaj element DIV o nazwie klasy „główny". W środku, dodaj

element o nazwie klasy jako „nagłówek”Aby zapewnić nagłówek.

element z id jako „pkt”Następnie dodaje się, aby dostarczyć treść tekstu.

Krok 1: Utwórz plik HTML

Poniżej znajduje się kod HTML do omawianego scenariusza:

To jest element nagłówka

To jest główny div

Ponieważ nie dostarczyliśmy żadnego z elementów HTML o właściwościach stylizacji, ekran wyjściowy będzie wyglądał tak:

W następnej sekcji utworzymy arkusz stylów zawierający właściwości stylizacji elementów, które utworzyliśmy w pliku HTML.

Krok 2: Utwórz zewnętrzny arkusz stylów

Utwórz nowy plik i nazwij go rozszerzeniem „.CSS". Otwórz go i napisz kod podany w poniższym bloku kodu.

Styl Main Div

.główny
szerokość: 500px;
Wysokość: 200px;
kolor tła:#001253;
Text-Align: Center;
Wyściółka: 20px;
Margines: 0px auto;
granica: 5px Solid RGB (194, 194, 189);
FONT-FAMILY: Kursywna;

Właściwości zastosowane do elementów HTML w zewnętrznym arkuszu stylów opisano poniżej:

• ".główny”Służy do dostępu do klasy elementu DIV, gdzie„.”, A następnie nazwa klasy jest znana jako selektor klasowy.
• "szerokość„Własność jest wykorzystywana do ustawienia szerokości elementu.
• "wysokość„Własność jest wykorzystywana do ustawienia wysokości elementu.
• "kolor tła„Właściwość jest wykorzystywana do ustawienia koloru tła.
• "tekst-align”Jest właściwością używaną do wyrównania tekstu.
• "Wyściółka”Czy właściwość wykorzystywana do dodawania przestrzeni powyżej treści Div.
• "margines”Z wartością 0px Auto reprezentuje przestrzeń 0px od góry i dolnej oraz równa przestrzeń po lewej i prawej stronie elementu.
• "granica„Własność jest ustawiona z wartością 5px solid RGB (194, 194, 189), gdzie 5px odnosi się do szerokości granicy, stałe jest typem linii, a RGB (194, 194, 189) to kod koloru granicznego to kod graniczny.
• "rodzina czcionek”Z kursywą wartości sprawia, że ​​styl czcionki wydaje się, że zostały odręczne.

Styl id para

#Para
Rozmiar czcionki: 25px;
Font-Weight: Bold;
Kolor: #FFB9B9;

Element id o nazwie para

element identyfikowany z właściwościami, które zostały wyjaśnione poniżej:

• "#Para”Jest wykorzystywany do dostępu do elementu ID HTML. „„#„Znak jest znany jako selektor id.
• "rozmiar czcionki„Własność jest wykorzystywana do ustawienia rozmiaru czcionki.
• "grubość czcionki”Z wartością ustawioną jako pogrubioną czcionką odważną.
• "kolor„Własność jest wykorzystywana do ustawienia koloru czcionki.

Nagłówek stylu

.nagłówek
Kolor: Whitesmoke;

Kolor czcionki nagłówka jest ustawiony jako „biały dym„Korzystając z nieruchomości”kolor".

Krok 3: Połącz zewnętrzny arkusz stylów do HTML

Teraz, w sekcji głównej pliku HTML, określamy link do zewnętrznego arkusza stylów:

Kilka atrybutów można wykorzystać w znaczniku linku HTML. Atrybuty określone w elemencie łącza opisano poniżej:

• "rel„Atrybut jest wykorzystywany do poinformowania przeglądarki o zaimportowanym pliku, takim jak arkusz stylów.
• "Href”Atrybut określa ścieżkę pliku.
• "typ„Atrybut jest wykorzystywany do wskazania treści zaimportowanego pliku.

Jak pokazano na poniższym obrazku, właściwości stylizacji, które są dostarczane w zewnętrznym arkuszu stylów, są z powodzeniem stosowane:

Z powodzeniem nauczyliśmy się łączyć plik CSS z plik HTML.

Wniosek

CSS to kaskadowy arkusz stylów, który zapewnia różne właściwości stylizacji elementom HTML. Istnieją trzy sposoby podłączenia CSS z HTML: wbudowane CSS, zewnętrzne CSS i wewnętrzne CSS. W HTML, wewnątrz sekcji głowy, link do zewnętrznego arkusza stylów zostanie określony za pomocą elementu. W tym artykule pokazano procedurę tworzenia i łączenia zewnętrznych arkuszy stylów z HTML.