CSS - Cascading Style Sheets

CSS - Cascading Style Sheets

CSS (англ. Cascading Style Sheets - каскадні таблиці стилів) - формальна мова опису зовнішнього вигляду документа, написаного з використанням мови розмітки.

Переважно використовується як засіб опису, оформлення зовнішнього вигляду веб-сторінок, написаних за допомогою мов розмітки HTML і XHTML, але може також застосовуватися до будь-яких XML-документах, наприклад, до SVG або XUL.

Мета створення CSS

CSS використовується творцями веб-сторінок для завдання кольорів, шрифтів, розташування окремих блоків і інших аспектів представлення зовнішнього вигляду цих веб-сторінок. Основною метою розробки CSS було розділення опису логічної структури веб-сторінки (яке проводиться за допомогою HTML або інших мов розмітки) від опису зовнішнього вигляду цієї веб-сторінки (яке тепер проводиться за допомогою формального мови CSS). Такий поділ може збільшити доступність документа, надати велику гнучкість і можливість управління його поданням, а також зменшити складність і повторюваність в структурному вмісті. Крім того, CSS дозволяє представляти один і той же документ в різних стилях або методах виведення, таких як екранне уявлення, друковане уявлення, читання голосом (спеціальним голосовим браузером або програмою читання з екрану), або при виведенні пристроями, що використовують шрифт Брайля.

Способи підключення CSS до документа

Правила CSS пишуться на формальній мові CSS і розташовуються в таблицях стилів, тобто таблиці стилів містять в собі правила CSS. Ці таблиці стилів можуть розташовуватися як в самому веб-документі, зовнішній вигляд якого вони описують, так і в окремих файлах, що мають формат CSS. (По суті, формат CSS - це звичайний текстовий файл. У файлі .css не міститься нічого, крім переліку правил CSS і коментарів до них.)

Тобто, ці таблиці стилів можуть бути підключені, впроваджені в описуваний ними веб-документ чотирма різними способами:

+ Коли таблиця стилів знаходиться в окремому файлі, вона може бути підключена до веб-документу за допомогою тега <link>, розташованого в цьому документі між тегами <head> і </ head>. (Тег <link> матиме атрибут href, що має значенням адресу цієї таблиці стилів). Всі правила цієї таблиці діють протягом усього документа;

  <! DOCTYPE html>
  <Html>
  <Head>
  .....
  <Link rel = "stylesheet" href = "style.css">
  </ Head>
  <Body>
  .....
  </ Body>
  </ Html>
 

+ Коли таблиця стилів знаходиться в окремому файлі, вона може бути підключена до веб-документу за допомогою директиви @import, що розташовується в цьому документі між тегами <style> і </ style> (які, в свою чергу, розташовуються в цьому документі між тегами < head> і </ head>) відразу після тега <style>, яка також вказує (в своїх дужках, після слова url) на адресу цієї таблиці стилів. Всі правила цієї таблиці діють протягом усього документа;

  <! DOCTYPE html>
  <Html>
  <Head>
  .....
  <Style media = "all">
  @import url (style.css);
  </ Style>
  </ Head>
  </ Html>
 

+ Коли таблиця стилів описана в самому документі, вона може розташовуватися в ньому між тегами <style> і </ style> (які, в свою чергу, розташовуються в цьому документі між тегами <head> і </ head>). Всі правила цієї таблиці діють протягом усього документа;

  <! DOCTYPE html>
  <Html>
  <Head>
  .....
  <Style>
  body {
  color: red;
  }
  </ Style>
  </ Head>
  <Body>
  .....
  </ Body>
  </ Html>
 

+ Коли таблиця стилів описана в самому документі, вона може розташовуватися в ньому в тілі якогось окремого тега (за допомогою його атрибута style) цього документа. Всі правила цієї таблиці діють тільки на вміст цього тега.

  <! DOCTYPE>
  <Html>
  <Head>
  .....
  </ Head>
  <Body>
  <P style = "font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">
  .....
  </ P>
  </ Body>
  </ Html>
 

У перших двох випадках кажуть, що до документа застосовані зовнішні таблиці стилів, а по-друге двох випадках - внутрішні таблиці стилів.

Для додавання CSS до XML-документу, останній повинен містити спеціальне посилання на таблицю стилів. наприклад:

  <? Xml-stylesheet type = "text / css" href = "style.css"?> 

Ієрархія елементів всередині документа

Як відомо, HTML-документи будуються на підставі ієрархії елементів, яка може бути наочно представлена ​​в деревовидної формі. Елементи HTML один для одного можуть бути батьківськими, дочірніми, елементами-предками, елементами-нащадками, сестринськими.

Елемент є батьком іншого елемента, якщо в ієрархічній структурі документа він знаходиться відразу, безпосередньо над цим елементом. Елемент є предком іншого елемента, якщо в ієрархічній структурі документа він знаходиться десь вище цього елемента.

Нехай, наприклад, в документі присутні два абзаци p, що включають в себе шрифт з жирним шрифтом b. Тоді елементи b будуть дочірніми елементами своїх батьківських елементів p і нащадками своїх предків body. У свою чергу, для елементів p елемент body буде тільки батьком. І крім того, ці два елементи p будуть сестринськими елементами, як мають одного і того ж батька - body.

В CSS можуть задаватися за допомогою селекторів не лише поодинокі елементи, але і елементи, які є нащадками, дочірніми або сестринськими елементами інших елементів (див. Підрозділ «види селекторів»).

Правила побудови CSS

У перших трьох випадках підключення таблиці CSS до документа (див. Вище) кожне правило CSS з таблиці стилів має дві основні частини - селектор і блок оголошень. Селектор, розташований в лівій частині правила, визначає, на які частини документа поширюється правило. Блок оголошень розташовується в правій частині правила. Він міститься в фігурні дужки, і, в свою чергу, складається з одного або більше оголошень, розділених знаком «;». Кожне оголошення являє собою поєднання властивості CSS і значення, розділених знаком ":". Селектори можуть групуватися в одному рядку через кому. В такому випадку властивість застосовується до кожного з них.

  селектор, селектор {
  властивість: значення;
  властивість: значення;
  властивість: значення;
  }
 

У четвертому випадку підключення таблиці CSS до документа (див. Список) правило CSS (є значенням атрибута style тега, на який воно діє) являє собою перелік оголошень ( «властивість CSS: значення»), розділених знаком «;».