Co to jest CSS?

Opublikowany: 2019-03-08

Ostatnia aktualizacja 22 kwietnia 2020 r.

Cascading Style Sheets for the web W sieci WWW (www) CSS to akronim od Cascading Style Sheets. CSS to język arkuszy stylów używany do opisywania prezentacji dokumentu napisanego w języku znaczników, zwykle HTML. CSS określa, w jaki sposób układ i zawartość strony internetowej mają być wyświetlane na ekranie, papierze lub w innych mediach. CSS oszczędza dużo pracy, ponieważ kontroluje układ wielu stron internetowych jednocześnie.

Dokument jest zwykle plikiem tekstowym o strukturze opartej na języku znaczników, takim jak HTML. Prezentacja dokumentu oznacza przekształcenie go w użyteczną formę prezentowaną wizualnie na ekranie komputera przez przeglądarkę internetową, taką jak Chrome, Firefox, Opera, Microsoft Edge i inne. Przeglądarki internetowe stosują reguły CSS do dokumentu, aby wpływać na sposób ich wyświetlania.

Ten blog to ogólne wprowadzenie do kaskadowych arkuszy stylów (CSS), określające, czym one są i do czego służą w Internecie. Jest to wstęp, który odpowiada na podstawowe pytania na ten temat bez zagłębiania się w cudowny i interesujący świat CSS.

To! Firma świadczy urzekające i skuteczne usługi projektowania stron internetowych dla agencji na całym świecie. Dowiedz się więcej o naszych usługach White Label Web Design Services oraz o tym, jak możemy pomóc Tobie i Twoim klientom w tworzeniu lub ulepszaniu ich obecności w sieci. Zacznij dziś!

CSS zainicjowany w 1994 roku. Został stworzony i jest utrzymywany przez W3C. Grupa Robocza CSS W3C tworzy dokumenty zwane specyfikacjami. Po omówieniu i oficjalnym zatwierdzeniu specyfikacji przez członków W3C, stają się one rekomendacją.

Cascading Style Sheets level 1 (CSS1) wyszedł z W3C jako rekomendacja w grudniu 1996. CSS2 stał się rekomendacją W3C w maju 1998. CSS level 3, który został zapoczątkowany w 1998, jest wciąż w fazie rozwoju. CSS3 to połączenie specyfikacji CSS2 i nowych specyfikacji zwanych modułami. Specyfikacja CSS jest tworzona z zestawu właściwości, których wartości są ustawione tak, aby aktualizować sposób wyświetlania treści HTML.

CSS uprościł proces prezentacji naszych dokumentów w języku znaczników. Możesz kontrolować różne właściwości, takie jak:

  • kolor tekstu,
  • styl czcionek,
  • odstępy między akapitami,
  • jak są zwymiarowane i ułożone kolumny,
  • obrazy lub kolory tła,
  • projekty layoutów,
  • różnice w wyświetlaniu w zależności od rozmiarów ekranu (Media Queries).

Jak stosujemy CSS?

Cascading Style Sheets for the web Istnieją cztery sposoby zastosowania stylów do naszych dokumentów HTML. Najczęściej używanymi metodami są zewnętrzne pliki CSS, które są osadzone w elemencie <style> wewnątrz naszego dokumentu HTML. Jeśli określone są różne style arkuszy, style zostaną połączone kaskadowo w nowe style o następującym priorytecie (wyższa liczba, mniej ważne):

Priorytet 4: Domyślna przeglądarka

Przeglądarki zawierają wstępnie napisane dla nas style. Czasami nie chcemy tych wstępnie załadowanych stylów, więc możemy je zastąpić. Istnieją przeglądarki, które nie obsługują nowoczesnych specyfikacji CSS lub mają własną formę korzystania z właściwości CSS. Z tego powodu powinniśmy zachować ostrożność podczas pisania naszego CSS w dokumencie HTML.

That! Company White Label Services

Priorytet 3: Zewnętrzny plik arkusza stylów

Element <link> może być użyty do dołączenia zewnętrznego pliku arkusza stylów do twojego dokumentu HTML. Zewnętrzny arkusz stylów to osobny plik tekstowy z rozszerzeniem „.css”. Definiujemy wszystkie reguły stylów w tym pliku tekstowym, a następnie dołączamy ten plik do dowolnego dokumentu HTML wewnątrz znaczników <head>…</head> za pomocą elementu <link>.

 <link rel="stylesheet" type="text/css" href="style.css" />

