Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Тема 3. Форматування елементів.

Стр 1 из 3Следующая ⇒

Тема 3. Форматування елементів.

Управління кольором в CSS.

Колір в стилях можна задавати трьома способами: шістнадцятковими значеннями, за назвою і в форматі RGB.

За шістнадцятковими значеннями

Для завдання кольорiв використовуються числа в шістнадцятковому коді. Шістнадцяткова система, на відміну від десяткової системи, базується, як випливає з її назви, на числі 16. Цифри будуть наступні: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифри від 10 до 15 замінені латинськими буквами. Числа більше 15 в шістнадцятковій системі утворюються об'єднанням двох чисел в одне. Наприклад, числу 255 в десятковій системі відповідає число FF в шістнадцятковій системі. Щоб не виникало плутанини у визначенні системи числення, перед шістнадцятковим числом ставлять символ грат #, наприклад # 666999. Кожен з трьох кольорів - червоний, зелений і синій - може приймати значення від 00 до FF. Таким чином, позначення кольору розбивається на три складові #rrggbb, де перші два символи відзначають червону компоненту кольору, два середніх - зелену, а два останніх - синю. Допускається використовувати скорочену форму виду #rgb, де кожен символ слід подвоювати (#rrggbb). Наприклад, запис # fe0 розцінюється як # ffee00.

За назвою

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

Табл. 1. Назви кольорiв
Имя	Колiр	Код	Описание
white		#ffffff или #fff	білий
silver		#c0c0c0	сірий
gray		#808080	темно-сірий
black		#000000 или #000	чорний
maroon		#800000	темно-червоний
red		#ff0000 или #f00	червоний
orange		#ffa500	помаранчевий
yellow		#ffff00 или #ff0	жовтий
olive		#808000	оливковий
lime		#00ff00 или #0f0	світло-зелений
green		#008000	зелений
aqua		#00ffff или #0ff	блакитний
blue		#0000ff или #00f	синій
navy		#000080	темно-синій
teal		#008080	синьо-зелений
fuchsia		#ff00ff или #f0f	рожевий
purple		#800080	фіолетовий

За допомогою RGB Можна визначити колір, використовуючи значення червоної, зеленої та синьої складової в десятковому численні. Значення кожного з трьох кольорів може приймати значення від 0 до 255. Також можна задавати колір у відсотковому відношенні. Спочатку вказується ключове слово rgb, а потім в дужках, через кому вказуються компоненти кольору, наприклад rgb (255, 0, 0) або rgb (100%, 20%, 20%).У прикладі представлені різні способи задання кольорiв елементів веб-сторінок.<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" > <title> Цвета </title> <style> BODY { background-color: #3366CC; /* Цвет фона веб-страницы */ } H1 { background-color: RGB( 249, 201, 16 ); /* Цвет фона под заголовком */ } P { background-color: maroon; /* Цвет фона под текстом абзаца */ color: white; /* Цвет текста */ } </style> </head> <body> <h1> Lorem ipsum dolor sit amet </h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </p> </body></html>

