Co to są kaskadowe arkusze stylów i do czego służy CSS?

Co to są kaskadowe arkusze stylów i do czego służy CSS?

CSS należy do trójki podstawowych technologii internetowych obok HTML i JavaScript. Dzięki starannemu planowaniu CSS przyczynia się do rozdzielenia obaw. Niezależne zasoby kontrolują strukturę treści, jej prezentację i zachowanie.





Arkusze stylów odgrywają ważną rolę w dostępności, skalowalności, a nawet wydajności sieciowej. Jako autor treści lub projektant stron internetowych zapewniają kontrolę nad sposobem renderowania treści przez urządzenia. Od układu po rozmiar i kolor czcionki, CSS przekształca zawartość w pięknie wyglądające strony.



Jak wygląda CSS?

CSS to duży język — można stylizować wiele różnych rzeczy! Ale jego składnia jest prosta i wymaga tylko kilku zasad.





Elementy HTML mają różne właściwości, które CSS może stylizować. ten kolor właściwość ustawia kolor pierwszego planu (np. tekstu). Rozmiar czcionki zależy od rozmiar czcionki własność.

Każdą właściwość można ustawić na obsługiwaną wartość. Przypisanie wartości do właściwości to „deklaracja”. Generalnie wyglądają tak:



property: value

Na przykład:

jak zmienić system Windows w ikonie aplikacji 10
color: red

Wartości dla różnych właściwości mogą wyglądać bardzo różnie, nawet wartości dla tej samej właściwości. Na przykład, oto jeszcze dwa sposoby napisania poprzedniej deklaracji:



color: #ff0000
color: rgb(255, 0, 0)

Jak HTML i arkusze stylów łączą się ze sobą

Możesz łączyć HTML i CSS na kilka różnych sposobów, z których każdy ma swoje zalety.

Wbudowane style pisania

Najprostszą metodą jest dołączenie deklaracji stylów bezpośrednio do elementu w pliku HTML. Możesz to zrobić za pomocą styl atrybut podobny do tego:




Most of this text is red …


… but this isn’t!


Chociaż stylizacja elementów w linii może być wygodna, ma kilka wad. Na początek komplikuje kod HTML, utrudniając odczytanie na pierwszy rzut oka. Jest to również niewygodne w utrzymaniu: wyobraź sobie długi dokument, w którym chcemy ustawić kolor każdego akapitu. To jest CSS, ale nie są to „Arkusze stylów”.

Osadzanie stylów w głowie

Możesz zacząć widzieć, jak wygląda arkusz stylów za pomocą drugiego mechanizmu, osadzanie . Stosując to podejście, zbieramy wszystkie deklaracje stylów razem w a styl element w głowa naszego dokumentu. Będzie to wyglądać mniej więcej tak:





/* style instructions go here */



...

Jednak nasze instrukcje dotyczące stylu wymagają nieco więcej szczegółów niż wcześniej. Ponieważ przenieśliśmy je do głowy, każda reguła nie jest już powiązana z elementem. Mogliśmy zadeklarować kolor czerwony , ale jaki powinien mieć ten kolor?

Tutaj wkraczają selektory CSS. Pozwalają one celować w określone części strony i definiować ich styl w jednym miejscu, używając następującej składni:

ile kosztuje cię czerwona rurka
selector {
declaration1;
declaration2;
/* etc. */
}

Na przykład, aby stylizować tekst akapitów na kolor niebieski, możemy określić:

p {
color: blue;
}

W tym przykładzie selektor to po prostu P , który pasuje do wszystkich elementów akapitu w naszym dokumencie. Pokoloruje cały tekst na niebiesko, o ile jest w

Podłączanie zewnętrznego arkusza stylów

Ostatnią metodą na pokrycie jest łączenie. Jest to zdecydowanie najbardziej przydatne podejście i takie, na które powinieneś wybierać przez większość czasu. Zamiast osadzania reguł CSS w styl bezpośrednio w dokumencie, możesz przenieść je do osobnego pliku.


Wklej ten kod wewnątrz tagi pliku HTML, aby połączyć zewnętrzny arkusz stylów.

Potęga CSS

Dzięki połączonej metodzie wykorzystujemy podstawową moc CSS: separację obaw. Wszystkie informacje semantyczne — co oznacza treść — są zawarte w dokumencie HTML. Stylizacja — jak wygląda — znajduje się w osobnym pliku, arkuszu stylów.

