Меню

Първи стъпки в правене на сайтове

Влез Излез

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

В предишните уроци разгледахме някои основни неща за HTML – структура на една страница, тагове, атрибути. Струва ми се, че най-добрият начин да се продължи напред с уроците за HTML е с практическо приложение. За да стигнем до там обаче е нужно да имаме някакви познания относно CSS и именно в този урок ще разгледаме някои основни неща за него.

Зад съкращението CSS стои Cascading Style Sheetsкаскадни стилови схеми. Стилови схеми, защото схематично се описва външния вид/стила на страницата, към която ще прилагаме CSS-а, а каскадни поради възможността да прилагаме даден стил за елементи вложени по определен начин – за това ще стане дума отново по-късно.

Подобно на HTML, CSS е компютърен, но не и програмен език. За разлика пък, CSS не markup / описателен език, а е схематичен език. Какво трябва да означава това? Под думата „схема“ много хора си представят чертеж, диаграма, таблица или нещо подобно. Схемата в по-широк смисъл е някакъв шаблон, който може да се прилага по различен начин. В първи курс, когато по математика учихме пространствено разложожение на точки, вектори и равнини, отначало имах известнви затруднения с тези задачи. На една консултация попитах асистентката дали няма просто някаква схема за решаването им. Веднага след като употребих думата „схема“ сам се смутих, тъй като не звучи особено академично в конкретния случай. Асистентката обаче разбра какво имам предвид, усмихна се и с просто ми каза: „В такива задачи винаги имаш информация за две от трите неща – точка, вектор/права или равнина. Това което трябва да направиш е да намериш третото, като замениш в някоя от формулите – съответно тази, за която имаш достатъчно данни“. Ето това си е схема!

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

selector { declaration }

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

p { color: black; }

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

Интервалите (whitespace) в CSS не оказват значение, така че можете да въвеждате дефинициите на един ред – както в предниа пример – или да ги разделяте на няколко реда, ако така според вас е по-прегледно.

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

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

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

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

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

@charset "UTF-8";

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

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

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

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

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

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

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

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

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax