English
В този урок ще видим как се стилизират съвременните сайтове. Темата е "CSS за начинаещи" и тук обхващаме основните понятия. След броени минути ще знаете:
- защо се използва CSS;
- какво представлява този език;
- какви са градивните му елементи;
- някои от основните функционалности.
Както винаги, ще направите няколко практически упражнения.
Защо CSS?
Нека да си представим, че имаме малък уеб сайт, съставен от 30 страници. Да кажем, че не ни харесва начина, по който изглеждат заглавията на статиите – искаме да са с друг цвят. Какво трябва да направим? Трябва да променим заглавието на всяка една страница. Това е прекалено много работа за такава проста промяна. Затова на помощ идва CSS. Името идва от "Cascading Style Sheets" или иначе казано език за описание на стиловете. Ако проектираме добре нашите HTML страници, с помощта на CSS, ще можем да променим всички заглавия едновременно, като променим само един единствен файл! Звучи добре, нали?
Елементи на CSS
CSS задава стилове, чрез така наречените "стилови страници". В практиката те представляват файлове с разширение ".css". Всеки файл съдържа едно или няколко правила. Всяко правило съдържа следните елементи:
- Селектор – той указва кой HTML елемент ще стилизираме (H1, H2, table, tr, и др.).;
- Свойство – то указва кое свойство (кой атрибут) ще стилизираме (дебелина на границите, подравняване, цвят, и др.).;
- Стойност – задава каква да бъде стойността за съответния атрибут.
За да не изпадаме в теоретичен сън ще дадем пример:
table
{
background-color: green;
}
Това е CSS правило, което задава зелен фон за таблица.
Селекторът е думата "table". Той указва, че правилото се отнася за таблица.
Свойството е "background-color". То указва, че ще задаваме какъв да бъде цвета на фона на таблицата.
Стойността е "green".
Преди да продължим с практическата задача ще отбележим няколко неща относно синтаксиса.
- След името на селектора винаги се поставя отваряща къдрава скоба "{". Тази скоба казва на браузъра, че от тук нататък следва едно или няколко свойства.;
- Всяко свойство се отделя от неговата стойност с две точки ":".;
- След края на всяка стойност се поставя точка и запетая ";".;
- След последното свойство се поставя затваряща къдрава скоба "}". Тя казва на браузъра, че това е краят на текущото правило.
CSS за начинаещи – първо упражнение.
1. Създайте нов файл, в който ще поставите CSS правило за цвят на заглавието. Той може да изглежда така:
h1
{
color: red;
}
Запазете файла като "h1.css". Задължително използвайте разширението ".css".
2. Създайте нова HTML страница, която съдържа само едно заглавие. Файлът може да изглежда така:
<html>
<h1>Това е заглавие</h1>
</html>
Запазете страницата като h1.html. Запомнете – файлът трябва да бъде запазен с разширение .html. Отворете страницата, за да се уверите, че заглавието се показва нормално. Ако Това е ново за вас, може да разгледате първият ни урок по HTML: HTML за начинаещи.
3. Кажете на HTML страницата, че трябва да използва стиловете, дефинирани в "h1.css". За целта в началото на html страницата (непосредствено след отварящият таг <html>) добавете:
<head>
<link rel="stylesheet" href="h1.css" type="text/css" />
</head>
Сега страницата трябва да изглежда по този начин:
<html>
<head>
<link rel="stylesheet" href="h1.css" type="text/css" />
</head>
<h1>Това е заглавие</h1>
</html>
Запазете промените и отворете страницата наново. Цветът на заглавието е вече червен.
Добавяне на .css правила към уеб страница.
В предишния пример добавихме нов таг към началото на HMTL страницата:
<head>
<link rel="stylesheet" href="h1.css" type="text/css" />
</head>
Тагът <head> служи да добавяне на служебна информация към дадена страница. Обикновено тази информация не се вижда от крайния потребител.
Тагът <link> служи за добавяне на външни ресурси към нашата страница. Нека разгледаме атрибутите, които използвахме в примера:
- rel="stylesheet" – с този атрибут казваме, че ресурсът, който добавяме съдържа правила за стилове.;
- href="h1.css" – Вероятно този атрибут ви е вече познат от предишните ни уроци. С него казваме къде се намира файлът, в който са дефинирани стиловете.;
- type="text/css" – Тук указваме типът на самия файл. В този случай той е текстов файл, който съдържа css информация.
Ще отбележим, че в практиката обикновено стиловете се отделят от страниците в отделни папки. В този случай href атрибутът трябва да съдържа пътя до файла освен неговото име.
Добре е да отбележим, че съществуват още два начина за добавяне на css към дадена страница. Те са "чрез вграждане" и "блок със стилове". Тези начини за използване на CSS, обаче, не постигат целите за отделяне на стиловете от съдържанието на страницата. При тях стиловете остават в самата html страница и остава проблемът с редактирането на множество файлове, ако искаме да сменим даден стил в целият ни сайт. Затова тук задаваме стиловете само, чрез външни файлове.
Второ упражнение
Отворете h1.css за редактиране. Към селектор h1 добавете ново свойство – "text-align". За стойност укажете "right". h1.css би трябвало да изглежда така:
h1
{
color:red;
text-align:right;
}
Не забравяйте да форматирате файловете си, така че да бъдат лесни за четене и редактиране. Също така запомнете, че след всяка стойност трябва да добавим ";". Сега запазете файлът и стартирайте h1.html.
Заглавието отиде вдясно. На нас така не ни харесва, така че ще редактираме отново h1.css. Сега сменете стойността за text-align, като този път подравняването е "center". Запазете и стартирайте. Сега изглежда доста по-добре, нали?
Добавяне на повече правила към .css файл
Реално в практиката един css файл съдържа повече от едно правило. Сега ще добавим правило за смяна на шрифта на текст.
1. Отворете h1.css. Добавете ново правило, като зададете: Име селектор "p" (латинско p, а не на кирилица!), име на свойство "background-color", стойност "yellow". h1.css би трябвало да изглежда така:
h1
{
color:red;
text-align:center;
}
p
{
background-color:yellow;
}
2. Редактирайте h1.html. Под заглавието добавете:
Това е текст с различен фон </p>. Тагът <p> означава параграф. Т.е. текстът в този таг е един параграф.
3. Сега запазете страницата и я отворете. Фонът на текста в параграфа е жълт.
Това е последното упражнение от CSS за начинаещи, което ще направим заедно. За "домашно" може да си поиграете със следните свойства и стойности: (За целта може да използвате и страницата, в която направихме таблица. Не забравяйте да и добавите тагъти за връзка към CSS.)
Селектори-Свойства-Стойности:
table{ border-width: 1px;} 2px 3px…
table{ color:(име на цвят на английски език);}
table{ border-color:(име на цвят на английски език)};
table{ background-color:(име на цвят на английски език)};
С това този урок приключва. Ако искате да научите още много за HTML и CSS може да се запишете на курс при нас. За записване и/или повече информация, свържете се с нас.
Предишен урок: HTML таблици.
