Що таке CSS, основні поняття. Що таке CSS та де його використовують Що таке код css і де він

Стисло пояснює, що таке Cascading Style Sheets (CSS). З її допомогою ви зможете створити простий документ, який використовуватимете в подальших розділах.

Інформація: Що таке CSS

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

Під документомми будемо розуміти набір інформації про структуру сторінки, що описується мовою розмітки.

А уявленнядокумента користувачеві, своєю чергою, означає його перетворення на зручну сприйняття форму. Браузери, такі як Firefox, Chrome або Internet Explorer, були створені для візуального відображення документів, наприклад, на екрані комп'ютера, проектор або виведення через принтер.

Приклади

• Сторінка сайту, яку ви зараз читаєте – це документ. Структура інформації, яку ви бачите на сторінці, зазвичай описується за допомогою мови HTML-розмітки (HyperText Markup Language - Мова ГіперТекстової Розмітки)
• Діалогові вікна в комп'ютерних програмах, також називають модальними вікнами, як правило, також є документами. Такі вікна можуть бути описані за допомогою мови розмітки, такої як XUL (XML User Interface Language - XML'я Мова Інтерфейсу користувача), які можна знайти, наприклад, в деяких програмах від Mozilla.

У цьому посібнику блоки із заголовком Детальніше, як нижче, містять додаткову інформацію та посилання ресурси, дозволяють глибше вивчити питання, якому присвячений той чи інший розділ. Ви можете відразу ж скористатися цими матеріалами або пропустити ці блоки і повернутися до них пізніше.

Детальніше

Документ це не те саме, що файл. Проте документ може зберігатися в одному файлі.

Зі сторінкою, яку ви зараз читаєте, справи складніші. Коли ваш браузер запитує цю сторінку, сервер звертається до бази даних і генерує документ, збираючи його частинами з декількох документів, кожен з яких, у свою чергу, може розташовуватися в декількох файлах. Однак у цьому посібнику ви також зможете працювати з документами, кожен з яких представлений одним файлом.

Більше інформації про документи та мови розмітки ви знайдете в інших розділах цього сайту:

У другій частині цього посібника ви зустрінете приклади цих мов розмітки.

Детальніше

У термінах CSS програма, яка виводить документ користувачеві, так званому user agent(UA). Браузер – один із видів UA. CSS, таким чином, не призначений тільки для браузерів або візуального представлення, але в першій частині цього посібника ви працюватимете з CSS тільки в браузері.

Інші визначення та терміни, що стосуються CSS, ви можете знайти у Визначеннях специфікації CSS, створеної World Wide Web Consortium (W3C), міжнародною спільнотою, яка встановила відкриті стандарти web.

До дії: Створення документа

1. Створіть нову папку на комп'ютері для вправ.
2. Відкрийте текстовий редактор та створіть новий текстовий файл. Цей файл міститиме документ для кількох наступних вправ.
3. Скопіюйте та вставте HTML, наведений нижче, а потім збережіть файл під ім'ям doc1.html.

   C ascading S tyle S heets

4. Відкрийте нову вкладку або нове вікно у вашому браузері та відкрийте щойно створений файл.

   Ви повинні побачити рядок, в якому великі літери виділені напівжирним зображенням:

   C ascading S tyle S heets

   Те, що ви побачите насправді, може трохи відрізнятися тому, що налаштування за замовчуванням вашого браузера і даної енциклопедії напевно відрізнятимуться: невеликі відмінності в шрифті, пробілах і кольорах не дуже важливі.

Що далі?

У документі, який ви створили, CSS поки що не використовується. У наступному розділі ви навчитеся використовувати CSS для стилізації документа.

CSS(Cascading Style Sheets, каскадні таблиці стилів) - мова, що дозволяє управляти зовнішнім виглядом блогу. Мова не така складна для вивчення, але мені вистачає мізерних знань з CSS. Вивчення основи CSS дозволить вам цілком впевнено "володіти" дизайном вашого блогу.

За зовнішній вигляд блогу WordPress відповідає файл style.css, що знаходиться в папці теми. І, як Ви, мабуть, зрозуміли, якщо захочете змінити шрифт або, наприклад, колір фону потрібно відкрити style.css, знайти потрібний рядок, змінити дані та зберегти. Результатом буде зміна зовнішнього вигляду блогу.

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

