Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

CSS - Увод

Преди да се заемете с изучаването на CSS (Cascading Style Sheets) би трябвало да сте усвоили основите на HTML и XHTML. CSS са файлове, които определят форматирането на HTML елементите. За да се научите как да направите сайт ще е добре да усвоите форматиращия език CSS. Първоначално HTML не е разработен за форматиране, а за определяне съдържанието на документа. Когато добавят тагове за шрифт и цвят към HTML 3.2 започва кошмара на разработчиците. Добавянето на информация за шрифтове и цветове към всяка страница в големи сайтове става дълъг и скъп процес. За разрешаването на този проблем W3C (World Wide Web Consortium) създава CSS. В HTML 4.0 форматирането изцяло може да се прехвърли към отделни CSS файлове. Днес, всички уеб браузъри поддържат CSS. Форматирането на HTML елементите обикновено се съхранява във външни файлове с разширение .css. Те позволяват да се променя вида и разположението на всички страници в уеб сайта. По-долу е даден пример за форматиране на HTML файл с помощта на външен CSS файл.Стандартният HTML документ изглежда по следния начин (виж примера в браузъра):


<!DOCTYPE html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Форматиране със CSS</title>
   <link rel="stylesheet" type="text/css" href="/subsidiary/stylesheet.css" />
 </head>
 <body>
   <h1>Това е заглавие с размер на шрифта 36 пиксела</h1> 
   <h2>Това заглавие е в червено</h2> 
   <p>Параграфа е изместен в ляво на 45 пиксела, размер на шрифта  
   14 пиксела и е в синьо</p>
   <p><a href="http://dimarini.net" target="_blank">Хипер връзка с външен файл</a></p> 
 </body>
</html>
  

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


@charset "utf-8";
  body
  {background-color:Wheat;}
  h1
  {font-size:36px;}
  h2
  {color:red;}
  p
  {margin-left:45px; color:blue; font-size:14px;}
  a:link {color:MediumBlue ;}
  a:visited {color:OrangeRed;}
  a:hover {color:Green;}
  a:active {color:DarkRed ;}
 

Основната част на CSS файла се състои от селектор (например p) и няколко декларации (например p{color:blue; font-size:14px;}), които от своя страна представляват свойство (например color) и стойност (например blue). Стойността се отделя от свойството с двоеточие (:). В края на всяка декларация се поставя точка и запетая (;). Селекторът обикновено е HTML елемент (например h1), за който се задават параметри за форматиране. Коментар се отваря с "/*" и се затваря с "*/". Между стойността и измервателната единица (ако има такава) не се оставя интервал:

  • nравилно {font-size:36px;}
  • неправилно {font-size:36 px;}