Strony internetowe składają się z wielu pojedynczych elementów, w tym obrazów, tekstu i różnych dokumentów. Dokumenty te obejmują nie tylko te, do których można prowadzić linki z różnych stron, takie jak pliki PDF, ale także dokumenty używane do tworzenia samych stron, takie jak Dokumenty HTML do określenia struktury strony i dokumentów CSS (Cascading Style Sheet) do dyktowania wyglądu 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 na definiowanie wizualnego wyglądu tworzonych przez nich stron internetowych. Miało to na celu umożliwienie profesjonalistom internetowym: oddziel zawartość oraz struktura kodu strony z projektu wizualnego, co wcześniej nie było możliwe.
Oddzielenie struktury i stylu umożliwia HTMLowi wykonywanie większej liczby funkcji, na których został pierwotnie oparty — znaczników treści, bez martwienia się o projekt i układ samej strony, coś powszechnie znanego jako „wygląd i styl” strona.
Ewolucja CSS
CSS zyskał popularność dopiero około 2000 roku, kiedy przeglądarki internetowe zaczęły używać więcej niż tylko podstawowych aspektów czcionek i kolorów tego języka znaczników. Obecnie wszystkie nowoczesne przeglądarki obsługują cały CSS Level 1, większość CSS Level 2, a nawet większość aspektów CSS Level 3. Ponieważ CSS wciąż ewoluuje i wprowadzane są nowe style, przeglądarki internetowe zaczęły wdrażać moduły które wprowadzają nową obsługę CSS do tych przeglądarek i dają projektantom stron internetowych potężne nowe narzędzia do stylizacji z.
W (wielu) latach wybrani projektanci stron internetowych odmówili używania CSS w celu projektowanie i tworzenie stron internetowych, ale ta praktyka prawie zniknęła z dzisiejszej branży. CSS jest obecnie szeroko stosowanym standardem w projektowaniu stron internetowych i trudno byłoby znaleźć dziś kogoś pracującego w branży, który nie miałby przynajmniej podstawowej wiedzy na temat tego języka.
CSS to skrót
Jak już wspomniano, termin CSS oznacza „Kaskadowy arkusz stylów”. Podzielmy nieco to zdanie, aby pełniej wyjaśnić, co robią te dokumenty.
Słowo „arkusz stylów” odnosi się do samego dokumentu (podobnie jak 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 od wielu lat. Są to specyfikacje techniczne układu, zarówno drukowanego, jak i internetowego. Projektanci druku od dawna używają arkuszy stylów, aby zapewnić, że ich projekty są drukowane dokładnie według ich specyfikacji. Arkusz stylów dla strony internetowej służy temu samemu celowi, ale z dodatkową funkcjonalnością informowania przeglądarki internetowej, jak renderować oglądany dokument. Obecnie można również używać arkuszy stylów CSS zapytania medialne zmienić wygląd strony page różne urządzenia i rozmiary ekranu. Jest to niezwykle ważne, ponieważ umożliwia renderowanie pojedynczego dokumentu HTML w zależności od ekranu używanego do uzyskania do niego dostępu.
Kaskada to naprawdę specjalna część terminu „kaskadowy arkusz stylów”. Arkusz stylów internetowych ma przechodzić kaskadowo przez serię stylów w tym arkuszu, jak rzeka nad wodospadem. Woda w rzece uderza we wszystkie skały wodospadu, ale tylko te na dole wpływają dokładnie na to, gdzie popłynie woda. To samo dotyczy kaskady w arkuszach stylów witryn internetowych.
Arkusze stylów projektanta zastępują domyślne arkusze stylów przeglądarki
Na każdą stronę internetową ma wpływ co najmniej jeden arkusz stylów, nawet jeśli projektant nie stosuje żadnych stylów. Ten arkusz stylów jest arkusz stylów agenta użytkownika — znany również jako domyślne style, których przeglądarka internetowa użyje do wyświetlenia strony, jeśli nie zostaną podane żadne inne instrukcje. Na przykład hiperłącza domyślnie są stylizowane na niebiesko i są podkreślone. Te style pochodzą z domyślnego arkusza stylów przeglądarki internetowej. Jeśli jednak projektant stron internetowych udostępni inne instrukcje, przeglądarka będzie musiała wiedzieć, które instrukcje mają pierwszeństwo. Wszystkie przeglądarki mają swoje własne style domyślne, ale wiele z tych domyślnych (takich jak niebieskie, podkreślone linki tekstowe) jest wspólnych dla wszystkich lub większości głównych przeglądarek i wersji.
Inny przykład domyślnej przeglądarki, w naszej przeglądarce internetowej, domyślną czcionką jest „Czcionka Times New Roman” wyświetlany w rozmiarze 16. Jednak prawie żadna ze stron, które odwiedzamy, nie wyświetla się w tej rodzinie czcionek i rozmiarze. Dzieje się tak, ponieważ kaskada określa, że drugie arkusze stylów, które są ustalane przez samych projektantów, mają przedefiniować rozmiar czcionki i rodziny, nadpisując domyślne ustawienia naszej przeglądarki internetowej. Wszelkie arkusze stylów, które utworzysz dla strony internetowej, będą bardziej szczegółowe niż domyślne style przeglądarki, więc te ustawienia domyślne będą miały zastosowanie tylko wtedy, gdy Twój arkusz stylów ich nie zastąpi. Jeśli chcesz, aby linki 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śliłeś inaczej.
Gdzie jest używany CSS?
CSS może być również użyty do określenia, jak strony internetowe powinny wyglądać, gdy są oglądane w innych mediach niż przeglądarka internetowa. Na przykład możesz utworzyć arkusz stylów drukowania, który określi sposób drukowania strony internetowej. Ponieważ elementy strony sieci Web, takie jak przyciski nawigacyjne lub formularze sieci Web, nie będą miały zastosowania na drukowanej stronie, arkusz stylów drukowania może służyć do „wyłączania” tych obszarów podczas drukowania strony. Chociaż nie jest to powszechna praktyka w wielu witrynach, opcja tworzenia arkuszy stylów drukowania jest potężna i atrakcyjna (w naszym doświadczenie — większość specjalistów internetowych nie robi tego tylko dlatego, że zakres budżetu witryny nie wymaga dodatkowej pracy work będzie zrobione).
Dlaczego CSS jest ważny?
CSS jest jednym z najpotężniejszych narzędzi, jakich może nauczyć się projektant stron internetowych, ponieważ dzięki niemu możesz wpłynąć na cały wygląd strony internetowej. Dobrze napisane arkusze stylów można szybko aktualizować i umożliwiać witrynom zmianę tego, co jest wizualnie priorytetowe ekran, który z kolei pokazuje wartość i koncentrację dla odwiedzających, bez konieczności wprowadzania jakichkolwiek zmian w zasadniczy Znaczniki HTML.
Głównym wyzwaniem CSS jest to, że trzeba się sporo nauczyć — a przy zmieniających się codziennie przeglądarkach, to co dziś działa dobrze może nie mieć sensu jutro, ponieważ nowe style stają się wspierane, a inne są porzucane lub wypadają z łask z jednego powodu lub inne.
Krzywa uczenia się CSS jest tego warta
Ponieważ CSS można kaskadować i łączyć, a biorąc pod uwagę, jak różne przeglądarki mogą inaczej interpretować i implementować dyrektywy, CSS może być trudniejszy do nauczenia niż zwykły HTML. CSS zmienia się również w przeglądarkach w sposób, w jaki HTML tak naprawdę nie. Jednak gdy zaczniesz używać CSS, zobaczysz, że wykorzystanie mocy arkuszy stylów zapewni niewiarygodną elastyczność w układaniu stron internetowych oraz definiowaniu ich wyglądu i stylu. Po drodze zdobędziesz „torbę sztuczek” stylów i podejść, które sprawdziły się w przeszłości i do których możesz ponownie się zwrócić budować nowe strony internetowe w przyszłości.