Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

Підручник CSS 3. Стаття "Форматування тексту в CSS"

  1. вирівнювання тексту
  2. Відступ першого рядка
  3. Установка міжрядкового інтервалу
  4. Інтервал між словами і символами
  5. Декорування тексту
  6. Верхній і нижній регістр
  7. Капітель в CSS
  8. Питання і завдання по темі

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

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

вирівнювання тексту

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

Щоб встановити вирівнювання для тексту, використовуйте наступні ключові слова з властивістю text-align :

Значення Опис left вирівнює текст вліво. Це значення за замовчуванням (якщо напрямок тексту зліва направо). right Вирівнює текст вправо. Це значення за замовчуванням (якщо напрямок тексту справа наліво). center Вирівнює текст по центру. justify Розтягує лінії так, що кожна лінія має однакову ширину (розтягує текст по ширині).

Давайте розглянемо приклад роботи з вирівнюванням тексту:

<! DOCTYPE html> <html> <head> <title> Приклад використання властивості text-align </ title> <style> div {background-color: rgba (0, 255, 0, .1); / * Задаємо колір заднього фону для всіх елементів <div> * /} .test {text-align: left; / * Задаємо вирівнювання тексту вліво * /} .test2 {text-align: center; / * Задаємо вирівнювання тексту по центру * /} .test3 {text-align: right; / * Задаємо вирівнювання тексту вправо * /} .test4 {text-align: justify; / * Задаємо вирівнювання тексту по ширині * /} </ style> </ head> <body> <div class = "test"> З'їж ж ще цих м'яких французьких булок та випий чаю. </ Div> <div class = "test2"> З'їж ж ще цих м'яких французьких булок та випий чаю. </ Div> <div class = "test3"> З'їж ж ще цих м'яких французьких булок та випий чаю. </ Div> <div class = "test4"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ Div> </ body> </ html>

В даному прикладі ми створили 4 (чотири) класу, які визначають різні варіанти вирівнювання тексту. Для всіх елементів <Div> ми встановили колір заднього фону rgba (0, 255, 0, .1).

Результат нашого прикладу:

Результат нашого прикладу:

Ріс.60 Приклад використання властивості text-align (вирівнювання тексту).

Відступ першого рядка

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

Якщо у вас є необхідність додати вашому документу вид подібний друкованому виданню, то скористайтеся таким CSS властивість, як text-indent .

Ви можете застосувати ті відносні одиниці виміру, які ви використовуєте в своєму документі, будь то пікселі, або значення, які залежать від базового розміру шрифту (наприклад, такі як em).

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

Давайте розглянемо приклад використання цієї властивості:

<! DOCTYPE html> <html> <head> <title> Приклад використання властивості text-indent </ title> <style> .test {text-indent: 0px; / * Задаємо відступ для першого рядка текстового блоку 0px (це значення за замовчуванням) * /} .test2 {text-indent: 40px; / * Задаємо відступ для першого рядка текстового блоку 40px * /} .test3 {text-indent: -20px; / * Задаємо негативний відступ для першого рядка текстового блоку * /} .test4 {text-indent: 50%; / * Задаємо відступ для першого рядка текстового блоку 50% * /} </ style> </ head> <body> <p class = "test"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> <p class = "test2"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> <p class = "test3"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> <p class = "test4"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> </ body> </ html>

В даному прикладі ми створили 4 (чотири) стилю і по черзі застосували їх до чотирьох абзацах. Для першого абзацу встановили значення відступу за замовчуванням (0), для другого задали відступ 40 пікселів, для третього вказали негативний відступ (-20px), в результаті чого, абзац зрушився за вікно браузера і для четвертого абзацу встановили відступ рівний 50%.

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

Результат нашого прикладу:

Результат нашого прикладу:

Мал. 61 Приклад використання властивості text-indent (новий рядок).

Установка міжрядкового інтервалу

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

В CSS за міжрядковий інтервал (інтерліньяж) відповідає властивість line-height (Висота рядка). Чим вище значення цього властивості, тим більше проміжок між рядками.

Звертаю Вашу увагу на те, що при встановленні значення висоти рядка з використанням одиниць вимірювання пікселі, розмір міжрядкового інтервалу, безпосередньо залежатиме від розміру шрифту, тобто він буде автоматично корегуватися пропорційно зміні властивості font-size (Розмір шрифту), розглянутого в попередній статті.

