CSS (akronim CAspiening STyle Sheet) określa interfejs zawartości HTML. CSS pozwala upiększyć strony HTML, określając kolory, style czcionek i znacznie bardziej związane z estetyką stron. Właściwości zdefiniowane przy użyciu CSS są odziedziczone również na wszystkie elementy dziecięce. Na przykład, jeśli właściwość CSS zostanie dodana do ciała dokumentu HTML, wszystkie elementy wewnątrz znacznika ciała przyjmą tę właściwość. Aby uniknąć tego, możesz określić właściwość określonym elementom dziecięcym.

Istnieją różne sposoby zastosowania CSS w dokumencie HTML i są zdefiniowane poniżej:

• Wline: Pozwala na dodawanie CSS do określonego znacznika HTML
• Wewnętrzny: Kod CSS jest zapisany wewnątrz znacznika głównego (zalecanego, ale nie koniecznego) strony HTML
• Zewnętrzny: Plik CSS jest wytwarzany zewnętrznie poprzez definiowanie wszystkich właściwości. Jest dodawany do strony HTML za pomocą <połączyć> element

Zebraliśmy ten przewodnik, aby zademonstrować wszystkie możliwe sposoby dodania CSS do strony HTML.

Jak dodać CSS do strony internetowej

W tej sekcji krótko opisano dostępne podejścia do dodania CSS do strony HTML.

Jak dodać wbudowane CSS

Jak sugeruje nazwa techniki, pozwala dodać CSS do jednego elementu HTML. styl Atrybut elementu jest wykonywany do tego. Przećwiczmy poniżej podany przykład, aby uzyskać wyraźniejszy obraz wbudowanego CSS:

Przykład

Kod napisany poniżej dodaje style do znacznika HTML

Wskazówka Linux

:

Wskazówka Linux

• Kolor tekstu jest ustawiony na zielony: w tym celu kolor własność styl Używany jest atrybut
• Tekst

  jest wyrównany: tekst-align nieruchomość jest wykorzystywana

• Tekst nagłówka zostanie podkreślony: aby to zrobić, dekoracja tekstu właściwość atrybutu stylu jest ustawiona na podkreślać.

Interfejs internetowy wyżej wymienionej strony HTML jest wyświetlany poniżej:

Oprócz wyżej wymienionych nieruchomości, niewiele redaktorów HTML pokazuje rozwijaną listę dostępnych nieruchomości. Dlatego zaleca się mądrze wybór edytora HTML, ponieważ lepszy wybór ułatwi sposób dodania CSS do strony HTML.

Jak dodać wewnętrzne CSS

Wewnętrzny CSS jest dodawany za pomocą tag wewnątrz element strony HTML. Powiedzmy, że chcemy dodać różne style ciało, akapity, I Dywizje używane na stronie HTML.

Obraz wyświetlany poniżej pokazuje różne właściwości dodawane do kilku sekcji strony HTML, a wszystkie te właściwości są przypisane za pomocą <styl> element.

- Kolor tła ciała będzie czarny

- Akapity będą miały czerwony tekst, rozmiar czcionki 1EM i lewą realizację tekstu

- Kolor podziałów to antykwewhite, a szerokość podziałów zależy od szerokości używanego tekstu:

Interfejs internetowy za pomocą powyższych właściwości jest wyświetlany poniżej:

Jak dodać zewnętrzne CSS

CSS można dodać do stron internetowych, tworząc dedykowany plik CSS, a następnie wywołując go na stronie. Zewnętrzne CSS jest dość przydatne, gdy musisz zastosować ten sam styl na różnych stronach HTML. W tej sekcji zawiera post proceduralny do utworzenia i użycia zewnętrznego pliku CSS:

Krok 1: Utwórz .plik CSS

Najpierw otwórz edytor kodu i zrób plik z .CSS rozszerzenie (lub edytor może zaoferować opcję zapisania jako pliku CSS). Plik, którego tu używamy, jest nazwany Linuxhintstylesheet i jest tworzony w następujący sposób:

Otworzył nowy plik w edytorze:

Następnie kliknął zapisz jako:

Nazwał ten plik z .Rozszerzenie CSS i wybrane CSS jako typ pliku:

Krok 2: Dodaj style do pliku CSS

Dodaliśmy następujące właściwości stylizacji:

- Kolor tła ciała jest niebieskie niebo

- H1 będzie miał biały kolor

- Akapity mają ustawione na radę czcionką Serif a dekoracja tekstowa zawiera Overline (wiersz nad tekstem) nieruchomość:

Poniższy obraz wyświetla kod, który zawiera powyżej podane style:

Krok 3: Dodaj plik CSS do dokumentu HTML

Po utworzeniu i dodaniu stylów do pliku CSS, teraz musisz dodać plik do strony, w której chcesz zastosować te style. Chcemy dodać Linuxhintstylesheet Do Linuxhint Dokument HTML:

Element HTML służy do importowania CSS plik. Ponadto rel I Href Właściwość elementu łącza są wykonywane w celu osadzania pliku CSS. rel Atrybut określa związek między dokumentem HTML a plik CSS. Natomiast Href właściwość elementu zawiera link do pliku CSS.

Po prawidłowym wykonaniu powyższych kroków będziesz mógł załadować stronę HTML z wyżej wymienionymi właściwościami.

Wniosek

CSS to język do tworzenia stron internetowych (HTML/XML). CSS można dodać do stron internetowych, przyjmując jedną z wymienionych metod w tym artykule. Pierwsza metoda wykorzystuje atrybut stylu elementu, aby dodać różne właściwości związane z CSS. Metoda wewnętrzna praktykuje język CSS, używając elementu w znaczniku głowy. A ostatnia metoda importuje zewnętrzny plik CSS na określoną stronę internetową. Wszystkie te metody są używane do dodawania CSS do strony internetowej, a wybór metody zależy od programisty, że to, jak zamierza dodać style.