Підключення таблиць стилів

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

Як я вже говорив раніше, css покликаний оформляти html конструкції, тобто надавати їм вигляд, колір, розмір, розташування, і так далі, а значить безпосередньо впливати на html код.

Для забезпечення цього впливу, виконується підключення css до html документу.

Перший спосіб підключення css - cвязана стилі. Застосовується тоді, коли таблиця стилів пишеться в окремому файлі.

В цьому випадку, файл style.css з таблицею стилів, підключається до html файлу в тезі head, за допомогою тега link

link - це одиночний тег;

href - знайомий нам атрибут посилань, css / stile.css - значення вказує шлях до файлу, і назва файлу;

type - атрибут вказує тип підключається елемента, в нашому випадку це text / css;

rel - атрибут визначає взаємозв'язок, і в значенні його зазвичай пишеться stylesheet (таблиці стилів);

У цьому коді зазвичай змінюється тільки значення style.css (назва підключається таблиці). Таблиці підключені.

Тепер браузер буде відображати html файл в тому вигляді, який для нього буде прописаний у файлі style.css.

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

І, що застосовується набагато частіше, навпаки, одну таблицю можна підключити до безлічі html файлів.

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

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

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

Справа в тому, що одним із завдань веб-майстра є зменшення обсягу коду, при незмінному кінцевому результаті, і окремий файл style.css найбільш повно відповідає цій вимозі.

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

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

Тепер розумієте різницю?

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

Другий спосіб підключення css- глобальні стилі дозволяє підключати (розташовувати) таблицю стилів безпосередньо в html файлі.

Робиться це за допомогою тега style. і прописується він так-же, як і в першому випадку в тезі head.

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

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

Третій спосіб підключення css - внутрішні стилі дозволяє прописувати стилі прямо всередині html тега.

Реалізується він за допомогою атрибута style. який не варто плутати з однойменною тегом.

Застосовується він тоді, коли потрібно оформити тільки один елемент контенту.

Для прикладу візьмемо шматочок тексту, і поставимо йому стилі, уклавши в тег span

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

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

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

Невже не залишилося питань? запитати

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

Ура! Розібрався. Якщо у кого-то будить та ж заковика. Загалом у мене все запрацювало коли я став пробувати робити сайт на php. Динамічний сайт. Тоді я створив папку стилів css. Туди помістив файл стилів style.css. Підключив його link rel = "stylesheet» type = "text / css» href = "css / style.css» / Головна сторінка сайту з ім'ям index.php

Помилки в тому, що написано я не бачу. Але так як стилі не працюють, то браузер не може знайти файл syle.scc. Десь є дрібна помилка. Мені б подивитися всю директорію. Швидше за все, свіжим поглядом, я б її побачив. Спробуй скинути мені на meil [email protected]. або в скайп webded1, папку з Директорією. Я подивлюся.

Юрій Миколайович каже:

Може знаєш чому у мене перестають працювати стилі?
Якщо я їх підключаю в (head голові) html - ось так style type = "text / css» -
то все працює. Якщо я виношу стилі в окремий файл style.css (підключаю так: link rel = "stylesheet» type = "text / css» href = "style.css»), і цей файл знаходиться там же, де і файл index.html, то теж все працює на ура.
Я розумію, що тут href = "style.css» прописується шлях до файлу css. Наприклад, я створив папку css, і переніс туди файл стилів, ось шлях: href = "css / style.css». ТАК ПЕРЕСТАЄ ПРАЦЮВАТИ. (Link rel = "stylesheet» type = "text / css» href = "css / style.css») Де моя помилка? Відповідай якщо знаєш ласка. Дуже чекаю відповіді.

Цікаво. Зазвичай від того, який атрибут варто раніше, а який пізніше, нічого не змінюється, браузер все одно їх враховує. І валідатор не видає помилки. Але, врахуємо. Дякуємо.

Юрій Миколайович каже:

Було так
link href = "css / style.css» type = "text / css» rel = "stylesheet»
стало так
link rel = "stylesheet» type = "text / css» href = "style.css»

Юрій Миколайович каже:

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