2.2. Каскадні таблиці стилів.

Існує три таких способи:

• Використовуючи тег <link> із указівкою URL зовнішньої таблиці стилів.

• Використовуючи тег <style> усередині заголовка документа, тобто усередині тега <head>.

• Використовуючи атрибут style у параметрах тега.

За допомогою тега <link> таблиця стил в прописується втакийспос б: <link rel="stylesheet" type="text/css" href="http ://your.url.com/anyfile.css">

Тут атрибут href задає той самий URL файлу таблиці зі стилями. Файл таблиці стилів текстовий. Другий метод використовує, як ми вже роз бралися, тег <style>. При цьому рекомендується для завдання наступний формат: <style type='text/css">

таблиця стил в

</style>

Таблиця стилів це запис атрибутів тегов удосить простому форматі:

ім'ятега {параметр _тега!: значення; ... }

ім'ятега.клас {параметр _тега!: значення; ... }

.клас {параметр_тега! : значення; ... } Ім'ятега, для якого будуть діяти задані настроювання вказується вполе ім'я_тега. У фігурних дужках указуються параметри тега з їхніми значеннями.

Перший формат забезпечуєте всім тегам зцим ім'ям однакове відображення. Якщо жтреба, що всі теги зоднаковим ім'ям удокументі відображаються не однаково, можна створити клас, чи сказати підклас тегов зтаким ім'ям, що мають інше оформлення. Для завдання імені цього нового підкласу рядок таблиц стил в записується по другому формат . Для використання нового класу повинн будете використовувати атрибут class. Приклад: <style type='text/css"> p {color: red;}

</style>

Після створення такої таблиці стилів усі параграфи вдокументі будуть відображатися червоним кольором. Можна використовувати нши формат: <style type='text/css">

p.red {color: red;}

</style>

При так м завданн таблиц вс параграфи документа будуть в дображатися за замовчуванням, чи з раніше заданими настойками. Для того, щоб офарбити параграф у червоний колір треба використовувати тег з атрибутом class: <p class=red> Red paragraph.</p>

Уданому випадку клас red буде поширюватися т льки на теги параграф в <p>. Якщо треба використовувати цей клас убудь-яких інших тегах, то використовуйте запис по третьому форматі, тобто без вказ вки мен тега. При цьому використання атрибута class укожного зтегов буде йому в дпов дний клас для в дображення зтаблиц стил в.

Утак йтехнолог ї розфарбовування єщедуже велика гарнаможлив сть за завданням стилю т льки визначеним тегам. Полягає вона вт м, що якщо перед м'ям тега, для якого складається стиль, пишеться якийсь список інших тегов, те буде діяти принцип вкладеності. Т.е. придуманий стиль буде діяти тільки на теги ззаданим ім'ям іще вкладеним у сер едину тих тегов, імена яких було записано раніше. Приклад: p b { color : green}

При такому записі тег <b> буде офарблюватися в зелений колір якщо він знаходиться усередині параграфа:

<p>Звичайний текст, аце <Ь>зєлєний текст</b>.</p> <Ь>Ацє вже звичайний тєкст...</Ь>

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

Інформаційні Технології О.В.Стрельцов із

<р 8гу1е="со1ог: те&"> Червоний параграф.

Оформляється вона точно також як ітег <8Іу1е>. При цьому навіть іноді багато самих назв тега іне вказують, усім ясно що там таблиця зі стилями Чим такий метод завдання стилів цікавий ?! Так тим, що він розташовується в окремому файлі, ійого можна використовувати для будь-яких інших документ в не розписуючи його усередину, що заощаджує м сце часзавантаження.

 

CSS: Область елемента.

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

Область 2 називається зовнішнім відступом елемента, margin. Ця область потр бна для в дд лення границ елемента в д зовн шнього середовища. Границею же елемента єобласть яка має назву зветься border. Область з номером 4 є внутрішнім відступом елемента від границі, зветься вона padding.

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

Ус ма цими областями можна керувати. П д керуванням тут мається на уваз зм на розм р в кв т в. На малюнку усі виглядає квадратно, але CSS надає унікальну можливість установлювати параметри для кожної частини област . Наприклад всю область можна розд лити на чотири частини: верхню, праву, нижню, л ву.