Зміна кольору

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> body { color:blue; } h1 { color:#00ff00; } </style> </head> <body> <h1>Заголовок имеет свой собственный цвет текста</h1> <p>Абзац будет наследовать цвет текста от родительского элемента, в качестве которого для него выступает элемент body.</p> </body> </html>

Попробовать»

CSS властивості background використовуються для створення ефектів на задньому тлі сторінки.

Список властивостей для стилізації заднього фону, які будуть розглянуті нижче:

• background-color

• background-image

• background-repeat

• background-position

Додавання фонового зображення

Наступні правила додають колір фону і фонове зображення до елемента <body>. Потім ми задаємо для елемента <div> (з класом wrapper) білий колір фону:

body { background-color: #333; background-image: url('image.png'); } .wrapper { width: 80%; margin: 20px auto 40px auto; background-color: #fff; color: #333; }

Властивість background-color просто додає колір фону на сторінку або до певного елементу. Ми використовували в прикладі background-color, щоб встановити фоновий колір для елемента <body> і всередині елемента <div>. Якби колір фону для елементу <div> не був би встановлений, то в якості фону був би показаний фон, який встановлений для <body>, так як за замовчуванням всі елементи мають прозорий фон.

Властивість background-image дозволяє вказати картинку, яка буде відображатися в якості фонового зображення для всієї сторінки або для окремого елемента. У прикладі ми використовували фонове зображення в якості фону для всієї сторінки.

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

Повтор фонового зображення

За замовчуванням фонове зображення повторюється по вертикалі і по горизонталі заповнюючи таким чином весь доступний простір в елементі. Повтор фонового зображення можна перевизначити за допомогою властивості background-repeat, розглянемо його можливі значення:

• no-repeat - фонове зображення не повторюється

• repeat-x - повторює фонове зображення тільки по горизонталі

• repeat-y - повторює фонове зображення по вертикалі

• repeat - фонове зображення займає весь доступний простір повторюючись по горизонталі і вертикалі (є значенням за замовчуванням)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> body { background-image: url('img_tree.png'); background-repeat: no-repeat; padding-left: 200px; /*отступ от левого края равный ширине картинки*/ } </style> </head> <body> <h1>Украсим страничку фоновым изображением!</h1> <p>При добавлении изображения к фону элемента, текст может наехать на него, что может испортить впечатление от страницы. Для того, чтобы этого не случилось, для всех элементов был добавлен отступ от левого края, равный ширине картинки.</p> </body> </html>

Попробовать»

Позиціонування фонового зображення

За замовчуванням фонове зображення розташовується у верхньому лівому кутку вікна браузера або елемента-контейнера. Якщо фонове зображення не повторюється (background-repeat: no-repeat;) або повинно повторюватися з певного місця, то можна використовувати властивість background-position, щоб вказати в якому місці вікна браузера або елемента воно має бути розміщено. Ця властивість зазвичай приймає два значення, що розділяються пропуском. Перше значення - положення по горизонталі, друге - по вертикалі.

Властивість background-position може приймати в якості значень ключові слова: left, top, center, right і bottom. Ви можете використовувати будь-яку комбінацію ключових слiв

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

body { background-image: url('img_flwr.png'); background-repeat: no-repeat; background-position: bottom right; padding-right: 230px; /*отступ от правого края равный ширине картинки*/ }

Попробовать»

Якщо буде вказано тільки одне значення, то за замовчуванням другим значенням буде center:

background-position: right;

це те ж саме що і:

background-position: right center;

Ви також можете використовувати в якості значень пікселі або відсотки. Вони визначають відстань від верхнього лівого кута вікна браузера (або елемента-контейнера). Верхній лівий кут відповідає значенню 0% 0%.

Попробовать»

Об'єднання властивостей

Можна отримати той же самий результат, що і в попередньому прикладі, але з меншою кількістю рядків коду. Для цього використовується властивість background, яка дозволяє встановити значення властивостей background-color, background-image, background-repeat, background-attachment, і background-position в оголошенні всього однієї властивості.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> body { background: white url('img_tree.png') no-repeat fixed right top; padding-right: 200px; } </style> </head> <body> <h1>Объединим свойства background в одно объявление!</h1> <p>Объединение нескольких свойств в одно может значительно сократить ваш CSS-код, при этом никаких изменений во внешнем виде страницы не произойдет. Свойства, которые возможно объединять в одно объявление, вы можете посмотреть в нашем справочнике по CSS. </p> </body> </html>

Попробовать»

Кілька фонових зображень

За допомогою властивості background можна додати кілька фонових зображень до одного елементу. Для цього в якості значення потрібно вказати список картинок, розділяючи їх комою. Як і у випадку з однією картинкою, до кожного фонового зображення можна буде додати додаткові значення:

div { height: 360px; width: 400px; border: 3px solid #333; background: url('../img_flwr.gif') bottom right no-repeat, url('../img_tree.gif') repeat-x; }

Попробовать»

Форматування тексту

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

Новий рядок

Відступ у першому рядку абзацу, що імітує червоний рядок, - це один з найпоширеніших ефектів для тексту. У CSS для вказівки відступу призначена властивiсть text-indent.

У разі застосування властивості text-indent перший рядок будь-якого елемента може бути зміщений на задану величину, навіть якщо ця величина вiд’емна. Найчастіше ця властивість застосовується для створення ефекту червоного рядка у абзаців:

p { text-indent: 30px; }

Згідно з кодом прикладу перший рядок будь-якого абзацу буде змiщено на 30px.

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> p { text-indent: -40px; padding-left: 40px; } </style> </head> <body> <p>У этого абзаца первая строка будет выступать над остальными на 40px, для просмотра выхода строки за границу элемента и ее усечение вследствии этого, просто удалите строку CSS-кода добавляющую внутренний отступ к абзацу (padding-left: 40px;).</p> </body> </html>

Попробовать»

Примітка: властивість padding-left було приведено тільки для прикладу, як можна вийти з неприємної ситуації. На даний момент на ньому можна не загострювати увагу.

З text-indent можуть застосовуватися будь-якi одиниці вимірювання довжини, в тому числі і процентні значення. Розмір відступу, встановлений у відсотках, пов'язаний з шириною батьківського елементу. Наприклад, якщо встановлено відступ рівний 50% і абзац займає всю ширину вікна браузера, то перший рядок буде починатися посередині екрана.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> .test1 { text-indent: 25px; } .test2 { text-indent: 50%; } </style> </head> <body> <p class="test1">Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px. Абзац с отступом в 25px.</p> <p class="test2">Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%. Абзац с отступом в 50%.</p> </body> </html>

Попробовать»

Примітка: варто звернути увагу, що властивість text-indent успадковується, що може призводити до непередбачених результатів:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> .test1 { text-indent: 15%; } </style> </head> <body> <div class="test1"> Первая строка текста элемента div будет иметь отступ равный 15% ширины его родительского элемента или ширины окна браузера. <p>Первая строка текста элемента p будет иметь отступ, который был унаследован от его родительского элемента.</p> </div> </body> </html>

Попробовать»

Горизонтальне вирівнювання

За замовчуванням текст на веб-сторінках вирівняний по лівому краю елемента, в якому він розташовується, проте використовуючи властивість text-align, можна перевизначити, як будуть вирівнюватися рядки тексту щодо меж елемента. Розглянемо кожне з можливих значень:

· left - вирівнює текст по лівому краю.

· right - вирівнює текст по правому краю.

· center - вирівнює текст по центру.

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> h1 { text-align:center; } p.date { text-align:right; } p.main { text-align:justify; } /*значение justify растягивание текста по ширине*/ p { text-indent:30px; } /*задаем размер отступа для первой строки абзаца*/ </style> </head> <body> <h1>Пример выравнивания текста</h1> <p class="date">февраль, 2012</p> <p class="main">Помимо выравнивания текста, для первой строки абзаца был задан небольшой отступ, который визуально добавляет "красную строку" к тексту. Этот эффект очень пригодится на страницах с большими объемами текста, облегчая визуальное восприятие.</p> </body> </html>

Попробовать»

Примітка: властивість text-align працює тільки з блочними елементами, такими як абзац або div, вирівнюючи всередині них все рядкове вміст, включаючи зображення. Застосування властивості до рядковим елементам, таким як посилання або span, не дасть ніякого ефекту.

Форматування

Існують різні властивості для форматування тексту, розглянемо деякі з них. Властивість text-decoration дозволяє зробити текст підкресленим, встановити межу над текстом або зробити текст перекресленим. Для управління малими та великими літерами в тексті використовується властивість text-transform. Якщо необхідно збільшити або зменшити відстань між символами в тексті, в цьому вам допоможе властивість letter-spacing:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> p.class1 { text-transform: uppercase; text-decoration: overline; } p.class2 { text-transform: lowercase; text-decoration: line-through; } p.class3 { text-transform: capitalize; text-decoration: underline; } </style> </head> <body> <p class="class1">Первый абзац.</p> <p class="class2">Второй абзац.</p> <p class="class3">Третий абзац.</p> <p style="letter-spacing:3px;">Расстояние между символами в тексте изменено с помощью свойства letter-spacing.</p> </body> </html>

Попробовать»

Додавання тіні

Для додавання тіні до тексту використовується властивість text-shadow, яка може приймати до чотирьох параметрів:

1. зсув тіні вправо (при позитивних значеннях) або вліво (при негативних значеннях) від тексту

2. зсув тіні вниз (при позитивних значеннях) або вгору (при негативних значеннях) від тексту

3. розмиття тіні, чим більше число, тим змащену буде тінь, нульове значення означає повну відсутність розмитості (визначає чітку і різку тінь)

4. колір для тіні

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> h1 { text-shadow: 2px 2px 3px #000; } </style> </head> <body> <h1>Текст с тенью</h1> </body> </html>

Попробовать»

Шрифти CSS

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

Семейства шрифтiв в CSS

У CSS шрифти розділені на сімейства, кожне сімейство складається з набору шрифтів, що володіють загальними характеристиками. Існує всього п'ять родин шрифтів:

• sans-serif - шрифти без зарубок, вважається що вони краще читаються на екрані комп'ютера, ніж шрифти сімейства serif.

• serif - сімейство шрифтів із зарубками. У багатьох людей вони асоціюються з газетними статтями. Зарубки - декоративні штрихи і рисочки по краях букв.

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

• cursive - шрифти, що імітують рукописний текст.

• fantasy - художні та декоративні шрифти. Вони не дуже широко поширені, доступні не на всіх комп'ютерах і рідко використовуються в веб-дизайні.

Властивість font-family дає можливість змінити шрифт, заданий за замовчуванням. Зазвичай воно містить список взаємозамінних шрифтів, розділених комами, що належать одному сімейству. Якщо ім'я шрифту складається більш ніж з одного слова, то його потрібно вказувати в лапках. В кінці списку зазвичай вказується назва сімейства:

body { font-family: Verdana, Helvetica, Arial, sans-serif; }

Розглянемо, як браузер обробляє список шрифтів, заданий в нашому властивості font-family:

1. Спочатку він перевіряє, чи встановлений шрифт Verdana на комп'ютері, і, якщо так, використовує його як шрифту для тексту всередині елемента (у нашому випадку всередині елемента <body>)

2. Якщо Verdana не встановлений, то шукає шрифт Helvetica. У разі успішного пошуку використовує його всередині <body>.

3. Якщо і Helvetica не встановлений, то шукає шрифт Arial. Якщо він є на комп'ютері, то застосовує його всередині <body>.

І нарешті, якщо жоден із зазначених шрифтів не знайдений, застосовується перший, знайдений браузером на комп'ютері шрифт з сімейства sans-serif. Таким чином браузер зможе самостійно визначити відповідний шрифт з сімейства.

Примітка: при виборі тільки одного певного шрифту важливо розуміти те, що браузер відобразить його тільки в тому випадку, якщо даний шрифт встановлений на комп'ютері користувача. Якщо шрифт не буде знайдений, то текст буде відображений шрифтом "Times New Roman", який заданий за замовчуванням у всіх браузерах.

Стиль шрифту

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

• normal - стандартний текст, що має звичайне написання, тобто не курсивное і не похиле

• italic - курсивне зображення

• oblique - похиле накреслення

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

Розмір шрифту

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

Для зміни розміру шрифту використовується властивість font-size. Існує кілька способів вказати розмір шрифту, розглянемо найбільш поширені з них:

Пікселі

Значення в пікселях використовуються часто, оскільки такий підхід надає дуже точний контроль над розміром. Числове значення закінчує літерними символами px, які повинні слідувати відразу після числа (між числом і px не повинно бути пробілу).

body { font-size: 14px; }

Відсотки

За замовчуванням розмір шрифту в браузерах дорівнює 16px. Таким чином, значення 100% відповідає 16px, а 200% - 32px. Якщо ви визначите правило, що задає всьому тексту всередині елемента <body> значення 75% від розміру за замовчуванням (це буде відповідати 12px), а потім визначте ще одне правило, яке задає значення 75% для його дочірнього елемента, то рамер шрифту в цьому елементі дорівнюватиме 9px (тобто 75% від 12px).

body { font-size: 100%; }

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

body { font-size: 14px; } h2 { font-size: 1.2em; }

У прикладі ми задали елементу <body> розмір шрифту 14px, а для всіх елементів <h2> - 1.2em. Це означає, що розмір шрифту заголовків другого рівня буде масштабований з коефіцієнтом 1,2. У нашому випадку розмір усіх заголовків <h2> буде состовлять 1,2 розміру шрифту елемента <body>, що означає в 1,2 рази більше, ніж 14px, і приблизно дорівнює 17px. (Насправді розмір буде дорівнювати 16,8, але більшість браузерів округлить його до 17.)

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

Ключові слова

CSS пропонує сім ключових слів, які дозволяють призначити розмір шрифту щодо розміру за замовчуванням (16px): xx-small, x-small, small, medium, large, x-large і xx-large.

p { font-size: small; }

Середнє значення medium - розмір шрифта в браузерах. Останні значення зменшують або збільшують розмір шрифту з різними коеффеціентамі. Найменший розмір шрифту xx-small дорівнює приблизно 9 пикселям, кожний наступний розмір приблизно на 20% більше попереднього.

"Безпечні" (стандартні) Web-шрифти

В інтернеті історично склалося таке поняття як "безпечні" Web-шрифти. Безпечним шрифтом можна назвати такий шрифт, який підтримується операційною системою користувача з дуже високим ступенем імовірності. Оскільки про такий стан справ залишається тільки мріяти, то абсолютно безпечних шрифтів не існує!

Основою для визначення "безпечних" шрифтів послужили шрифти найбільш поширеною операційної системи - Windows, які крім того використовуються в інших ОС:

Шрифти із зарубками - serif

font-family	Приклад
Georgia, serif	Это заголовок Это абзац
"Palatino Linotype", "Book Antiqua", Palatino, serif	Это заголовок Это абзац
"Times New Roman", Times, serif	Это заголовок Это абзац

Зміна та видалення маркерів

Для зміни стандартного зовнішнього вигляду маркера в CSS використовується властивість list-style-type, як значення задається той вид маркера, на який ви хочете замінити стандартний.

CSS властивiсть: list-style-type:

decimal

decimal-leading-zero

lower-alpha

lower-roman

upper-alpha

upper-roman

CSS Код:

ol#myList {
list-style-type: decimal;
}

Для маркованих списків існує всього три види маркерів, які можна задати за допомогою значень circle, disk і squred:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> .class1 { list-style-type: circle; } .class2 { list-style-type: disc; } .class3 { list-style-type: square; } </style> </head> <body> <ul class="class1"> <li>Кофе</li><li>Чай</li> </ul> <ul class="class2"> <li>Кофе</li><li>Чай</li> </ul> <ul class="class3"> <li>Кофе</li><li>Чай</li> </ul> </body> </html>

За допомогою значення none можна видалити маркери у пунктів у списку, але відступ зліва при цьому все одно залишиться:

Заміна маркерів картинками

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> ul { list-style-image: url('sqpurple.gif'); } ol { list-style-image: url('donald.gif'); } </style> </head> <body> <ul> <li>Кофе</li><li>Чай</li> </ul> <ol> <li>Кофе</li><li>Чай</li> </ol> </body> </html>

Властивість list-style-position вказує, чи повинен маркер розташовуватися всередині або зовні пунктів списку. Дана властивість може приймати два значення:

• outside - маркер розташовується зліва від вмісту (є значенням за замовчуванням)

• inside - маркер розташовується усередині пункту списку разом з вмістом

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> li { border: 1px solid red; } .class1 { list-style-position: outside; } .class2 { list-style-position: inside; } .class3 { list-style-position: inside; padding-left: 0; } </style> </head> <body> <ul class="class1"> <li>Кофе</li><li>Чай</li> </ul> <ul class="class2"> <li>Кофе</li><li>Чай</li> </ul> <ul class="class3"> <li>Кофе</li><li>Чай</li> </ul> </body> </html>

Тема 3. Форматування елементів.

Управління кольором в CSS.

Колір в стилях можна задавати трьома способами: шістнадцятковими значеннями, за назвою і в форматі RGB.

12 3 Следующая ⇒

Читайте также:

Как правильно слушать собеседника

Типичные ошибки при выполнении бросков в баскетболе

Принятие христианства на Руси и его значение

Средства массовой информации США

Последнее изменение этой страницы: 2016-04-07; просмотров: 326; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.144.48.135 (0.346 с.)