Простий CSS - Куток програміста

Привіт усім. Сьогодні ми поговоримо про таку чудову річ, як CSS. CSS — це каскадні таблиці стилів (Cascading Style Sheet). Дана технологія використовується для форматування відображення елементів Web-сторінок. CSS також може використовуватися не тільки для гіпертекстових сторінок, а, наприклад, для створення унікальних тем віконної системи чи окремих вікон. Технологія сама по собі являється не складною і зрозуміти її не важко.

Конструкція CSS стилів

Конструкція стилів CSS складається з назви і тіла стилю. Назвою може являтися HTML-тег, для модифікування його відображення; унікальний ідентифікатор — він вказується в HTML теґах як “id” і бажано, щоб він зустрічався на сторінці тільки один раз; також є третій тип CSS стилю — класи. Класи, на мою думку, є найчастіше використовуваними типами стилів CSS. Для застосування класу до певного елементу, необхідно в його основному теґу вказати, як параметр, ключове слово “class” і після наступного знака рівності, в лапках чи без, вказати ім'я необхідного класу або декілька імен через пробіл. Тілом стилю, являються параметри і їх значення вказані у фігурних дужках після назви стилю. В загальному, конструкція виглядає наступним чином: <ім'я стилю> { <параметр1> : <його_значення> ; /* ... */ <параметрN> : <його_значення> ; } Усі елементи, вказані у трикутних дужках “<>” слід замінити на відповідні ідентифікатори імен стилів, їх параметрів і значень. В CSS трикутні дужки не застосовуються. Як Ви вже здогадалися, комбінація символів “/*” (слеш і зірка), являється початком коментаря, а ті ж самі символи в зворотньому порядку — його закінченням. Необхідно коментувати свої стилі, оскільки за достатньої складності Web-сторінки, їх кількість може бути великою, що робить важчим знаходження необхідних стилів у файлі. Слід також звернути увагу на те, що між параметром стилю і його значенням вказується символ двокрапки, а не дорівнює. Імена стилів можуть являтися як Ваші власні, придумані імена стилів, вказані символом “.” для класів, або символом “#” для стилів, які використовуються тільки для одного блоку Web-сторінки. Якщо Ви не вказали ці два символи, браузер буде інтерпретувати Ваш стиль, як такий, що застосовується до HTML теґу, який ви вказали в якості ім'я стилю.

Підключення CSS до HTML-сторінки

Є декілька способів підключити стилі CSS до Web-сторінки. Ви можете використовувати наступні методи:

вказування стилів CSS безпосередньо в теґах HTML
вставка стилів CSS в заголовок сторінки між теґами “<style></style>”
винесення CSS в окремий файл і підключення його за допомогою теґа “<link>”

CSS в теґах HTML

Ви можете вказувати CSS стилі безпосередньо у теґах HTML в якості параметрів теґу. Наприклад, створимо базову сторінку HTML з текстом, розміщеним між теґом абзацу “<p></p>”:

<html>

 <head>
 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	
  
  <title>
    CSS в теґах HTML
  </title>
  
 </head>
 
 <body style="background: #292929">
 
  <p style="text-align:center; text-transform:uppercase; font-size:30px; color: #cfcfcf">
   Цікаве повідомлення.
  </p>
 
 </body>
 
</html>

В даному HTML коді, ми змінили за допомогою CSS колір фону усієї сторінки в теґу “<body></body>” на темно-сірий (#292929), використовуючи параметр стилю “background”. А для поточного і єдиного на даній HTML сторінці теґу параграфа “<p></p>”, змінили вирівнювання тексту, перетворили його на верхній регістр, встановили розмір шрифту і колір на світло сірий (#cfcfcf), використовуючи параметри стилю text-align, text-transform, font-size і color відповідно. Якщо Ви відкриєте дану HTML-сторінку в себе у браузері, з даним кодом, ви отримаєте приблизно наступний результат:

CSS між теґом “<style></style>”

Розглянемо наступну HTML сторінку:

<html>

 <head>
 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	
  
  <title>
    CSS в теґах HTML
  </title>
  
 <style>
 
  .bstyle 
  {
    background: #a7ffa9 ;
    font-family: "FreeMono" ;
  }
  
  .pstyle
  {
    line: 2.0 ;
    text-align: justify ;
    margin: 30px ;
  }
  
 </style>
  
 </head>
 
 <body class="bstyle">
 
  <p class="pstyle">
   Цікаве повідомлення.
  </p>
 
 </body>
 
</html>

Всередині теґу “<style></style>” в заголовку сторінки (між теґом “<head></head>”) Я створив два стилі: bstyle і pstyle, і застосував їх до теґа “<body></body>” і “<p></p>” відповідно, використовуючи параметр “class” (тобто дані стилі можуть використовуватися багаторазово). Зверніть увагу на символ крапки перед назвою стилю. Якщо Ви не вкажете її — вони не запрацюють, оскільки браузер буде інтерпретувати Ваші назви стилів як імена HTML-теґів. Ви також можете вказати CSS стиль у будь-якому місці сторінки. Наприклад, всередині тіла сторінки (але теґ “style” все-одно потрібно вказувати).

CSS в окремому файлі

Тепер ми розглянемо найпопулярніший і найзручніший метод підключення CSS-стилів до Web-сторінки. Він полягає у використанні теґа “<link> перегляньте код наступної HTML-сторінки:

<html>

 <head>
 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  
  <title>
    CSS в окремому файлі
  </title>
  
 </head>
 
 <body class="bstyle">
 
  <p class="pstyle">
   Цікавий текст.
  </p>
 
 </body>
 
</html>

І необхідний нам файл style.css

/* стиль для body */
.bstyle 
{
    /* відступи контенту від країв */
    padding: 50px ;

    /* встановлюємо фоновий колір */
    background: #313131 ;
}

/* стиль для параграфа */
.pstyle
{
    /* розтягуємо текст на всю довжину рядка*/
    text-align: justify ;

    /* шрифт FreeMono */
    font-family: FreeMono ;

    /* колір тексту */
    color: #fff ;

    /* розмір шрифту */
    font-size: 12pt ;
}

Після відкриття даної сторінки у браузері ми отримаємо приблизно наступне:

Як було сказано, для підключення CSS стилю в дану сторінку використовувався теґ “link”. У основних його параметрах ми вказали: шлях до CSS файлу — за допомогою “href” (в даному випадку браузер буде шукати файл стилю в поточній директорії розміщення html-файлу), і за допомогою параметра “type” вказали MIME-тип файлу.

Резюме

В даній статті, Я показав, як включати CSS-стилі у Web-сторінку і декілька основних параметрів CSS-стилів. Для повного списку параметрів, Ви можете звернутися до специфікації CSS. Не забудьте поекспериментувати з стилями і HTML — це закріпить ваші знання і дасть змогу глибше зрозуміти галузь верстки і створення Web-сторінок.