Розм р установлюється за допомогою параметр в margin-top , margin-right , margin-bottom , margin-

left. Вони встановлюють розміри зусіх чотирьох сторін. Задати розмір всієї області таким способом таки масно вийде. Саме для такої от "економії місця" призначений параметр margin. Уньому через пробіл задаються значення розмірів усіх чотирьох сторін елемента в вищенаведеноиу порядку. Значення розм ру можуть мати, як завжди, абсолютне, в дносне процентне значення. Також для завдання границь існує зарезервоване слово auto. Залишилося відзначити одна гарна властивість завдання розмірів. Якщо при завданні margin написано тільки одне значення розміру, то він автоматично призначається всім сторонам області. Якщо ж задано більше значень, але не всі, то розм р нев домої сторони береться р вним розм ру протилежної сторони. Приклад: p { margin: 1px 2px 3px }

p {        margin-top: 1px margin-right: 2px margin-bottom: 3px margin-left: 2px }

Ц визначення будуть екв валентними.

Зовсім аналогічно можна задавати розміри внутрішнього відступу, унас він під 4 номером. Робиться усі за допомогою параметрів padding-top, padding-right, padding-bottom , padding-left чи одним загальним pa dding.

Областю із самою рясною кількістю параметрів природно є границя елемента, вона внас 3. Для неї можна задати розм р, кол р, стиль л н ї. Давайте щоб не описувати хмару параметр в просто поясню як будувати їхні імена. Для завдання ширини лінії використовується слово width, для кольору color, для стилю style. Після цього можна будувати ім'я параметра за наступною схемою:

border-сторона-властивість: значення; border-властивість: верх право низ ліворуч;

Наприклад параметр зім'ям border-top-color задає колір верхньої частини границі, чи border-bottom-style задає стиль нижньої границ . При опис як удругому рядку можна задати значення для всіх чотирьох сторін відразу.

Тепер б льш дотепно зкожноювластив стю. Властив сть width можна задавати також як ми завжди задавали розміри. Для нього також існують уже зарезервовані значення: thin, medium, thick. Ці три значення задають в дпов дно тонкий, середн й товстий тип для л н ї. За замовчуванням для вс х елемент в товщина л н ї встановлена як середня, тобто medium . Властив сть color задаються стандартно як ус кол рн значення.

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

none - стиль в дсутн й, також при цьому гноруються будь-як значення border-width dotted - л н я зкрапок

dashed - лінія з маленьких ліній, по науковому зветься пунктирною solid - суц льна л н я

double - малюється дв л н ї в дразу, тобто виходить рамка. Загальний розм р двох л н й дорівнює border-width , аміж лініями проміжок водин піксел. •   groove, ridge, inset, outset - усі ці стилі зображують тривимірні рамки, що зафарбовують з використанням квітів border-color. Самі пробуйте, що зних вам більше підходить Ус м властивостям рамки також приздатн методи нтеграц ї, чи краще сказати глобал зац ї. Те пак задавати всі параметри разом. Отут єдеяка ієрархія. Параметри з трьох слів, тобто типу border-top-style задають конкретна властив сть конкретної сторони рамки. Параметри здвохсл в (типу border-color) задають конкретна властивість для всіх сторін рамки. Ну, асамий глобальним параметр border задає всі перераховані властивості для всіх сторін рамки. Причому думаю при використанні цього параметра вам уже буде складно що-небу дь деталізувати для окремої частини. Залишилася внас остання область, це область самого елемента. Для неї параметри виглядають більш короткими Два параметри width, height задають його розмір, за замовчуванням вони обоє задані як auto. Вони можуть приймати абсолютні івідносні розміри, при цьому в горизонтальний розм р можна задавати через в дсотки. Іщедва параметри float, clear керують "плаванням" цього елемента. Т.е. float задає обтікання елемента текстом: left - ліворуч, right - праворуч (іщеnone - без обт кання). А параметр clear очищає прост р убатьк в з обт канням. Якщо вбатькаобт кання задане як left, то при використанні clear: left; елемент буде поміщений після елемента з обтіканням, тобто не ввійде увміст, що обтікає. Значення для цього параметра чотири: none, left, right, both. Останнє значення використовується для нев домого заздалег дь типу обт кання, тобто для обох його значень. От ще один великий шматок купи розгребли