Как да промените типа, размера и цвета на шрифта на уеб страница

Съдържание:

Как да промените типа, размера и цвета на шрифта на уеб страница
Как да промените типа, размера и цвета на шрифта на уеб страница

Видео: 2 Основы HTML. Основные теги и атрибуты. Первая страница на HTML. Хостинг. 2024, Може

Видео: 2 Основы HTML. Основные теги и атрибуты. Первая страница на HTML. Хостинг. 2024, Може
Anonim

Тази страница съдържа инструкции как да промените шрифт и цвета му на уеб страница. С въвеждането на HTML5, правилният начин за конфигуриране на шрифтове на уеб страници е използването на Cascading Style Sheets. Старият метод за използване на атрибут в стил инлайн или таг на шрифта е оттеглен и вече не трябва да се използва.

Забележка

Въпреки че остарелите методи все още могат да се представят правилно в съвременните интернет браузъри, те вече не са гарантирани за това. За да създадете уеб страници, които се показват правилно за максималния брой потребители, използвайте CSS методите, описани на тази страница.

Забележка

Ако търсите помощ за персонализиране на външния вид на шрифта в документ на Microsoft Word, вижте как да промените цвета, размера или типа на шрифта в Word.

Използване на CSS за едно приложение

Ако планирате да промените лицето на шрифта и цвета му само веднъж на уеб страница, конфигурирайте неговите атрибути в тага на елемента. Използвайки атрибута на стил, можете да определите лицето и цвета на шрифта със семейството на шрифтовете, цвета и размера на шрифта с размер на шрифта, както е показано в примера по-долу.

Примерен код

Този текст има шрифта Courier, е Blue и 20px.

резултат

Този текст има шрифт Courier, е син и с размер 20px.

Използване на CSS за една или повече страници

Персонализиран шрифт за една страница

В частта на главата на вашата уеб страница можете да вмъкнете код между thetabs, за да промените външния вид на вашия текст в различни елементи. Следващото синьо поле съдържа примерен код, който веднъж се обади, ще промени лицето на вашия шрифт на Courier и ще го оцвети в червено. Както можете да видите, ние определихме името на класа като "обичайно".

.custom {font-family: Courier; цвят: червен; размер на шрифта: 20px; }

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

пример

Цялото това изречение е червено и куриер

Само думата тест е червено и куриер.

резултат

Цялото това изречение е червено и куриер.

Само думата тест е червено и куриер.

Персонализиран шрифт за много страници

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

С помощта на всеки основен текстов редактор, записването на следния текст като.css файл ще го подготви за импортиране.

@charset "utf-8";

.courier {font-family: Courier; цвят: # 005CB9; }

След като предходният текст се постави във.css файл (нарекохме нашия basic.css), можете да го свържете от всяка друга страница, използвайки ред, подобен на следния пример.

Бакшиш

Потребителите могат да променят атрибутите на елементи на дадена страница, като променят кода в импортирания.css файл.

Разтвор на маркер на шрифта

Въпреки че е остарял, HTMLтагът все още може да се използва и може да се наложи да се използва с някои онлайн услуги. Когато използвате маркера FONT, трябва да включите атрибута на лицето, който описва шрифта, който ще се използва. В примера по-долу ние използваме шрифта Courier и шестнадесетичния цветен код # 005CB9 , който е тъмносин.

Примерен код

Пример за специален шрифт.