Priorytet 2: Osadzony w dokumencie HTML

Możemy umieścić nasze reguły CSS w dokumencie HTML, używając elementu <style> do ich przechowywania. Tagi <style>…</style> są umieszczane wewnątrz tagów <head>…</head>.

 <styl>
 selektor {
 wartość nieruchomości;
 }
 </style>

Priorytet 1: Inline w naszych elementach HTML

Możemy użyć atrybutu style dowolnego elementu HTML, aby zdefiniować reguły stylu. Te zasady będą miały zastosowanie tylko do tego elementu.

 <p>Witaj świecie!</p>

Nadpisywanie reguł CSS

Opisaliśmy cztery sposoby zastosowania reguł arkusza stylów do naszego dokumentu HTML. Oto zasada zastępowania dowolnej reguły arkusza stylów:

Każdy wbudowany arkusz stylów ma najwyższy priorytet. Tak więc zastąpi każdą regułę zdefiniowaną w znacznikach <style>…</style> lub reguły zdefiniowane w dowolnym zewnętrznym pliku arkusza stylów.

Każda reguła zdefiniowana w znacznikach <style>…</style> zastąpi reguły zdefiniowane w dowolnym zewnętrznym pliku arkusza stylów.

Każda reguła zdefiniowana w zewnętrznym pliku arkusza stylów ma najniższy priorytet, a reguły zdefiniowane w tym pliku będą stosowane tylko wtedy, gdy powyższe dwie reguły nie mają zastosowania.

Selektory CSS

Reguła CSS jest interpretowana przez przeglądarkę, a następnie stosowana do odpowiednich elementów w naszym dokumencie HTML. Reguła stylu składa się z trzech części:

  • Selector − służy do „znajdowania” (lub wybierania) elementów HTML na podstawie ich nazwy elementu, identyfikatora, klasy, atrybutu i innych.
  • Property − to rodzaj stylu CSS. Może to być kolor, obramowanie, tło, czcionka, wyświetlacz, wyrównanie tekstu, marginesy, odstępy między wierszami itp.
  • Wartość − jest przypisana do właściwości. Na przykład właściwość background-color może mieć wartość koloru czerwonego lub zielonego.

Składnia reguły CSS

Składnia reguły CSS składa się z selektora oraz deklaracji własności i wartości:

 selektor { właściwość: wartość; }

Selektor wskazuje element HTML do stylu.

Blok deklaracji (w nawiasach klamrowych) zawiera jedną lub więcej deklaracji oddzielonych średnikami.

Każda deklaracja zawiera nazwę właściwości CSS i wartość oddzielone dwukropkiem.

Możemy napisać regułę CSS, a następnie ponownie użyć tej samej reguły w wielu elementach i dokumentach HTML. Używając CSS, nie musimy za każdym razem pisać atrybutów tagów HTML inline, które dotyczą tylko stylizowanego elementu. Po prostu piszemy jedną regułę CSS i stosujemy ją do wszystkich wystąpień tego elementu tagu. Tak więc mniej kodu oznacza szybsze strony.

Zmiany i utrzymanie naszego dokumentu HTML są proste, gdy używamy zewnętrznych lub osadzonych reguł stylów. Po prostu zmieniamy regułę stylu, a wszystkie elementy w naszych dokumentach HTML zostaną automatycznie zaktualizowane. Dzięki CSS mamy dostęp do wielu rozmiarów ekranu urządzenia za pośrednictwem zapytań o media. Zapytania o media pozwalają nam zoptymalizować nasz dokument HTML dla więcej niż jednego typu urządzenia. Korzystając z tego samego dokumentu HTML, możemy prezentować różne wersje naszych stron internetowych.

Czytaj więcej

Ponownie, ten post ledwo otwiera zainteresowanie czytelnika poznawaniem CSS i różnorodnością dostępnych rzeczy do kontrolowania naszych dokumentów HTML. To bardzo potężna i bardzo ważna część sieci. Niektóre główne zasoby, w których możesz się w to głębiej zagłębić, to:

Szkoła W3C

MDN

Samouczek CSS