Styl wizualny i układ strony są dyktowane przez CSS lub Cascading Style Sheets. Są to dokumenty, które kształtują znaczniki HTML strony internetowej, zapewniając przeglądarkom internetowym instrukcje dotyczące wyświetlania stron, które wynikają z tego znacznika. CSS obsługuje układ strony, a także kolor, obrazy tła, typografię i wiele więcej.
Jeśli spojrzysz na plik CSS, zobaczysz, że jak każdy język znaczników lub kodowania, pliki te mają dla nich specyficzną składnię. Każdy arkusz stylów składa się z wielu reguł CSS. Te zasady, gdy są w pełni brane, są tym, co wyróżnia witrynę.
Części reguły CSS
Reguła CSS składa się z dwóch odrębnych części - selektora i deklaracji. Selektor określa, co jest stylizowane na stronie, a deklaracja jest stylem. Na przykład:
p { kolor: # 000;} To jest reguła CSS. Częścią selektora jest "p", który jest selektorem elementów dla "akapitów". W związku z tym wybrałby WSZYSTKIE akapity w witrynie i zapewniłby im ten styl (chyba że istnieją akapity, które są celowane przez bardziej szczegółowe style w innym miejscu w dokumencie CSS). Część reguły, która mówi "kolor: # 000;" jest to, co jest znane jako deklaracja. Deklaracja ta składa się z dwóch części - własności i wartości. Właściwość jest "kolorową" częścią tej deklaracji. Określa, który aspekt selektora zostanie zmieniony wizualnie. Wartość jest tym, do czego zostanie zmieniona wybrana właściwość CSS. W naszym przykładzie używamy wartości szesnastkowej liczby 000, która jest skrótem CSS dla "czarnego". Używając tej reguły CSS, nasza strona będzie miała akapity wyświetlane w kolorze czcionki czarnego. Podczas pisania właściwości CSS nie można ich po prostu utworzyć zgodnie z oczekiwaniami. W przypadku instancji "kolor" jest rzeczywistą właściwością CSS, więc można z niego korzystać. Ta właściwość określa kolor tekstu elementu. Jeśli spróbujesz użyć "koloru tekstu" lub "koloru czcionki" jako właściwości CSS, zawiodą, ponieważ nie są faktycznymi częściami języka CSS. Innym przykładem jest właściwość "obraz tła". Ta właściwość ustawia obraz, który może być użyty dla tła, na przykład: .logo { background-image: url (/images/company-logo.png);} Jeśli spróbujesz użyć "obrazu tła" lub "tła-grafiki" jako właściwości, to by się nie udało, ponieważ, po raz kolejny, nie są to rzeczywiste właściwości CSS. Istnieje wiele właściwości CSS, które można wykorzystać do stylizowania witryny. Oto kilka przykładów: Te właściwości CSS są świetne do użycia jako przykłady, ponieważ są bardzo proste i nawet jeśli nie znasz CSS, prawdopodobnie możesz odgadnąć, co robią na podstawie ich nazw. Istnieją także inne właściwości CSS, które mogą nie być tak oczywiste, jak działają na podstawie ich nazw: Gdy zagłębisz się w projektowanie stron internetowych, napotkasz (i wykorzystasz) wszystkie te właściwości i wiele więcej! Za każdym razem, gdy używasz właściwości, musisz nadać jej wartość - a niektóre właściwości mogą akceptować tylko określone wartości. W naszym pierwszym przykładzie właściwości "kolor" musimy użyć wartości koloru. Może to być wartość szesnastkowa, wartość RGBA lub nawet słowa kluczowe w kolorze. Każda z tych wartości zadziała jednak, jeśli użyjesz słowa "gloomy" z tą właściwością, nie zrobiłoby to nic, ponieważ, tak jak opisowe jest to słowo, nie jest rozpoznaną wartością w CSS. Nasz drugi przykład "obrazu tła" wymaga użycia ścieżki obrazu do pobrania rzeczywistego obrazu z plików Twojej witryny. Jest to wymagana wartość / składnia. Wszystkie właściwości CSS mają wartości, których oczekują. Na przykład: Jeśli przejrzysz listę właściwości CSS, odkryjesz, że każda z nich ma określone wartości, które będą używane do tworzenia stylów, do których są przeznaczone. Edytowane przez Jeremy'ego Girarda Podstawy własności CSS
Niektóre właściwości CSS
Właściwości wymagają wartości