Oto tylko kilka korzyści z tej separacji:

  • Możesz zmienić arkusz stylów, zmieniając tylko odniesienie do pliku. Może się to nawet dziać dynamicznie. W jednym kroku możesz zmienić cały wygląd i działanie strony.
  • Wiele stron może współdzielić te same arkusze stylów zgodnie z wymaganiami. Zmieniając jeden plik, możesz zaktualizować wygląd i działanie całej witryny.
  • Podział strony na „treść” i „styl” ma zalety techniczne. Serwery proxy i przeglądarki mogą osobno buforować poszczególne pliki. Oznacza to, że witryna może wysłać informacje o stylu tylko raz, zamiast umieszczać je na każdej stronie.
  • Podczas współpracy różne zespoły mogą pracować nad swoimi mocnymi stronami, tworząc i edytując oddzielne pliki bez wzajemnego wpływu.

Wyjaśnienie kaskady

Wiele się nauczyłeś o stylach i arkuszach stylów, ale co z kaskadową częścią CSS?

Kaskada decyduje o tym, które style mają być używane, gdy dostępnych jest wiele arkuszy stylów. Widziałeś już, jak autor może określać style swoich treści. Ale inną cechą CSS jest to, że daje to również czytelnikom i producentom przeglądarek możliwość wypowiedzenia się w tej sprawie.

Być może zastanawiałeś się już nad domyślnymi stylami. Na przykład, jak działa H1 element wydaje się duży i odważny, nawet bez arkuszy stylów autora? Dzieje się tak dzięki zestawowi specjalnych reguł, które tworzą arkusz stylów agenta użytkownika. Zasady te są początkowo stosowane przez przeglądarkę internetową do każdej odwiedzanej strony.

Kaskada określa, że ​​arkusz stylów autora jest stosowany po stylach klienta użytkownika. Jeśli nasza przeglądarka mówi, że nagłówki są pogrubione, ale autor strony deklaruje, że nagłówki na tej stronie są lekkie, to będą one jasne.

Istnieje inne źródło arkusza stylów, które przekazuje pewną kontrolę czytelnikowi. Każdy użytkownik sieci może teoretycznie utrzymywać arkusz stylów użytkownika z niestandardowymi regułami. Te znajdują się pośrodku: reguły użytkownika zastąpią domyślne ustawienia przeglądarki, ale same zostaną zastąpione przez style autora. Niestety, obsługa arkuszy stylów użytkownika nigdy nie była szeroko rozpowszechniona.

Kierowanie na różne media

Arkuszy stylów można używać w różnych kontekstach, poza ekranem. ten połowa atrybut połączyć element definiuje typy mediów, których dotyczy arkusz stylów. Na przykład możesz zdefiniować a arkusz stylów do druku używając znaczników takich jak:

Wspólne style można gromadzić w jednym globalnym arkuszu stylów, a style specyficzne dla multimediów w osobnych plikach. Istnieją nawet typy multimediów, które mogą służyć do prezentacji dźwiękowych lub brajlowskich treści. CSS to ważne narzędzie poprawiające dostępność.

Związane z: Jak przeglądać Internet, jeśli jesteś niewidomy lub niedowidzący

jak się dowiedzieć, czy Twój telefon komórkowy jest na podsłuchu?

Witryny takie jak Wikipedia używają CSS do kontrolowania stylu drukowania, ukrywania niechcianych elementów i upraszczania układu.

CSS sprawia, że ​​HTML wygląda dobrze

Kaskadowe arkusze stylów obejmują wiele: kaskadę, dziedziczenie, selektory, źródła, media itp. Ale ich moc umożliwia współczesną sieć. Jest to nośnik, który zapewnia wbudowane funkcje wielokrotnego użytku, elastyczność i ułatwienia dostępu.

Aby zobaczyć pełną moc CSS i ile ma do zaoferowania, zapoznaj się z naszą ściągawką zawierającą wszystkie podstawowe właściwości CSS3.

Udział Udział Ćwierkać E-mail Ściągawka z podstawowymi właściwościami CSS3

Opanuj podstawową składnię CSS dzięki naszej ściągawce do właściwości CSS3.

Czytaj dalej Powiązane tematy
  • Programowanie
  • Tworzenie stron internetowych
  • CSS
O autorze Bobby Jack(58 opublikowanych artykułów)

Bobby jest entuzjastą technologii, który przez prawie dwie dekady pracował jako programista. Pasjonuje się grami, pracuje jako redaktor recenzji w magazynie Switch Player i jest zanurzony we wszystkich aspektach publikowania online i tworzenia stron internetowych.

Więcej od Bobby'ego Jacka

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować