https://help.superhosting.bg/what-is-css.html
  • bg

Хостинг, Домейни, Виртуални сървъри (VPS), Managed VPS, SSL сертификати

Какво е CSS и как се използва в HTML?

CSS
css, style

CSS (Cascading Style Sheets) е език за описване на презентацията и стиловете на елементите в един HTML/XML документ. CSS е една от основните технологии, използвани в Уеб, редом с HTML и JavaScript.

При създаване на HTML страница, съдържанието й се описва (маркира) с HTML код, а презентацията на това съдържание, тоест как ще изглежда то в браузъра, се описва с CSS код (стил).

CSS кодът се поставя във файл с разширение .css. След това този файл може да се използва във всяка една страница от уеб сайта. Така че стилът ще се намира на едно място и при промяна ще се отразява на всички уеб страници.

Ще направим един най-прост CSS файл. Отворете някакъв текстов редактор, например Notepad и напишете в него следния код:

body
{
background-color: #000000;
font-family: arial, helvetica, sans-serif;
font-size: 16px;
color: #cccccc;
}

След това съхранете файла като му зададете разширение css - например file.css.

Сега остава във всяка HTML страница в секцията head да сложите следния код:

<link rel=stylesheet type="text/css" href="file.css" />

Пример:

<!DOCTYPE html>

<html>
<head>
<title>Заглавие на страницата</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<meta name="description" content="описание на страницата" />
<meta name="ключови, думи" />
<meta name="robots" content="index, follow" />
<link rel=stylesheet type="text/css" href="file.css" />
</head>

<body>

Това е примерен текст, намиращ се в тялото на HTML страницата.

</body>
</html>

Сега страницата ще се покаже със стиловите параметри, които сте задали, а именно - черен фон на страницата и светлосив текст. Всички страници, в които сложите кода <link rel=stylesheet type="text/css" href="file.css" /> ще имат същия външен вид. Ако желаете да промените цвета на фона или някои от параметрите на текста ще трябва да направите промените единствено в CSS файла и те автоматично ще се отразят във всички HTML документи, в които има връзка към файла file.css

За да работи този ефект, както е направен линка към file.css в примера, е нужно CSS файла да се намира в същата директория, в която се намират и HTML страниците. В противен случай трябва да се укаже пътя до CSS файла, например ако HTML страницата е във вътрешна папка, а file.css е в основната директория линка ще бъде

<link rel=stylesheet type="text/css" href="../file.css" />

и т.н.

Структурата на CSS файла включва название на елемента (селектор), за който ще се приложи стила - в случая това е body, и след това параметрите (свойствата), които се ограждат в големи скоби - { }. Когато в големите скоби се поставят няколко свойства (както е в случая), те се отделят един от друг чрез точка и запетая. В примера скобите и зададените параметри са поставени на отделни редове, но това е само за прегледност, иначе кодът на CSS файла може да изглежда и така:

body {background-color:#000000;font-family:arial,helvetica,sans-serif;font-size:16px;color:#cccccc;}

Всички параметри, намиращи се в големите скоби {..}, се наричат правило, а то се състои от селектора body и свойствата background-color, font-family, font-size и color. За свойствата се задават стойности, например за свойството color е зададена стойността #cccccc.

Когато се задава числова стойност на дадено свойство, например font-size: 16px, можете да оставите стъпка разстояние между двуеточието и цифрите (: 16), но не отделяйте цифрите от мерната единица, т.е. правилно е да се напише "16px", а не "16 px". Във втория случай кодът няма да бъде разчетен от всички браузъри.

Когато стойността на дадено свойство е съставена от две и повече думи, например sans serif, тези думи трябва да са свързани с тире (sans-serif) или трябва да се поставят в кавички ("sans serif").

Съществуват няколко начина за прилагане на CSS стила:

  • Външен стил
    Записът, който направихме в горния пример, се нарича външен стил (External Style Sheet) и се използва когато трябва да се контролират множество HTML документи, като нужните параметри се задават във външен файл (file.css).
  • Вътрешен стил
    Съществува и вътрешен за HTML документа стил (Internal Style Sheet), който се използва за да се зададе вида на един отделен HTML документ, като нужните свойства се задават със специалния таг <style> в секцията <head> на HTML страницата.
  • Вграден стил
    Другият начин за налагане на стил е Inline Styles - вътрешни за HTML таговете стилове. CSS стилът се разполага като атрибут директно в HTML тага например <p style="color:#cccccc;">.

Когато в един документ се използват и трите начина за налагане на CSS стил - с най-висок приоритет е стилът на Inline Style (вътрешните за HTML таговете стилове), след тях на по приоритет са Internal Style Sheet (стиловете от секцията head на HTML документа) и последни по приоритет са External Style Sheet, т.е. стиловете, декларирани във външен CSS файл.

Коментари в CSS

В HTML коментарите, които не влияят на изпълнението на кода, се изписват по подобен начин:

<!-- Коментар, който няма да повлияе на HTML-документа -->

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

/* Коментар, който няма да повлияе на стила */

500px270px
SuperHosting.BG

Коментари

avatar
  Абониране  
Уведоми ме при
Всички права запазени © 2005-2018 , www.superhosting.bg