През този цикъл вече беше споменато няколко пъти за стила. Тези стилове позволяват строгото разграничаване между композиция и дизайн. HTML елементите благодарение на CSS са изцяло отговорни само за логическото или семантичното описание на уеб документа.
Експериментално, в началото е полезно да знаете как всъщност изглежда един стил. Вижте първият пример.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>В браузъра документът изглежда по този начин:
В body областта на HTML файла са дефинирани два елемента:
• един заглавен текст
• един параграф
С помощта на CSS тези два елемента са форматирани. За целта в областа на head е дефинирана една стилизираща област чрез style. В тази област се извършва форматирането на елементите.
Ето още веднъж дефиницията за заглавния текст h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Чрез показаният синтаксис се задават две неща:
• Определя се шрифта.
• Дефинира се размера на шрифта.
На този етап ще се разгледа общо каква е използваната синтакса. Всяка CSS инструкция се състои основно от две части - селектор и CSS декларацията. Чрез селектора се определя кой елемент трябва да бъде форматиран. Как изглежда това форматиране окончателно, се определя от CSS декларацията. Селекторът винаги е отляво, а CSS декларацията е от дясно във фигурни скоби.
Самата CSS декларация също се състои от две елемента, а именно свойството и стойността. Свойството и стойността се разделят чрез двоеточие. След стойността следва точка и запетая.
Selektor {
Eigenschaft: Wert;
}Вграждане на стилове
Има различни начини за вграждане на стилове в уеб страници. Първоначално можете да изпратите стилови указания директно към HTML таг. Един пример:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
В този пример заглавният текст се показва в синьо. 
Можете също така да добавите няколко стилови указания към HTML тага.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Просто ги добавете едно след друго, отделени с точка и запетая.
Обикновено тези така наречени inline стилове са целесъобразни само ако трябва да се форматират отделни области в страницата по индивидуален начин. Обикновено трябва да се избягвате този тип директни форматиране, тъй като кодът на HTML става прекалено непрегледен.
Централна дефиниция в областта на head
Вътре в областта на head на HTML файла може да дефинирате централен стил. В него се дефинират всички стилове, които трябва да важат за този файл.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Предимството на този вариант е: за разлика от вградения вариант, дефинираните формати могат да се използват множество пъти в документа. В предния пример беше дефиниран CSS клас text. (Подробна информация за селекторите като този използван клас ще бъде представена в следващия урок). Този клас може да се използва произволно много пъти в документа.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
Тази дефиниция в сравнение с вградения вариант разбира се има и предимството, че промените могат да бъдат извършвани много бързо.
Изваждане на CSS инструкции
Най-практичният начин за дефиниране на CSS определено е изваждането на стиловете във външен файл. Така множество HTML файлове могат да имат достъп до същия CSS файл. Следователно е много лесно да се осигури еднакъв формат на всички файлове, принадлежащи към уеб проекта. Последващите промени, които трябва да засегнат всички страници, могат да бъдат реализирани без проблем.
<link rel="stylesheet" type="text/css" href="css/styles.css">
В заглавието на HTML файла се дефинира елемента link. Първоначално се посочва комбинацията атрибут-стойност rel="stylesheet". След това следва type="text/css". На атрибута href се задава съответният CSS файл. Внимавайте тук - подобно на включването на изображения - да посочите правилния път. В текущия пример аз предполагам, че CSS файла styles.css се намира в директорията css, която от своя страна е на същото ниво като реалния HTML файл.
Реферираната CSS файл е нормален текстов файл с разширение css. Във външния CSS файл се дефинират съответните CSS инструкции.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Алтернативно на показания вариант с link, може да се импортират стилове. Също така, CSS инструкциите се намират във външен файл. За тази цел се използва следният синтаксис:
<style type="text/css">
@import url("css/styles.css");
</style>
В рамките на скобите се посочва пътят към CSS файла, който да се импортира. Стойността на @import наистина е CSS синтаксис. Поради това инструкцията @import може да се използва и вътре в CSS файлове. Това позволява възможността да се извикват други CSS файлове от един stylesheet, което дава възможност за по-добро организиране на стиловете.
Разбира се, задава се въпросът дали трябва да използваме link или @import. Основно аз предпочитам link, тъй като този вариант просто е по-бърз, следователно и представянето на страницата е по-добро.
Стилове за конкретни медии
Може да се дефинират стилове за различни медии като принтиране или екран. За тази цел се използва атрибута media. При това може да се зададе един stylesheet на няколко различни медии, отделени със запетая.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
В този случай са извикани два stylesheet-a, един за екрана, другия за случай, че страницата се отпечатва. CSS файла druck.css следователно ще се зареди, когато се извика функцията за печат. В общ план, следните стойности на media са на разположение:
• all – Важи за всички изходни устройства.
• aural – CSS файла се използва за системи за гласов изход.
• braille – CSS файла е предназначен за Брайл принтери с тактилна обратна връзка, които могат да произвеждат така наречената "слепотекст".
• embossed – Това включва Брайл принтери.
• handheld – Предназначен за ръчни устройства.
• print – CSS файла важи за печат на хартия. Браузърите автоматично трябва да се обърнат към този файл, когато се извика функцията за печат.
• projection – Този вариант е за проектирани презентации.
• screen – Предназначен за екрани.
• tty – CSS файла е за устройства, които използват фиксирана решетка със знаци. Това могат да бъдат например телете и терминали.
• tv – Това включва устройства подобни на телевизори. Предполага се, че устройствата имат ниска резолюция и са ограничени в превъртането.
Освен показаният HTML синтаксис чрез елемента link, има и специални CSS варианти. Това включва @import или @media.
<style type="text/css">
@media screen, projection {
/* Формати за екран */
}
@media print {
/* Формати за печат */
}
</style>
В рамките на style елемента се дефинират чрез @media област за дефиниране на формати, предназначени за конкретно изходно устройство. Зад @media, разделени с интервал, трябва да се посочи един от вече описаните видове медии. Няколко медии се записват един след друг със запетайки.
