Първи стъпки в CSS

След поредицата „Първи стъпки в HTML„, следват и първи стъпки в CSS.

След като завършим и тази част ще направим едно практическо приложение. За да можем да го изпълним обаче трябва да се запознаем със стилове на страница.

CSS означава Cascading Style Sheets (каскадни стилови схеми). „Стилови схеми“, защото схематично се описва външния вид/стила на страницата. Каскадни защото можем да прилагаме стил за елементи вложени по определен начин.

Подобно на HTML, CSS е компютърен, но не и програмен език. За разлика обаче, CSS не е markup / описателен език, а е схематичен език.

Какво означава „схематичен език“?

Под думата „схема“ много хора си представят чертеж, диаграма или нещо подобно. Схемата в по-широк смисъл е някакъв шаблон, който може да се прилага по различен начин.

В първи курс по математика учихме пространствено разположение на точки, вектори и равнини. Тогава отначало имах затруднения с тези задачи. На една консултация попитах асистентката дали няма просто някаква „схема“ за решаването им. Веднага след като употребих думата „схема“ сам се смутих, тъй като не ми звучеше академично.

Асистентката обаче разбра какво имам предвид, усмихна се и просто ми каза:

„В такива задачи винаги имаш информация за две от трите неща – точка, вектор/права или равнина. Това което трябва да направиш е да замениш известните във формулите, за която имаш данни“.

Ето това си е схема!

Синтаксис на CSS

Синтаксисът на CSS е създаден именно за markup езици (като HTML). Всяка дефиниция започва със селектор. В основния случай това е името на тага, който искаме да стилнем. След селектора се пише и декларацията, която е заградена във фигурни/големи скоби – { и }.

selector { declaration }

Дефинициите се състоят от двойки белег: стойност (property: value), разделени с точка и запетая.

p { color: black; }

Последният пример служи за да окажем на браузъра да показва всички параграфите като използва черен цвят на текста.

Оформяне на кода

Интервалите (whitespace) в CSS не оказват значение. Можете да въвеждате дефинициите на един ред:

p { color: black; font-size: 12px; text-align: left; }

Или всеки белег (property) да е на нов ред:

p {
    color: black;
    font-size: 12px;
    text-align: left;
}

Коментиране в CSS

Във всеки компютърен език има начин за оставяне на коментари. Коментарите се използват за оставяне на бележки към други програмисти, които може да разглеждат кода ни. Това може да са колеги, които работят по същия сайт или други заинтересовани лица.

Коментарите в CSS се въвеждат в блок. Този блок започва с /* и завършва с */ . Текстът, който стои в блока не се обработва от браузъра. С други думи – не оказва влияние на начина, по който изглежда страницата ни.

/* Това е един прост пример за коментари в CSS. Няма значение колко е дълъг текстът или на колко реда е, стига да е затворен в правилен блок */
p { color: #000; }
/* Това е един прост пример за коментари в CSS. Няма значение колко е дълъг текстът или на колко реда е, стига да е затворен в правилен блок */

p { color: #000; }

CSS at-rules (@-правила)

В CSS съществуват и допълнителни правила (всяко със специфичен синтаксис), започващи с „@“. По-надолу ще разгледаме някои от тях.

@import

В CSS можем да зареждаме външни файлове, използвайки @import. Това обаче не е препоръчително, тъй като браузърите трябва да правят по няколко заявки към сървъра, което води до забавяне.

Много по лесно е да се зареди един файл, който е 20KB, отколкото 10 файла по 2KB.

Все пак по ваше усмотрение можете да го използвате по следния начин:

@import url('other-style.css');

В случая ще заредите всички стилове от файла other-style.css. Пътят, който се подава в url() може да е абсолютен или релативен.

Кавичките в скобите не са задължителни, стига да нямате някакви специални символи в адреса на файла.

@charset

Макар и да не е задължително е добре в началото на CSS документите да се оказва и charset-а им по следния начин:

@charset "utf-8";

@media

Стиловете могат да бъдат прилагани и само за определени устройства. Това се указва в CSS по следния начин:

@media screen {
    p { color: #000; }
}

Ключовата дума screen след @media оказва, че тези стилове са валидни само, ако страницата се разглежда на компютърен монитор.

Освен screen, съществуват още:

  • all (всички) – за всякакви устройства
  • braille (браилови) – за устройства с физически осезателен интерфейс
  • embossed (релефни) – за браилови принтери
  • handheld – за джобни устройства с малък екран и предполагаемо ниска интернет скорост (джобен компютър, мобилен телефон)
  • print (принтирани) – за принтери, как да изглежда съдържанието след разпечатване
  • projection (прожекционни) – за прожекторни устройства (такива, на които се прави презентация)
  • speech (говорни) – за устройства, които генерират звуково съдържание (хора със зрителни увреждания използват софтуер, който чете съдържанието на страницата)
  • tty – за устройства с фиксиран брой символи на ред
  • tv (телевизори) – за телевизори, които по принцип имат по-ниска разделителна способност от компютърните монитори, както и се скролират по-трудно

Медийни заявки за големина на екрана

В последните години употребата на @media е в по-друга насока. Вече се използва не толкова за оказване на тип устройство, а размер на екрана.

За екрани с резолюция в широчина равни на или по-малки от 1024px пишем:

@media (max-width: 1024px) {
    /* тук описваме стиловете за 1024px широчина и надолу */
}

Стойностите са размери на екрана са:

  • max-width – за по-малко от или равно на (при широчина)
  • min-width – за по-голямо от или равно на (при широчина)
  • max-height – по-малко от или равно на (за височина)
  • min-height – по-голямо от или равно на (за височина)

Тези стойности трябва да са в скоби както е описано по-горе. Това е по 2 причини:

  1. четирите ключови думи се използват като белег (property), който трябва да има стойност (value)
  2. понеже са нови не трябва да чупят старите; ако не ги заградим в скоби, браузърите ще търсят тип устройство, а не характеристики на екрана

Медийни заявки за ориентация на екрана

Може да използвате @media (orientation: landscape) и @media (orientation: portrait), за да разграничите „легнало“ и „право“ устройство (примерно телефон или таблет).

Полезни връзки (на английски):

  1. CSS Syntax and Selectors
  2. CSS syntax
  3. Responsive Web Design – Media Queries
  4. Media queries for common device breakpoints

Един отговор за “Първи стъпки в CSS”

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните ви за коментари.