CSS oznacza „Arkusz Stylów Kaskadowych". Jest to język wykorzystany do definiowania prezentacji stron internetowych. Służy głównie do struktury i stylu stron HTML, takich jak regulacja wielkości czcionki, granica elementu, pozycja i wiele innych. Mówiąc dokładniej, CSS jest główną częścią tworzenia stron internetowych, która sprawia, że ​​strony internetowe są atrakcyjne i przyjazne dla użytkownika.

Ten post omówi podstawy CSS i jego zastosowania.

Do czego służy CSS?

CSS jest wykorzystywany do określenia układu i stylu stron internetowych. Kontroluje styl strony internetowej za pomocą wielu właściwości CSS.

Rodzaje CSS

Poniższe trzy typy CSS to:

• Wbudowane CSS
• Zewnętrzne CSS
• Wbudowane CSS

Co to jest wbudowane CSS?

W HTML wbudowany CSS jest osadzony bezpośrednio z elementem za pomocą „styl" atrybut. Jest wykorzystywany do dostosowania unikalnej stylizacji do konkretnego elementu.

Przykład
Poniższy przykład pokazuje stronę HTML, która stosuje wbudowane CSS do „

" element:

Linuxhint

Oto wyjaśnienie wyżej wymienionych właściwości CSS w „styl" atrybut:

• "kolor”Definiuje kolor czcionki.
• "rodzina czcionek”Stosuje styl czcionki.
• "tekst-align”Ustawia wyrównanie tekstu w środku, lewej lub prawej stronie.
• "rozmiar czcionki”Określa rozmiar czcionki elementu.

Wyjście

Co jest osadzone CSS?

Gdy właściwości CSS są zadeklarowane w „„Element dokumentu HTML, ten typ CSS jest określany jako osadzony CSS.

Przykład
W dostarczonym przykładzie osadzeliśmy CSS w HTML:

Linuxhint

Można zaobserwować, że dostęp do HTML ”

”Element według nazwy znacznika i zastosuj właściwości CSS kolorów, rodziny czcionek, alignment tekstowych i wielkości czcionki, jak omówiono wcześniej.

Wyjście

Co to jest zewnętrzne CSS?

Arkusz stylów zewnętrznych odnosi się do zewnętrznego CSS, który jest zapisany w osobnym pliku. Ten plik CSS jest następnie połączony z plik HTML za pomocą „„Element w sekcji głowy.

Przykład
Najpierw utwórz plik HTML i określ „„Element wraz z atrybutami„ rel ”i„ href ”. „„rel”Atrybut określa relację między HTML a połączonym dokumentem oraz„Href„Atrybut służy do zdefiniowania źródła pliku:

Linuxhint

CSS
Dodaj poniższy fragment kodu w „stylu.plik CSS ”:

H1
Kolor: ciemny;
Font-Family: Fantasy;
Text-Align: Center;
Rozmiar czcionki: 60px;

Wyjście

Czym są selektory CSS?

Elementy HTML, które chcesz stylizować, można wybrać za pomocą selektora CSS. Niektóre z głównie wykorzystywanych kilku selektorów w CSS wymieniono poniżej:

• Proste selektory
• Pseudoklasy selektory
• Selektory atrybutów
• Selektory kombinatory
• Pseudoelementy selektory

Weźmy przykład niektórych selektorów, aby lepiej zrozumieć.

Przykład: Jak używać prostych selektorów CSS?
Proste selektory wybierają elementy na podstawie identyfikatora, nazwy lub klasy. Poniższe bloki kodu pokazują przykład prostych selektorów:

• Dodać "„Element z klasą”skrzynka".
• Następnie dodaj "

  „Element wewnątrz„ ”:

Linuxhint

Selektor ID CSS
Selektor identyfikator odnosi się do „ID„Atrybut elementu. W CSS „#„Symbol jest napisany, aby wybrać element według identyfikatora.

Styl „Heading” Identyfikator

#nagłówek
Kolor: ciemny;
Font-Family: Fantasy;
Rozmiar czcionki: 60px;

Selektor klasy CSS
Selektor klasy CSS wybiera elementy mające szczególne „klasa”Atrybuty. W CSS do klasy są dostępne przez „.„Symbol przed nazwą klasy.

Stylowa klasa „pudełka”

.skrzynka
szerokość: 300px;
granica: 5px Solid RGB (214, 214, 214);
Margines: Auto;
Text-Align: Center;
kolor tła: RGB (255, 227, 218);

„„.skrzynka”Służy do dostępu do„skrzynka”Zajęć i przypisz następujące właściwości:

• "szerokość„Dostosowuje szerokość elementu.
• "granica„Własność jest wykorzystywana do dodania granicy wokół elementu.
• "margines”Generuje przestrzeń wokół elementu.
• "tekst-align”Ustawia wyrównanie tekstu.
• "kolor tła”Ustawia kolor tła.

Wyjście

To były wszystkie podstawy CSS.

Wniosek

Arkusz stylów CSS lub kaskadowy opisuje wygląd dokumentu HTML. Zapewnia setki właściwości stylistycznych dla elementów HTML, które można zastosować za pomocą CSS wbudowanego CSS i zewnętrznego CSS. W CSS element HTML jest wybierany przez różne selektory CSS, takie jak selektor identyfikatora, selektor klasy i tak dalej. Ten post wykazał, do czego CSS jest używany.