Якщо новачкам здасться, що нічого не зрозуміло, рекомендую перейти відразу до практики, щоб "увійти" до справи.

Теорія з CSS

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

Шрифт

font-size- розмір шрифту ( font-size : розмір шрифту в пікселях (px), у відсотках (%) тощо)

Font-size: 14 px;

font-family– шрифт для елемента ( font-family : ім'я_шрифту)

Font-family: Tahoma;

font-weight– товщина шрифту (font-weight : boldабо normal і т.п.)

Font-weight: білий;

font-style– стиль шрифту (font-style: normal (нормальний) або italic (курсив) тощо)

Font-style: normal;

font– поєднання всіх властивостей для шрифту ( font: стиль_шрифту (необов'язково) розмір сімейства)

P ( font: bold italic 12px verdana; )

Розмір

width– ширина елемента ( width: значення в пікселях, відсотках тощо)

Width: 333px;

height- Висота елемента (аналогічно width )

Height: 333px;

max-width– максимальна ширина елемента (за аналогією)

Max-width: 333px;

min-width- Мінімальна ширина елемента ( так само як і width)

Min-width: 333px;

max-height- максимальна висота елемента;

Max-height: 333px;

min-height- Мінімальна висота;

Min-height: 333px;

Властивості тексту

text-align –горизонтальне вирівнювання (text-align: по центру (center) або по ширині (justify) або по лівому краю (left) і т.д.)

Text-align: центр;

vertical-align- Вертикальне вирівнювання;

Vertical-align: justify;

line-height- Висота рядка (line-height: у пікселях (px), у відсотках (%) тощо.) Також можете використовувати множник: наприклад, значення 1.5 означає повторений інтервал між рядками:

Line-height: 1.5;

color– колір тексту (color: колір). Кольори можуть ставити по-різному:

1. використовуючи назву(red, green, white тощо);
2. за шістнадцятковим значенням,перед кодом не забудьте ставити символ ґрат – #

Тут я поставив колір чорного кольору. Дізнатися який код відповідає кольору, Ви можете завантажити програму . Вона дуже зручна, я давно нею користуюся і Вам раджу її скачати, тому що в майбутньому вона нам знадобиться.

letter-spacing –збільшення/зменшення відстані між літерами (letter-spacing: значення (у пікселях тощо) | normal – нормальний інтервал):

Letter-spacing: 7px;

text-transform– вибір написання слова великими/маленькими літерами (text-transform: lowercase (усі літери будуть малими) | uppercase (усі символи будуть великими)

Text-transform: uppercase;

Фон

background– фон сторінки (background: , жодна властивість не обов'язкова, тому можна використовувати лише те, що необхідно):

Background: #000 url("images/wpnew.png") repeat-y;

Наведено приклад, де заданий колір фону, потім йде шлях до фонового зображення і по вертикалі.

background-position– стартова позиція фону сторінки (background-position: ||):

Background-position: left top;

background-color- Колір фону (background-color: колір);

Background-color: #333333;

background-attachment– фон сторінки фіксований або прокручується разом із “повзунком” (background-attachment: fixed | scroll)

Background-attachment: scroll;

background-image– зображення фону (background-image: url(шлях до файлу)):

Background-image: url("images/wpnew.gif");

background-repeat– повторення фонового зображення (background-repeat: no-repeat | repeat | repeat-x | repeat-y)

Background-repeat: repeat-y;

Позиції

float- Визначення вирівнювання об'єкта (float: left | right)

Float: left;

Вище наведено приклад обтікання з правого краю.

visibility– можливість зробити будь-який об'єкт видимим чи невидимим (visibility: visible | hidden):

Visibility: hidden

Межі

border– рамка (кордон) елемента (товщина стиль цвет_рамки):

Border: 1px solid black;

• solid- Суцільна рамка
• dotted- точкова
• dashed- Пунктирна

Інші види рамок, які перераховані нижче, працюють аналогічним способом.

border-top– верхня рамка

border-right- Права рамка

border-bottom- нижня рамка

border-left– ліва рамка

Відступи

margin –величина відступу ( );

Margin: 3px 3px 3px 3px;

margin-top- Верхній відступ;

Margin-top: 3px;

margin-right- Правий відступ;

margin-bottom- нижній відступ;

margin-left- лівий відступ;

Поля

padding- властивості поля ( зверху, праворуч, знизу та зліва відповідно);

Padding: 3px 3px 3px 3px;

padding-top– верхнє поле

Padding-top: 3px;

padding-right– праве поле

padding-bottom– нижнє поле

padding-left– ліве поле

Псевдокласи

:hover- Стиль об'єкта при наведенні мишкою (елемент: hover ( ... ))

A:hover ( background: #333333; color: #333333;)

A:visited (color: #333333;)

Практика з CSS

Отже, що робити, якщо Ви раптом вирішили попрацювати зі шрифтом блогу?Я волію робити таке:

Аналогічним чином Ви можете змінити будь-що на блозі. Використання робить редагування CSS дуже зручним. Не потрібно 50 разів редагувати style.css, оновлювати на сервері і дивитися чи так подобається.

Тому для редагування CSS спочатку дивіться зміни в Firebug, тільки потім змінюєте в style.css і оновлюєте на сервері . Таким чином, ви заощадите купу часу.

Дрібні зміни, які я зробив на демонстрованому блозі (якщо Ви активний читач , Ви знаєте адресу того блога):

_____________________

Мабуть, усі. Буде ще кілька уроків щодо зміни дизайну, з доопрацювання, потім підуть дуже цікаві уроки щодо подальшого життя блогу. Вибачаюсь за те, що довго не писав, просто, будучи студентом, не знаходив часу на блог (самі розумієте – запара 🙂).

Планую з 1 червня покращити якість уроків, та й усього блогу загалом. Будуть цікаві конкурси, також хочу спробувати записати відео уроки. Ще в планах розробити власний унікальний шаблон для того, щоб він був швидшим і по дизайну характеризував мене.

Загалом, влітку я активно займатимусь своїми блогами, так що, обов'язково підпишіться на RSS або на електронну скриньку у формі, яка розташована нижче. Ви ж не бажаєте пропустити нічого цікавого? 🙂

Вступна стаття про CSS, з якої Ви познайомитеся із загальними поняттями, що таке CSS, для чого він потрібний. Коротко познайомимося з його синтаксисом та можливостями. Почнемо з визначення

1. Визначення CSS

CSS(від англ. "Cascading Style Sheets", каскадні таблиці стилів) - список стилів для сайту на html

Що таке стиль? Грубо кажучи стиль це те, як виглядає елемент на сайті. Наприклад, будь-який текст можна написати розміром 10 пікселів, а можна 14 пікселів. Можна написати чорним кольором, синім. Можна підкреслити/нахилити/закреслити тощо. Все, що пов'язано з форматуванням тексту, робиться через CSS.

Але це лише мала частина можливостей. За всю візуалізацію всіх тегів HTML відповідає CSS. Навіть за динамічні зміни: меню, що випадають, підсвічування посилань при наведенні.

Список всіх стилів мовою вебмайстрів часто називають "таблиця стилів CSS".

2. Цілі та завдання CSS

• Зробити сайт красивішим (у плані дизайну), зробити доброзичливий інтерфейс, та й просто, щоб сайти хоч якось відрізнялися один від одного
• Відокремити код html від коду опису стилів та дизайну

3. Синтаксис CSS (селектори)

Кожна властивість та стиль описується через "Селектори". Його синтаксис наступний

Селектор (атрибут: значення;)

Селектор- це може бути назва стилю чи тега. У фігурних дужках описуються конкретні правила. Опис відбувається завжди за одним стандартом: "назва атрибута: значення". Кожне правило має закінчуватися крапкою з комою.

Наприклад

. Назва_стилю (атрибут1: значення1; атрибут2: значення2; ...);

Існує безліч варіантів завдання стилів CSS. Давайте розберемо найпопулярніші на прикладах.

/*Завдання загального стилю*/ .global_style ( font-size : 12px ; color : red ; ) /**/ font.style1 ( font-size : 10px ; color : blue ; ) /* Завдання загального стилю тільки для тега*/ #global_style2 ( font-size : 14px ; color : red ; ) h1 ( font-size : 19px ; )

Стиль global_style можна використовувати для всіх тегів як клас. Наприклад,

.

Стиль style1 можна використовувати тільки для тега оскільки у визначенні було вказано font.style1 .

Третій варіант завдання через ґрати (#). Як і в першому випадку він визначений для всіх елементів, але ставити його потрібно не через class, а через атрибут id:

В останньому варіанті ми просто вказали назву тега

та прописали йому стиль. Це означає, що тепер усі теги

будуть успадковувати значення цього стилю.

4. Як і де ставити стилі CSS

5. У чому переваги використання CSS

• Легко міняти дизайн. Достатньо поміняти стиль лише в одному місці і він зміниться на кожній сторінці сайту
• Це єдиний спосіб змінювати дизайн на сайті
• Простий синтаксис мови

6. Проблеми CSS із браузерами

Старі браузери підтримують не всі можливості CSS. Із цим виникають проблеми відображення. Наприклад, ефект, задуманий для кращого сприйняття контенту, може призвести до зворотного ефекту. Якщо якась властивість не підтримується, тобто ризик накладання блоків, текстів один на одного і т.п.

Частково цю проблему вирішують префікси. По суті це просто слово, що стоїть перед аргументом у таблиці стилів. Для кожного браузера є свій префікс.

• -moz- для браузера Firefox
• -webkit-для браузерів Chrome і Safari (в обох браузерах використовується один і той же двигун візуалізації)
• -ms- для браузера Internet Explorer
• -o- для браузера Opera

7. Відповіді на запитання, що часто ставляться

7.1. Що таке CSS3

Останнім часом можна зустріти поняття CSS3. По суті це все той же CSS, але з набором нових аргументів, які дають додаткові можливості щодо різних ефектів. Наприклад, світіння тексту. Багато браузерів не підтримують такі властивості, тому рекомендується використовувати такі ефекти в мінімальних кількостях.

7.2. У чому різниця між CSS та HTML?

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

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

У зв'язку з цим, з цієї посади я починаю серію публікацій з CSS. Я постарався скласти уроки таким чином, щоб навіть людина, яка є повним нулем у веб-розробці змогла навчитися цієї чудової технології.

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

Детальніше про те, що таке Cascading Style Sheet (CSS) і для чого вона використовується читайте нижче.

Відеоверсія:

Що таке CSS?

Як ви знаєте, при створенні сайту ми формуємо його вміст за допомогою мови гіпертекстової розмітки – HTML (Hypretext Markup Language). За допомогою нього ми створюємо навігаційні блоки, наповнюємо веб-сторінку текстовим, аудіо/відео-контентом. Загалом створюємо структуру сайту.

Після формування змісту сайту, на наступному етапі ми переходимо на стадію оформлення його зовнішнього вигляду, щоб він був красивим і приємним. А також щоб він добре виглядав на різні роздільні здатності дисплеїв. Саме для цього ми використовуємо каскадні таблиці стилів CSS.

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

Наочний приклад

Образно кажучи, створення сайтів можна порівняти із малюванням. Перед тим як ми почнемо вправно керуватися пензликом та полотном, нам варто визначитися з тим, що саме буде зображено на нашій картині. Уявимо, що ми вирішили намалювати пейзаж, на якому буде зображено птаха на тлі дерев та гір. Можна сказати, що на цьому етапі ми визначили самий вміст картини.

Подібна ситуація з HTML, за допомогою якого ми формуємо зміст веб-сторінки.

Сайт на голому HTML, без CSS
Той самий сайт із підключеними таблицями стилів

Для більшої наочності, давайте перейдемо на якийсь веб-сайт, наприклад, facebook.com. Наступним кроком нам потрібно буде встановити розширення для браузера під назвою WEbDeveloper. Я його вже встановив, ну а вам буде достатньо ввести в пошуковику фразу WEbDeveloper, перейти за посиланням і у вікні, що відкриється, клікнути по кнопці "Встановити".

У мене це розширення встановлено та управляється за допомогою іконки з шестернею у правій верхній частині екрана. Я пропоную на сайті faceboook.com відключити таблиці стилів та подивитися тільки на її вміст. Для цього ми переходимо в розділ CSS і натискаємо Disable All Styles. Стилі відключаються і ми бачимо як непоказно виглядає вміст цієї веб-сторінки без оформлення.

Зовнішній вигляд соціальної мережі без підключених файлів CSS

Тобто зараз ми бачимо сайт на голому HTML. Щоб увімкнути css файли цієї сторінки, ми повертаємося до WEbDeveloper і знімаємо галочку з Disable All Styles.

Таблиця стилів знову підключилася і бачимо вміст веб-сторінки з оформленням.

Соц. мережа із підключеними CSS файлами

Як працює CSS?

Всі правила оформлення сайту зберігаються у файлі з розширенням CSS, який у свою чергу завантажується на веб-сторінку через тег .

Під час завантаження html сторінки через тег завантажується і CSS файл, після чого браузер починає його обробку і сайт відображається згідно з правилами, заданими в цьому файлі. У ньому описано властивості відображення елементів веб-сторінки.

Наприклад, через селектор "p" ми задаємо тип, розмір та кольори шрифтів в абзацах. Для налаштування шрифтів першого рівня ми використовуємо селектор "h1".

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

Навіщо вивчати CSS?

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

З її актуалізацією багато тегів HTML 4 вже не використовуються. В основному, це теги, які відповідали за оформлення веб-сторінок. І тут немає нічого дивного, адже за це тепер відповідають CSS властивості. Якщо ви вже володієте азами HTML, наступним логічним кроком буде вивчення CSS. Це той етап, який не вдасться перестрибнути, якщо ви хочете навчитися верстці сайтів. Тим більше, що це не займе багато часу.

Плюси CSS

• З використанням CSS стилів код HTML значно скорочується. Часом у кілька разів. Це позитивно впливає на швидкість завантаження сайту, що полегшує його просування в пошукових системах;
• При оновленні дизайну сайту більше немає необхідності правити кожен тег окремо на всіх веб-сторінках. Достатньо змінити пару рядків у таблиці стилів;
• CSS відкриває перед вами широкі можливості в оформленні та розмітці ваших сайтів;
• Відпадає потреба використовувати застарілі теги. Багато пошукових систем не люблять їх, і використання застарілих тегів вважається моветоном;
• Використовуючи CSS ви йдете в ногу з часом.

Як швидко навчитися основам CSS

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

Здрастуйте, дорогі читачі блогу! Щось давно я нічого не писав до рубрики про створення сайту. Так ось, у цій статті я розповім про те, що таке каскадні таблиці стилів і навіщо вони взагалі потрібні. Для початку раджу прочитати попередні матеріали з цієї рубрики — .

Отже, CSS (Cascading Style Sheets)- це мова опису зовнішнього вигляду документа, написаного за допомогою мови гіпертекстової розмітки (HTML). Сьогодні CSS використовується практично на всіх веб-сайтах. Сама мова була розроблена Консорціумом Всесвітньої павутини (про неї можете прочитати статті про теги) та опублікована наприкінці 1996 року.

Метою створення CSS був розділення опису логічної структури документа(зараз виробляється за допомогою HTML) від опису його зовнішнього вигляду(Наразі проводиться за допомогою CSS). Справа в тому, що з розвитком комп'ютерних технологій та інтернету люди намагалися зробити сайти більш функціональними та яскравими. Але всі параметри зовнішнього вигляду представлялися в html тегах прямо у веб-документі.

Наприклад, нам потрібно змінити колір літер у будь-якій частині документа. Для цього можна скористатися тегом font та атрибутом color. Ось так буде виглядати текст, який потрібно перефарбувати, у html коді:

текст

Начебто коротко, і не забруднює код. Але якщо нам потрібно змінити текст якось ще. Наприклад, змінити та збільшити шрифт. Допустимо ось так: приклад. Ось так цей приклад виглядатиме в коді:

приклад

Код стає більшим. А якщо таких текстів на сторінці багато? І в них є ще якісь властивості? Якщо писати текст щоразу за допомогою html тегів, то сторінка виглядатиме як мінімум не красиво. Ось для цих цілей і створили мова CSS.

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

блоків).

Правила написання css стилів

А почнемо ми з того, що створимо у себе на комп'ютері файл із розширенням.html (раджу кинути його в окрему папку). Додамо до нього якийсь текст. Додамо , заголовок та абзаци. Ось що в нас вийшло:

Простий непоказний текст. У коді виходить таке:

Стандартна сторінка в Інтернеті. Але треба її якось прикрасити. Можна, звичайно, додати купу тегів, але код виглядатиме досить похмуро. Ми вчинимо інакше. У тій же папці створіть файл із розширенням css, нехай це буде style.css. А тепер трохи відвернемось і я розповім вам про правила написання цього файлу.

Як уже було сказано раніше, css - мова стильової розмітки, отже - у нього є свій синтаксис та особливості. Взагалі всю мову можна розділити на 2 пункти:

1. Правилаяк повинен виглядати елемент у браузері (у фігурних дужках).
2. Селектори- який елемент повинен так виглядати (перед фігурною дужкою).

Ось невеликий пояснювальний малюнок:

До речі, рекомендую прочитати статтю про . Їх не так багато, а користуватись ви будете максимум половиною від цієї кількості. Якщо застосувати ці стилі до нашого документа (зробимо трохи згодом), то вийде, що весь текст у тегах абзацу буде зеленим курсивом нормальної товщини.

Тепер трохи про правила написання правил (тавтологія виходить). Слово перед двокрапкою називається властивістю, а потім - значенням властивості.

• Перше правило - значення завжди відокремлюється від якості двокрапкою.
• Друге правило - правила завжди поділяються крапкою з комою

Як бачите, особливо складного тут нічого немає, головне не заплутатися. До речі, прогалини ролі не грають і те, що написано на скріні вище, можна записати в один рядок.

Як застосувати css властивості - підключення до html документа

А тепер розберемося, як можна застосувати дані характеристики до нашого документа. Існує три способи:

1. Прописування властивостей прямо у тезі- використовується атрибут style, який застосовується до будь-якого html тегу. В атрибуті прописуємо всі стилі, які хочемо використовувати.
2. Прописування стилів у head- У шапці сайту (теги head) прописуємо всі стилі, які будемо використовувати за допомогою тега style.
3. Підключення окремого файлу- Спершу створюємо файл з усіма стилями, потім підключаємо його до документа за допомогою спеціальних тегів у head.

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

Класичне орігамі

Класичне орігамі

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

Другий спосіб має на увазі знаходження всіх стилів у шапці сайту. Для цього нам знадобиться тег style. Відкриваємо наш файл і вносимо такі зміни:

Основні правила тега style - знаходиться між тегом head, що відкриває і закриває, всередині нього прописуються всі необхідні властивості. Також, щоб браузер не прийняв стилі за html код, необхідно прописати атрибут type зі значенням text/css. А ось як тепер виглядає сторінка:

Тепер у всіх абзацах (тег

) текст став зеленим, використовується шрифт сімейства cursive, а заголовок став червоним. Тег style ми додали тільки в шапку сайту, основна частина сторінки залишилася без змін. Дуже зручний спосіб, але не найкращий.

Найпопулярнішим і найоптимальнішим варіантом буде підключення окремого стильового файлу. Зробити це можна двома способами:

Більшість веб-майстрів використовують перший варіант підключення до файлу. Перевага файлу стилів, що підключається, в порівнянні з іншими, очевидно - прискорення завантаження сайту та зменшення навантаження на хостинг. Адже браузеру буде достатньо лише раз завантажити файл стилів замість постійного читання атрибута style. Та й код менш захаращений виходить.

І при підключенні файлу, і написанні в тегах, і в шапці сайту правила написання стилів залишається незмінним. властивість: значення;. Щоправда, тегам не треба писати селектори, але це й так зрозуміло.

На цьому поки зупинимося - базові знання отримали, Раджу файли не видаляти, ми їх ще використовуватимемо в уроках і не раз.!