Strony internetowe składają się z wielu pojedynczych elementów, w tym obrazów, tekstu i różnych dokumentów. Do dokumentów tych zalicza się nie tylko te, które można powiązać z różnych stron, takich jak pliki PDF, ale także dokumenty, które służą do konstruowania samych stron, takie jak dokumenty HTML w celu określenia struktury strony i dokumentów CSS (Cascading Style Sheet) dyktować wygląd strony. W tym artykule zagłębimy się w CSS, opisując, czym jest i gdzie jest obecnie używany na stronach internetowych.
Lekcja historii CSS
CSS został po raz pierwszy opracowany w 1997 roku jako sposób dla twórców stron internetowych do definiowania wyglądu wizualnego stron internetowych, które tworzyli. Jego celem było umożliwienie specjalistom od stron internetowych oddzielenia treści i struktury kodu witryny od projektu wizualnego, co było niemożliwe przed tym czasem.
Rozdzielenie struktury i stylu umożliwia HTML wykonanie większej części funkcji, na której pierwotnie się opierał - znaczników zawartości, bez martwienia się o projekt i układ samej strony, coś powszechnie znanego jako "wygląd i styl" strony.
CSS nie zyskał na popularności aż do około 2000 roku, kiedy przeglądarki zaczęły używać więcej niż podstawowe aspekty czcionek i kolorów tego języka znaczników. Obecnie wszystkie nowoczesne przeglądarki obsługują wszystkie poziomy CSS 1, większość CSS Level 2, a nawet większość aspektów poziomu 3 CSS. W miarę rozwoju CSS i wprowadzania nowych stylów przeglądarki internetowe zaczęły wdrażać moduły, które zapewniają nowe wsparcie CSS do tych przeglądarek i daj projektantom stron internetowych nowe, potężne narzędzia do stylizacji.
W ciągu (wielu) lat byli wybrani projektanci stron internetowych, którzy odmówili stosowania CSS do projektowania i tworzenia stron internetowych, ale ta praktyka już dziś nie istnieje. CSS jest obecnie szeroko stosowanym standardem w projektowaniu stron internetowych i trudno byłoby znaleźć każdego, kto pracowałby dziś w branży, który nie miałby co najmniej podstawowej wiedzy na temat tego języka.
CSS to skrót
Jak już wspomniano, termin CSS oznacza "Arkusz stylów kaskadowych". Przerwijmy to zdanie, aby dokładniej wyjaśnić, co robią te dokumenty.
Słowo "arkusz stylów" odnosi się do samego dokumentu (np. HTML, pliki CSS to tak naprawdę tylko dokumenty tekstowe, które można edytować za pomocą różnych programów). Arkusze stylów są używane do projektowania dokumentów przez wiele lat. Są to specyfikacje techniczne układu, drukowane lub online. Projektanci druków od dawna stosują arkusze stylów, aby zapewnić, że ich projekty są drukowane dokładnie według ich specyfikacji. Arkusz stylów strony internetowej służy temu samemu celowi, ale z dodatkową funkcjonalnością mówi również przeglądarce internetowej, jak renderować przeglądany dokument. Dzisiaj arkusze stylów CSS mogą również używać zapytań o media, aby zmienić sposób, w jaki strona wyszukuje różne urządzenia i rozmiary ekranu. Jest to niezwykle ważne, ponieważ pozwala na renderowanie pojedynczego dokumentu HTML zgodnie z ekranem używanym w celu uzyskania do niego dostępu.
Kaskada to naprawdę szczególna część terminu "kaskadowy arkusz stylów". Arkusz stylów WWW ma za zadanie kaskadowo przechodzić przez serię stylów w tym arkuszu, jak rzeka nad wodospadem. Woda w rzece uderza wszystkie skały w wodospadzie, ale tylko te na dnie wpływają dokładnie tam, gdzie przepłynie woda. To samo dotyczy kaskady w arkuszach stylów strony.
Na każdą stronę WWW ma wpływ co najmniej jeden arkusz stylów, nawet jeśli projektant stron internetowych nie stosuje żadnych stylów. Ten arkusz stylów to arkusz stylów użytkownika użytkownika - znany również jako domyślne style, które przeglądarka internetowa będzie używać do wyświetlania strony, jeśli nie zostaną dostarczone żadne inne instrukcje. Na przykład domyślnie hiperłącza są oznaczone na niebiesko i są podkreślone. Te style pochodzą z domyślnego arkusza stylów przeglądarki internetowej. Jeśli projektant stron internetowych zapewnia inne instrukcje, przeglądarka musi wiedzieć, które instrukcje mają pierwszeństwo. Wszystkie przeglądarki mają swoje własne style domyślne, ale wiele z tych ustawień domyślnych (takich jak niebieskie podkreślone linki tekstowe) są udostępniane we wszystkich lub w większości głównych przeglądarek i wersji.
Dla innego przykładu domyślnej przeglądarki, w naszej przeglądarce domyślną czcionką jest "Times New Roman" o rozmiarze 16. Prawie żadna ze stron, które odwiedzamy na wyświetlaczu w tej rodzinie i rozmiarze czcionki. Dzieje się tak dlatego, że kaskada definiuje, że drugie arkusze stylów, które są ustawiane przez samych projektantów, zmieniają definicję rozmiaru czcionki i rodziny, zastępując domyślne ustawienia przeglądarki internetowej. Wszelkie arkusze stylów tworzone dla strony internetowej będą miały większą specyfikę niż domyślne style przeglądarki, więc te wartości domyślne będą miały zastosowanie tylko wtedy, gdy arkusz stylów nie zastąpi ich. Jeśli chcesz, aby łącza były niebieskie i podkreślone, nie musisz nic robić, ponieważ jest to ustawienie domyślne, ale jeśli plik CSS Twojej witryny mówi, że linki powinny być zielone, ten kolor zastąpi domyślny niebieski. Podkreślenie pozostanie w tym przykładzie, ponieważ nie określono inaczej.
Gdzie jest używany CSS?
CSS może również służyć do definiowania wyglądu stron internetowych podczas przeglądania na innych nośnikach niż przeglądarka internetowa. Można na przykład utworzyć arkusz stylów drukowania, który określi sposób drukowania strony internetowej. Ponieważ elementy strony internetowej, takie jak przyciski nawigacyjne lub formularze internetowe, nie będą miały żadnego celu na wydrukowanej stronie, arkusz stylów drukowania może być użyty do "wyłączenia" tych obszarów podczas drukowania strony.Chociaż nie jest to powszechna praktyka w wielu witrynach, opcja tworzenia arkuszy stylów wydruku jest potężna i atrakcyjna (z naszego doświadczenia - większość profesjonalistów internetowych nie robi tego po prostu dlatego, że budżet strony nie wymaga dodatkowej pracy ).
Dlaczego CSS jest ważny?
CSS to jedno z najpotężniejszych narzędzi, które może nauczyć się projektant stron internetowych, ponieważ dzięki niemu możesz wpłynąć na cały wygląd witryny. Dobrze napisane arkusze stylów można szybko aktualizować i zezwalać stronom na zmianę priorytetów wizualnie wyświetlanych na ekranie, co z kolei pokazuje wartość i fokus dla odwiedzających, bez konieczności wprowadzania jakichkolwiek zmian w podstawowych znacznikach HTML.
Głównym wyzwaniem dla CSS jest to, że jest sporo do nauczenia się - i przy zmieniających się codziennie przeglądarkach, to, co działa dobrze dzisiaj, może nie mieć sensu jutro, gdy nowe style są wspierane, a inne są odrzucane lub tracą na wartości z jednego powodu lub innego .
Ponieważ CSS może kaskadować się i łączyć, i biorąc pod uwagę, w jaki sposób różne przeglądarki mogą interpretować i implementować dyrektywy w inny sposób, CSS może być trudniejszy niż zwykły HTML do opanowania. CSS zmienia się również w przeglądarkach w taki sposób, że HTML naprawdę nie. Jednak gdy zaczniesz używać CSS, przekonasz się, że wykorzystanie arkuszy stylów daje niewiarygodną elastyczność w układaniu stron internetowych i definiowaniu ich wyglądu i stylu. Po drodze zdobędziesz "worek sztuczek" stylów i podejść, które pracowały dla ciebie w przeszłości i które możesz wykorzystać ponownie, gdy budujesz nowe strony internetowe w przyszłości.
Oryginalny artykuł Jennifer Krynin. Edytowane przez Jeremy Girard w dniu 7/5/17
