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: значення»), розділених знаком «;».
Коментарі
Коментуючи, пам'ятайте про те, що зміст і тон Вашого повідомлення можуть зачіпати почуття реальних людей, проявляйте повагу та толерантність до своїх співрозмовників навіть у тому випадку, якщо Ви не поділяєте їхню думку, Ваша поведінка за умов свободи висловлювань та анонімності, наданих інтернетом, змінює не тільки віртуальний, але й реальний світ. Всі коменти приховані з індексу, спам контролюється.