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

ТОП 10 на сайте

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

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

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

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

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

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

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

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

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

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

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

ЗНАЕТЕ ЛИ ВЫ?

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

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

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

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

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

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

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

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

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

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

⇐ ПредыдущаяСтр 2 из 3Следующая ⇒

Для завдання кольор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%.

Фіксація фонового зображення

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

Так як за замовчуванням задній фон прокручується разом з вмістом, то як приклад ми зафіксуємо наше фонове зображення на одному місці за допомогою значення fixed:

body { background-image: url('image.png'); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; }

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

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

Можна отримати той же самий результат, що і в попередньому прикладі, але з меншою кількістю рядків коду. Для цього використовується властивість 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>

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

⇐ Предыдущая 123 Следующая ⇒

Статус республик в составе РФ

Понятие финансов, их функции и особенности

Сущность демографической политии

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

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