Jak działa CSS

Jeśli HTML jest podstawą strony internetowej, CSS jest kolorem farby i stylami okien. Pomaga programistom internetowym formatować strony internetowe w sposób, który ludzie mogą zrozumieć. Pomaga stronom internetowym wyglądać bardziej atrakcyjnie i czytelnie wizualnie. Ponadto można obsługiwać kilka innych właściwości, takich jak rozmiar czcionek/obrazów, kolor, czcionek i obrazy tła.

CSS można użyć do zmiany projektu układu, więc musisz napisać tylko jeden kod dla wszystkich elementów. Korzystając z CSS, możesz użyć mniej kodu do utworzenia strony internetowej. Możesz zastosować jedną regułę CSS na wszystkie tagi na stronie. Ucząc się CSS, możesz sprawić, że Twoja witryna będzie wyglądać świetnie.

Jak działa CSS

Proces kaskadowy CSS umożliwia łączenie wielu arkuszy stylów. Pomaga uniknąć konfliktów, gdy różne style definiują tę samą właściwość, jak rozmiar czcionki. Gdy element ma więcej niż jeden arkusz stylów, przeglądarka wybierze najbardziej odpowiednią (najnowszy) i rozwiąże konflikt.

Składniki kodu CSS

W tej sekcji opisano podstawowe przypadki kodu CSS.

Weźmy przykład prostego kodu CSS dla nagłówka (H1):

H1 Color: Black; Font-Weight: Bold;

Powyższy kod CSS obejmuje następujące części:

- H1 jest znany jako "selektor"

- Tekst zapisany wewnątrz kręconych aparatów ortodontycznych nazywa się „deklaracja„;; Kod wewnątrz klastrowych klamrów jest stosowany do selektora zdefiniowanego przed klamrami kręconymi.

- kolor I grubość czcionki są właściwościami, podczas gdy czarny I pogrubiony są wartościami właściwości

Oprócz wyżej wymienionych komponentów, a średnik jest wstawiany po każdej właściwości przed rozpoczęciem drugiej. Krótko mówiąc, prosty kod CSS ma cztery komponenty: selektor, deklaracja, nieruchomość I wartość.

Jak osadzony jest kod CSS

Kod CSS może być osadzony na jeden z następujących sposobów:

- Wewnątrz elementu HTML: Właściwości są zdefiniowane w określonym elemencie HTML, a obraz pokazany poniżej pokazuje zastosowanie wbudowanego CSS.

- Jako wewnętrzny CSS: Kod jest zapisywany za pomocą elementu i wewnątrz głowa znacznik pliku HTML. Aby lepiej rozumieć wewnętrzne CSS, dołączyliśmy obraz pokazujący czcionkę i kolor są ustawione dla akapitów:

- Jako zewnętrzny plik CSS: kod CSS jest zapisywany w osobnym pliku, a następnie plik CSS jest powiązany z plik HTML:

Jak CSS i HTML współpracują

Zjawisko CSS i HTML są ze sobą powiązane. Kod HTML może być określany jako struktura budynku, podczas gdy CSS jest procesem upiększającym tej struktury. Surowa struktura jest bezużyteczna bez farby i innych dekoracji. HTML i CSS współpracują na stronie internetowej:

Strona internetowa jest zgodna z podrzędnym procesem, aby poprawnie załadować:

- Strona HTML jest ładowana przez przeglądarkę

- Przeglądarka przekształca to HTML w drzewo DOM (model obiektu danych)

- Tymczasem przeglądarka ładuje style powiązane z tą stroną HTML: W tym celu plik CSS (połączony z plik HTML) jest analizowany w celu utworzenia drzewa modelu obiektu danych (DOM).

- Po pomyślnym dodaniu zasad stylizacji, ostatni krok (wyświetlacz) jest następnie przeprowadzany

Wizualna reprezentacja ładowania strony jest wyświetlana poniżej

Model obiektu danych (DOM) to hierarchiczna (podobna do drzewa) struktura kodu HTML. Każdy element i powiązane właściwości są znane jako węzły DOM. Selektory CSS (mogą to być dowolny element HTML) są sprawdzane z węzłami DOM, a pasujące węzły przyjmują właściwości/wartości zdefiniowane w pliku CSS.

Wniosek

Proces CSS identyfikuje elementy strony internetowej. Określa także, w jaki sposób stosuje się style do tych elementów. Konieczne jest zrozumienie, że CSS nie jest językiem ograniczonym do jednego języka lub arkusza pojedynczego stylu. Ten opisowy post oświeca podstawy i działanie CSS. Początkowo podaliśmy krótkie szczegółowe informacje na temat podstawowej koncepcji CSS, a następnie opisaliśmy wspólne działanie HTML i CSS.

Szczęśliwy komputer!