Jak wstawić plik CSS w HTML: 10 kroków

Język znakowania hipertekstu (HTML) określa, które elementy są obecne na stronie internetowej. Język programowania "Tabele w stylu kaskadowym" (CSS) opisuje, jak powinny wyglądać te elementy. Plik CSS można dodać do HTML jako zewnętrzny (CSS Dodaj jako osobny plik) lub blachy dopasowanej stylów (CSS zawiera plik HTML). Dowiedz się, jak wstawić w pliku HTML CSS, aby zmienić projekt witryny.

Kroki

Metoda 1 z 2:

Jak zainstalować tabelę arkusza stylów zewnętrznych

jeden. Utwórz plik CSS. Przygotuj i zapisz rozszerzenie pliku CSS ".CSS ».

Obraz zatytułowany Dodaj plik CSS do HTML Krok 2

2. Pobierz plik CSS na stronę.

Obraz zatytułowany Dodaj plik CSS do HTML Krok 3

3. Skopiuj adres (URL) pliku CSS. Adres witryny będzie wyglądał w ten sposób: Twoja strona.arkusz stylowy.CSS.

Dobra praktyka polega na usunięciu z adresu (URL) głównej nazwy domeny. Na podstawie tego adres http: // moisite.CSS / Default.CSS zostanie zredukowany do "/ CSS / Default.CSS ». Nie zapomnij zawierać spływu ołowiu ("/"). Jest nazywany względnym sposobem.

Obraz zatytułowany Dodaj plik CSS do HTML Krok 4

cztery. Włóż link do pliku. Znajdź w Markupy Plik HTML Utwórz pusty ciąg tuż nad nim. Wstaw do tego ciąg , Wymiana "Twój...»Na łączu w pliku CSS.

Obraz zatytułowany Dodaj plik CSS do HTML Krok 5

pięć. Zapisz plik HTML i pobierz go do witryny.

Obraz zatytułowany Dodaj plik CSS do HTML Krok 6

6. Upewnij się, że wszystko wygląda na stronie, jak powinien wyglądać. W przeciwnym razie otwórz ponownie plik HTML, znajdź błędy i wprowadzaj zmiany.

Metoda 2 z 2:

Jak wstawić wewnętrzny arkusz stylów

jeden. Utwórz etykietę Otwórz plik HTML i znajdź etykietę . Dodaj kilka pustych strun nad nim i wpisaj następujące elementy:

 Typ ="Tekst / CSS">

Obraz zatytułowany Dodaj plik CSS do HTML Krok 7

jeden. Włóż wszystkie CSS między tymi dwoma etykietami.
2. Zapisz plik HTML (z rozszerzeniem .Html).
3. Upewnij się, że wszystko wygląda na stronie, jak powinien wyglądać. W przeciwnym razie dokonaj niezbędnych zmian.

Rada

Zawsze sprawdzaj wygląd witryny w różnych przeglądarkach i na różnych systemach operacyjnych. Niektóre przeglądarki są trochę połączone z CSS inaczej. Może nawet nastąpić w tej samej przeglądarce, ale w różnych wersjach Mac i Windows. Jeśli Twoja witryna wygląda inna w innej przeglądarce (na przykład, luka między niektórymi obiektami, takimi jak listy, ma inny rozmiar), problemem jest ustawienia tej przeglądarki. Znajdź tabelę Master Style i włóż go na górę pliku CSS, aby zmienić standardowe ustawienia przeglądarki. Odbywa się tak, aby twoje ustawienia nie zmieniają niczego w samej przeglądarce.
Włóż zewnętrzną tabelę stylów, jeśli masz taką szansę. Pozwoli to zmienić wygląd witryny, zmieniając kod w pliku źródłowym. Więc nie musisz zmieniać CSS na każdej stronie witryny.
Jeśli witryna nie reaguje na CSS, jak się spodziewasz, ponownie sprawdzić wszystkie kodowanie, aby upewnić się, że prawidłowo pisze. W szczególności należy zwrócić szczególną uwagę na punkty z przecinkami (";") i wsporniki zamykające ("}"). Plik CSS jest dość prosty, aby pominąć jedną z tych znaków.
Zapisz plik HTML na komputerze, aby otworzyć go w różnych przeglądarkach internetowych i sprawdzić je przed dalszym ładowaniem. Ale aby go pobrać, plik CSS musi być włożony do HTML jako arkusz stylów zewnętrznych.
Jeśli sam arkusz stylów jest sprzeczny - na przykład, najpierw mówi, że tekst będzie niebieski, a potem będzie czerwony - zawsze będzie ostatnim warunkami. Jeśli jeden zespół jest zewnętrznym arkuszem stylu, a druga jest wewnętrzną, aktywną tabelą wewnętrzną.

Ostrzeżenie

Nie używaj ustawienia CSS "Otwórz", czyli CSS, który jest zawarty w etykiecie HTML. (Przykład: "Alight = `Center`" to open CSS preparat). Jest to przestarzała wersja ze złą konstrukcją składniową. Jeśli po chwili musisz zaktualizować witrynę, ta produkcja będzie trudna do zmiany.