Форматиране на текста на html страница (част 2). Как да зададете цвета на фона и текста на уеб страница

27.11.14 88,7К

В html размерът на шрифта играе важна роля. Тя ви позволява да привлечете вниманието на потребителя към важна информация, публикувана на страницата на уебсайта. Въпреки че е важен не само размерът на буквите, но и техният цвят, дебелина и дори семейство.

Етикети и атрибути при обхождане с html шрифтове

Хипертекстовият език има голям набор от инструменти за работа с шрифтове. В крайна сметка именно форматирането на текст е основната задача на html.

Причината за създаването на HTML езика беше проблемът с показването на правила за форматиране на текст в браузърите.


Помислете за таговете, които се използват за работа с шрифтове в html и техните атрибути. Основният е етикетът ... Използвайки стойностите на неговите атрибути, можете да зададете няколко характеристики на шрифта:
  • цвят - задава цвета на текста;
  • size - размер на шрифта в конвенционални единици.

Поддържат се положителни стойности на атрибути от 1 до 7.

  • face - използва се за задаване на семейството шрифтове на текста, който да се използва вътре в етикета ... Поддържат се няколко стойности наведнъж, разделени със запетаи.

Форматиран е само текстът между частите на сдвоения таг за шрифт.Останалата част от текста се показва със стандартния шрифт по подразбиране.


Също така в html има редица сдвоени тагове, които определят само едно правило за форматиране. Те включват:
  • - задава удебелен шрифт в html. етикет действието е подобно на предишното;
  • - размерът е по-голям от стандартния;
  • - по-малък размер на шрифта;
  • - курсив текст. Подобен етикет ;
  • - подчертан текст;
  • - зачеркнат;
  • - показване на текст само с малки букви;
  • - с главни букви.

Обикновен текст

Миниатюра

Миниатюра

Повече от обикновено

По-малко от обикновено

Курсив

Курсив

Подчертано

Зачеркнат

Възможности за атрибути на стил

В допълнение към описаните тагове има още няколко начина за промяна на шрифта в html. Един от тях е използването на атрибута generic style. Използвайки стойностите на неговите свойства, можете да зададете стила на показване на шрифта:

1) font-family - свойството задава семейството на шрифтовете. Възможно е изброяване на няколко стойности.
Промяната на шрифта в html на следващата стойност ще се случи, ако предишното семейство не е инсталирано на операционната система на потребителя.

Синтаксис за писане:

семейство шрифтове: име на шрифт [, име на шрифт [, ...]]

2) font-size - размерът се задава от 1 до 7. Това е един от основните начини, по които можете да увеличите шрифта в html.
Синтаксис за писане:

font-size: абсолютен размер | относителен размер | стойност | лихва | наследи

Размерът на шрифта също може да бъде зададен:

  • В пиксели;
  • В абсолютна стойност ( хх-малък, х-малък, малък, среден, голям);
  • В проценти;
  • В точки (pt).

Размер на шрифта: 7

Размер на шрифта: 24px

Размер на шрифта: x-голям

Размер на шрифта: 200%

Размер на шрифта: 24pt


3) font-style - задава стила на изписване на шрифта. Синтаксис:

стил на шрифта: нормален | курсив | наклонена | наследи

Стойности:

  • нормален - нормален правопис;
  • курсив - курсив;
  • наклонен - ​​надясно наклонен шрифт;
  • inherit - наследява правописа на родителския елемент.

Пример за това как да промените шрифта в html с помощта на това свойство:

font-style: наследи

стил на шрифта: курсив

стил на шрифта: нормален

стил на шрифта: наклонен


4) font-variant - преобразува всички главни букви в главни. Синтаксис:

вариант на шрифта: нормален | малки букви | наследи

Пример за това как да промените шрифта в html с това свойство:

вариант на шрифта: наследи

вариант на шрифта: нормален

вариант на шрифта: малки главни букви


5) font-weight - позволява ви да зададете дебелината на изписването на текста (наситеност). Синтаксис:

тегло на шрифта: удебелен | удебелен | по-светъл | нормален | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Стойности:

  • bold - задава html удебеления шрифт;
  • по-смели - по-дебели спрямо нормалните;
  • по-лек - по-малко наситен спрямо нормалното;
  • нормален - нормален правопис;
  • 100-900 - задава дебелината на шрифта в числов еквивалент.

тегло на шрифта: получер

font-weight: по-удебелен

шрифт-тегло: по-лек

font-weight: нормално

тегло на шрифта: 900

тегло на шрифта: 100

Свойството на шрифта и цвета на html шрифта

Шрифтът е друго свойство на контейнера. Вътрешно той е комбинирал стойностите на няколко свойства, предназначени да променят шрифтове. Синтаксисът на шрифта е:

шрифт: font-size font-family | наследи

Също така, стойността може да бъде зададена на шрифтовете, използвани от системата в надписите на различни контроли:

  • надпис - за бутони;
  • икона - за икони;
  • меню - меню;
  • message-box - за диалогови прозорци;
  • малък надпис - за малки контроли
  • status-bar - шрифт на лентата на състоянието.

шрифт: икона

шрифт: надпис

шрифт: меню

шрифт: кутия за съобщения

малки надписи

шрифт: лента на състоянието

шрифт: курсив 50px удебелен "Times New Roman", Times, сериф

Има различни проблеми с дизайна, с които трябва да се справите, когато създавате уеб страница. Един от най-често срещаните въпроси е как да промените цвета на текста в HTML. Решаването му е доста лесно и има два различни начина.

Задаване на атрибут за стил на вграден текст

За да разберете как да промените цвета на текста в HTML, просто погледнете списъка с атрибути на текстовото поле. Сред тях има редица стойности, които определят стила на текста, затворен в тези тагове, които са посочени в ключовата дума style.

За да промените цвета на текста, достатъчно е да въведете думата style = "" в избраната област на текстовото поле вътре в отварящия маркер. Вътре в този атрибут можете да зададете различни стойности на параметри - стойността на атрибута на цвета е отговорна за промяната на цветния нюанс на текста. Като посочите този параметър, след двоеточие, трябва да посочите цвета, в който ще бъдат боядисани всички знаци в това поле. В този случай, когато дефинирате нюанс, можете да посочите както изрична стойност на цвета, например червено или жълто, така и неговата шестнадесетична стойност или rgb.

Независимо от избрания метод за определяне на цвета, резултатът ще бъде същият в случай на същия избор на нюанс. По този начин всички следните три примера ще направят едни и същи промени в текста - ще го оцветят в жълто.

1.

текст

2.

текст

3.

текст

Променете цвета с помощта на CSS

Използването на стилова таблица също ви позволява да решите как да промените цвета на текста в HTML. CSS се поддържа напълно от всички съвременни версии на HTML и също така ви позволява да променяте стила на множество елементи на страницата наведнъж.

За да разберете как да промените цвета на текста в HTML с помощта на CSS, не е необходимо да разбирате официалния език за дефиниране на външния вид. За да дефинирате атрибутите на даден елемент, трябва да създадете CSS описание, което е написано вътре в тага , и се дефинира от тага