Poznaj podstawy CSS w ciągu jednej minuty

CSS oznacza kaskadowy arkusz stylów. CSS określa, w jaki sposób elementy HTML powinny wyświetlać na ekranie. Innymi słowy, CSS opisuje prezentację stron internetowych. Zapewnia różne właściwości stylizacji elementów HTML, takie jak kolor tła, styl czcionki, kolor i wiele innych. Pozwala również na określenie, jak wygląda strona internetowa na różnych rozmiarach ekranu.

Ten blog dotyczy:

• Jak zdefiniować właściwości CSS?
• Jakie są typy selektorów CSS?
• Różne sposoby definiowania właściwości CSS
• Jak używać wbudowanego CSS?
• Jak używać osadzonego arkusza stylów?
• Jak używać zewnętrznego arkusza stylów?

Jak zdefiniować właściwości CSS?

Aby zdefiniować właściwości CSS dla elementów HTML, można zastosować następującą składnię:

selektor
wartość nieruchomości;
wartość nieruchomości;

Tutaj:

• Pierwszym składnikiem reguły CSS jest CSS ”selektor". Selektor określa, które elementy HTML należy wybrać do zastosowania właściwości CSS.
• W jego ciele właściwości są zdefiniowane z odpowiednimi wartościami.

Jakie są typy selektorów CSS?

Selektory są z trzech typów, które są zdefiniowane poniżej:

Selektor elementu
Element CSS Selektor służy do zastosowania właściwości CSS do elementów o określonych nazwach znaczników:

H1
kolor niebieski;

W powyższym przykładzie „H1”To element nagłówka.

Selektor klas
Selektor klas wybiera wszystkie elementy należące do wspomnianej klasy, a następnie stosuje do nich dodane właściwości CSS:

.główna zawartość
Szerokość: 300px

Zgodnie z danym kodem właściwość szerokości zostanie zastosowana do elementu o nazwie klasy „.główna zawartość".

Selektor identyfikatora
Identyfikatory wybierają konkretny element na podstawie jego identyfikatora:

#Para
Text-Align: Center;

Notatka: W powyższych przykładach „„kolor”,„szerokość", I "tekst-align”To właściwości.

Jak używać wbudowanego CSS?

Winline CSS odnosi się do CSS, gdy jest bezpośrednio zastosowany do naszych elementów HTML. Aby to zrobić, użyj „styl”Atrybut w znaczniku otwierającym element, a następnie dołącz właściwości.

Spójrz na podany przykład:

WITAJ ŚWIECIE!

Wyjście

Jak używać osadzonego arkusza stylów?

Aby osadzić arkusz stylów CSS w pliku HTML, użyj „„Element wewnątrz sekcji głowy, aby określić właściwości w następujący sposób:

Wyjście

Jak używać zewnętrznego arkusza stylów?

Jeśli projekt zawiera wiele plików, lepiej jest zrobić zewnętrzny arkusz CSS z rozszerzeniem „.CSS". Następnie użyj go w projekcie, dodając link do zewnętrznego arkusza CSS w plikach HTML.

Na przykład element jest podany w sekcji głównej pliku HTML w ten sposób:

W arkuszu stylów zewnętrznych dodaj kod:

P
Rozmiar czcionki: 30px;
kolor fioletowy;
Font-Weight: Bold;
Text-Align: Center;

Powyższy kod wyświetli się jak podano poniżej:

Chodziło o podstawy CSS.

Wniosek

Trzy sposoby zdefiniowania właściwości stylizacji w elementach HTML to wbudowane CSS, wewnętrzne CSS i zewnętrzne CSS. Aby zastosować właściwości stylizacji do elementów, możesz użyć selektorów, takich jak selektory elementów, selektory klas i identyfikatory. Następnie określ właściwości z ich wartościami w nawiasach kręconych selektorów. Ten blog omówił podstawy CSS z przykładami.