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 може да се запишете на курс при нас. За записване и/или повече информация, свържете се с нас.