Як правило, у всіх сучасних браузерах висота рядка за замовчуванням становить 120%.

Розрахунок міжрядкового інтервалу відбувається наступним чином:

висота рядка (line-height) мінус висота шрифту (font-size)

Наприклад, розмір шрифту становить 20 пікселів, а висота рядка 150% (30 пікселів). Таким чином, виходить:

висота рядка (150% або 30px) мінус висота шрифту (20px) = 10px

Допускається задавати розмір висоти рядка з використанням числового значення. Оголошення виглядає наступним чином:

Cелектор

{line-height: 1.5; }

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

Числове значення * розмір шрифту

Наприклад, шрифт для абзацу встановлений 2em, а висота рядка задана як 1.5:

p

{font-size: 2em; line-height: 1.5; }

Розрахункове значення міжрядкового інтервалу в нашому випадку складе 3em:

Числове значення (1.5) * розмір шрифту (2em) = 3em

У більшості випадків множник використовувати дуже зручно, так як елементи успадковують значення міжрядкового інтервалу батьківського елемента. Давайте розглянемо приклад використання властивості line-height :

<! DOCTYPE html> <html> <head> <title> Приклад використання властивості line-height </ title> <style> .test {line-height: 10px; / * Задаємо висоту рядка в пікселях. * /} .Test2 {line-height: normal; / * Задаємо висоту рядка (значення за замовчуванням). * /} .Test3 {line-height: 150%; / * Задаємо висоту рядка в процентах від поточного розміру шрифту. * /} .Test4 {line-height: 2; / * Задаємо висоту рядка числом, яке буде множитися з поточним розміром шрифту. * /} </ Style> </ head> <body> <p class = "test"> Параграф в якому line-height: 10px <br> Параграф в якому line-height: 10px </ p> <p class = " test2 "> Параграф в якому line-height: normal <br> Параграф в якому line-height: normal </ p> <p class =" test3 "> Параграф в якому line-height: 150% <br> Параграф в якому line -height: 150% </ p> <p class = "test4"> Параграф в якому line-height: 2 <br> Параграф в якому line-height: 2 </ p> </ body> </ html>

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

Результат нашого прикладу:

Результат нашого прикладу:

Мал. 62 Приклад використання властивості line-height (установка міжрядкового інтервалу).

Інтервал між словами і символами

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

Щоб встановити певний інтервал між символами необхідно використовувати CSS властивість letter-spacing . При роботі з властивістю використовуйте відносні одиниці виміру CSS (em, rem, px і так далі). Допускається використання як позитивних, так і негативних значень. Позитивні значення відповідно збільшують інтервал між символами, а негативні зменшують, аж до нашарування букв і символів один на одного.

Давайте розглянемо приклад використання властивості letter-spacing :

<! DOCTYPE html> <html> <head> <title> Приклад використання властивості letter-spacing </ title> <style> .test {letter-spacing: -1px; / * Задаємо негативний інтервал між символами в тексті. * /} .Test2 {letter-spacing: normal; / * Задаємо інтервал між символами в тексті (значення за замовчуванням). * /} .Test3 {letter-spacing: 2px; / * Задаємо інтервал між символами в тексті (2px). * /} .Test4 {letter-spacing: 1em; / * Задаємо інтервал між символами в тексті (1em). * /} </ Style> </ head> <body> <div class = "test"> letter-spacing: -1px </ div> <div class = "test2"> letter-spacing: normal </ div> < div class = "test3"> letter-spacing: 2px </ div> <div class = "test4"> letter-spacing: 1em </ div> </ body> </ html>

В даному прикладі ми розглянули способи вказівки інтервалу між символами в тексті в пікселях (як позитивне, так і негативне значення) і одиницях виміру em.

Результат нашого прикладу:

Рис.63 Приклад використання властивості letter-spacing (інтервал між символами в тексті).

Задати інтервал між окремими словами дозволяє схоже по найменуванню властивість CSS - word-spacing . За аналогією з властивістю letter-spacing використовуйте відносні одиниці виміру CSS (em, rem, px і так далі). Допускається використання як позитивних, так і негативних значень. Позитивні значення відповідно збільшують інтервал між словами, а негативні зменшують, аж до нашарування слів друг на друга.

Давайте розглянемо приклад використання властивості word-spacing :

<! DOCTYPE html> <html> <head> <title> Приклад використання властивості word-spacing </ title> <style> .test {word-spacing: normal; / * Визначаємо відстань між словами (значення за замовчуванням) * /} .test2 {word-spacing: 1em; / * Визначаємо відстань між словами (1em) * /} .test3 {word-spacing: -5px; / * Визначаємо відстань між словами (від'ємне значення) * /} </ style> </ head> <body> <p class = "test"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> <p class = "test2"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> <p class = "test3"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> </ body> </ html> У даному прикладі ми розглянули способи вказівки інтервалу між словами в тексті в пікселях (від'ємне значення) і одиницях виміру em.

Результат нашого прикладу:

Результат нашого прикладу:

Мал. 64 Приклад використання властивості word-spacing (інтервал між словами в тексті).

Декорування тексту

CSS властивість text-decoration дає нам можливість додати до тексту такі види декорування як:

  • підкреслення
  • перекреслення
  • лінія над текстом

Однак, одне з найпоширеніших застосувань цієї властивості це скасування декорування, при цьому необхідно використовувати з властивістю text-decoration ключове слово none:

a

{/ * селектором типу вибираємо все гіперпосилання * / text-decoration: none; / * Прибираємо декорування тексту * /}

В даному прикладі ми прибрали декорування (підкреслення) у всіх гіперпосилань. Повний перелік ключових слів властивості text-decoration вказано в даній таблиці:

Значення Опис none Визначає нормальний текст (без декорування). Це значення за замовчуванням underline Визначає лінію під текстом. overline Визначає лінію над текстом. line-through Визначає лінію, що проходить через текст (перекреслення).

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

Допускається використовувати кілька значень в одному оголошенні:

text-decoration: underline line-through; / * Визначає лінію під текстом і лінію, що проходить через текст * /

Давайте розглянемо приклад використання властивості text-decoration у тексті:

<! DOCTYPE html> <html> <head> <title> Приклад використання властивості text-decoration </ title> <style> .test {text-decoration: underline; / * Додаємо декорування тексту (лінія знизу) * / color: red; / * Встановлюємо колір шрифту * /} .test2 {text-decoration: overline; / * Додаємо декорування тексту (лінія зверху) * / color: green; / * Встановлюємо колір шрифту * /} .test3 {text-decoration: line-through; / * Додаємо декорування тексту (перекреслення) * / color: blue; / * Встановлюємо колір шрифту * /} .test4 {text-decoration: underline overline; / * Додаємо подвійне декорування тексту (лінія зверху і знизу) * / color: orange; / * Встановлюємо колір шрифту * /} </ style> </ head> <body> <p class = "test"> text-decoration: underline; </ P> <p class = "test2"> text-decoration: overline; </ P> <p class = "test3"> text-decoration: line-through; </ P> <p class = "test4"> text-decoration: underline overline; </ P> </ body> </ html>

В даному прикладі ми створили чотири різних стилю і застосували їх по черзі до кожного абзацу. У першому абзаці додали декорування тексту - лінія знизу (значення underline), у другому декорування тексту - лінія зверху (значення overline), в третьому декорування тексту - перекреслення (line-through), а в четвертому подвійне декорування тексту - лінія зверху і знизу ( значення underline overline).

Результат нашого прикладу:

Мал. 65 Приклад використання властивості text-decoration (декорування тексту в CSS).

Верхній і нижній регістр

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

Значення Опис none Текст відображається як є (реєстр букв не змінюється). Це значення за замовчуванням. capitalize Перетворює перші символи кожного слова у верхній регістр. uppercase Перетворює всі символи у верхній регістр. lowercase Перетворює всі символи в нижній регістр.

Давайте розглянемо приклад використання властивості text-transform у тексті:

<! DOCTYPE html> <html> <head> <title> Приклад використання властивості text-transform </ title> <style> .test {text-transform: capitalize; / * Перетворимо перші символи кожного слова у верхній регістр * /} .test2 {text-transform: uppercase; / * Перетворимо всі символи у верхній регістр * /} .test3 {text-transform: lowercase; / * Перетворимо всі символи в нижній регістр * /} </ style> </ head> <body> <p class = "test"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> <p class = "test2"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> <p class = "test3"> З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. З'їж ж ще цих м'яких французьких булок та випий чаю. </ P> </ body> </ html>

В даному прикладі ми створили три різних стилі і застосували їх по черзі до кожного абзацу. У першому абзаці перші символи кожного слова були перетворені в верхній регістр (значення capitalize), у другому все символи в верхній регістр (значення uppercase), а в третьому в нижній регістр (значення lowercase).

У першому абзаці перші символи кожного слова були перетворені в верхній регістр (значення capitalize), у другому все символи в верхній регістр (значення uppercase), а в третьому в нижній регістр (значення lowercase)

Мал. 66 Приклад використання властивості text-transform (зміни регістру тексту).

Капітель в CSS

Малі заголовні, або капітель (англ. Small caps) - накреслення шрифту, в якому малі знаки виглядають як зменшені великі літери. Для створення такого зображення використовується CSS властивість font-variant з наступним синтаксисом:

Cелектор

{font-variant: small-caps; / * Задаємо капітель шрифту * /}

Розглянемо приклад використання:

<! DOCTYPE html> <html> <head> <title> Приклад використання властивості font-variant </ title> <style> .test {font-variant: small-caps; / * Задаємо капітель шрифту * /} </ style> </ head> <body> <p> Параграф відображається звичайним шрифтом. </ P> <p class = "test"> Малі літери встановлюються як прописні зменшеного розміру. </ P> </ body> </ html>

В даному прикладі перший параграф залишений без змін, а до другого застосовано властивість font-variant зі значенням small-caps, завдяки якому текст буде виведений в капітелі (малі літери встановлюються як прописні зменшеного розміру).

Мал. 67 Приклад використання властивості font-variant (капітель шрифту).

Питання і завдання по темі

Перед тим як перейти до вивчення наступної теми пройдіть практичне завдання:

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


Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    Подготовка к ЕГЭ по математике
    Статьи Опубликовано: 05.10.2017 Подготовка к ЕГЭ по МАТЕМАТИКЕ. 1 часть. Эффективный курс подготовки. Вы находитесь на сайте www.ege-ok.ru - Подготовка к ЕГЭ по математике. Меня зовут Инна Владимировна

    Куда поступить с обществознанием, русским и математикой
    Статьи Опубликовано: 06.10.2017 Сдача ЕГЭ. Куда поступать? Обществознание считается одним из самых популярных предметов, которые выпускники сдают на ЕГЭ. Ввиду высокого рейтинга дисциплины Рособрнадзор

    Сайт Майер Елены - ЕГЭ по математике
    Планируется проведение двух отдельных экзаменов – базового и профильного. Кому сдавать базовый ЕГЭ по математике? Базовый ЕГЭ организуется для выпускников, изучающих математику для общего развития

    ГДЗ решебник по математике 4 класс
    Извините, тут пока ничего нет ((( Решебник по математике 4 класс (Истомина Н.Б.) – не просто возможность быстро выполнить домашнее задание для учащегося, но и способ разобраться в труднорешаемых задачах.

    ГДЗ по математике 1 класс Самсонова самостоятельные работы
    Решебник по математике за 1 класс автора Самсоновой Л.Ю. 2012 года издания. Данное пособие предлагает готовые решения на разнообразные упражнения, направленные на активизацию всего учебного процесса. Здесь

    Для этой работы нужна математика
    Слотов: 956 Рулеток: 7 Лицензия: Pragmatic Play, Microgaming, ELK, Yggdrasil, Habanero, Amatic, Isoftbet, Netent, Rival, Igrosoft, Quickspin. Игры: Автоматы, Покер, Рулетки. Всего 963 Отдача: 98% Бонус

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

    Функция экспонента в Excel
    Одной из самых известных показательных функций в математике является экспонента. Она представляет собой число Эйлера, возведенное в указанную степень. В Экселе существует отдельный оператор, позволяющий

    ЕГЭ по математике 2018
    ЕГЭ по математике, наравне с русским языком , – обязательный экзамен для сдачи выпускниками 11-х классов. По статистике он самый сложный. Мы предлагаем ознакомиться с общей информацией об экзамене и

    Секреты эффективной и быстрой подготовки ко второй части ОГЭ по математике.
    Уважаемые девятиклассники, настоящие или будущие! Часто от вас приходится слышать следующие вопросы. Легко ли подготовиться к заданиям второй части ОГЭ по математике? Сколько для этого понадобится


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: