Как сделать стиль текста в css

Текст CSS/HTML

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

Текст по центру CSS

Выровнять текст по центру можно двумя способами. Как в первом примере, можно добавить к тегу p класс, и применить к нему свойство text-align со значением center, а затем добавить этот класс там, где это необходимо. Если текст находится в блоке, можно добавить к нему свойства Flexbox CSS, как показано во втором примере.

Пример

Текст поверх картинки CSS

Для того, чтобы сделать текст поверх картинки можно поместить его в div, и добавить свойство background-image. Чтобы текст располагался по центру можно использовать text-align со значением center и применить его к тегу p, либо использовать свойства Flexbox CSS для div, как показано на примере.

Пример

Как изменить размер шрифта CSS

Чтобы изменить размер шрифта можно применить свойство font-size, значение которого определяет размер текста. В качестве единиц можно применять rem, так как px задают размер текста, не зависящий ни от чего, размеры в em – относительные, они определяются по текущему контексту. Единица rem задаёт размер относительно размера шрифта элемента всей веб-страницы.

Пример

Lorem Ipsum

Как сделать наклон (курсив) у текста CSS

Курсивный текст похож на рукописный, и часто требуется для того, чтобы выделить фрагмент текста. Для того, чтобы сделать наклон у текста можно применить свойство font-style со значением italic.

Пример

Как сделать подчеркнутый текст CSS

Чтобы выделить фрагмент текста, подчеркнув его, можно применить свойство text-decoration со значением underline. Для этого, можно добавить тег span, задать ему класс с необходимым свойством, как на примере.

Пример

Как сделать волнистое подчеркивание текста CSS

Чтобы выделить фрагмент текста, подчеркнув его волнистой линией, например, для указания орфографических или других ошибок, можно применить свойство text-decoration со значением underline. Стиль и цвет линии задаются через свойства text-decoration-style со значением wavy и text-decoration-color. Можно добавить тег span, задать ему класс с необходимыми свойствами, как на примере.

CSS урок 6. Основные стили CSS: оформление текста

пример оформления текста css

</style></head> <body> <h1>Алгритм</h1> <p "алгоритм" произошло от латинской формы имени величайшего среднеазиатского математика Мухаммеда ибн Муса ал-Хорезми (Alhorithmi), жившего в 783—850 гг. В своей книге "Об индийском счете" он изложил правила записи натуральных чисел с помощью арабских цифр и правила действий над ними "столбиком", знакомые теперь каждому школьнику. В XII веке эта книга была переведена на латынь и получила широкое распространение в Европе. </p> <p ибн Муса ал-Хорезми, 783—850 гг</p>

Результат:

пример выравнивания текста в css

text-decoration (оформление)

Возможные значения:

  • overline (подчеркивание сверху)
  • line-through (перечеркивание)
  • underline (подчеркивание)
  • blink (мигание текста)
  • none (без оформления)

Пример:

Результат:

text-transform (преобразование текста)

Возможные значения:

  • uppercase (верхний регистр)
  • lowercase (нижний регистр)
  • capitalize (каждое слово с заглавной буквы)
  • none (без преобразования)

Пример:

</style></head> <body> <p параграф для примера</p> <p параграф для примера</p> <p параграф для примера</p>

Результат:

Это параграф для примера

Это параграф для примера

Это параграф для примера

text-indent (красная строка)

Возможные значения:

  • 20px (значение в пикселях)

Пример:

</style></head> <body> <p>Оформление текста в значительной степени влияет на то, как будет воспринята передаваемая им информация. Зачастую плохо, неграмотно оформленный текст вообще не читают, так как он вызывает дискомфорт у читателя на подсознательном уровне.</p>

Результат:

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

direction (направление текста)

Возможные значения:

  • ltr (слева направо)
  • rtl (справа налево)

Пример:

Результат:

line-height (межстрочный интервал)

Возможные значения:

Межстрочное расстояние вычисляется автоматически (значение по умолчанию)

Множитель, на который будет умножен размер текущего шрифта для вычисления межстрочного расстояния

Фиксированное межстрочное расстояние в px (пикселях), pt (пунктах), cm (сантиметрах) и т.д.

Пример:

</style></head> <body> <p параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера. </p> <p параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера. </p>

Результат:

Это параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера. Это параграф1 для примера.

Это параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера. Это параграф2 для примера.

letter-spacing (межсимвольное расстояние)

Возможные значения:

  • значение

Пример:

Результат:

Первый заголовок
Второй заголовок

word-spacing (расстояние между словами)

Возможные значения:

  • значение

Пример:

</style></head> <body> <p>Пример параграфа для демонстрации стиля.</p> .

Результат:

Пример параграфа для демонстрации стиля.

vertical-align (вертикальное выравнивание)

Возможные значения:

Значение Описание
число Поднимает или опускает элемент относительно базовой строки. Положительные числа поднимают элемент, отрицательные — опускают (можно использовать пиксели, сантиметры и т.д.)
% Поднимает или опускает элемент относительно базовой строки на величину % от высоты строки ("line-height"). Положительные % поднимает элемент, отрицательный — опускает.
baseline Выравнивание по базовой линии родительского элемента. Значение по умолчанию
sub Выравнивание, как подстрочный индекс (H2O)
super Выравнивание как надстрочный индекс (x2)
top Верхний край элемента выравнивается по верхнему краю самого высокого элемента строки
text-top Верх элемента выравнивается по верху самого высокого текстового элемента на строке
middle Элемент выравниваетя по середине родительского элемента
bottom Низ элемента выравнивается по низу самого низкого элемента строки
text-bottom Низ элемента выравнивается по низу самого низкого элемента строки
inherit Значение наследуется от родительского элемента

Пример:

</style></head> <body> <h5>Стих 1</h5> <p такой: зачем все это мне? Но, не найдя ответа на подходе, Я понял, что пришедшее извне Стремительно вовне же и уходит. Другой вопрос — как быть? Но тут Ответ просился сам: бездействуй! (Угли недолго проживут В костре, где все без происшествий.) </p> <p >

Результат:

Стих 1

Вопрос такой: зачем все это мне? Но, не найдя ответа на подходе, Я понял, что пришедшее извне Стремительно вовне же и уходит. Другой вопрос — как быть? Но тут Ответ просился сам: бездействуй! (Угли недолго проживут В костре, где все без происшествий.)

Шрифты для сайта в CSS

Вас интересуют web шрифты? Вы в нужном месте! Вы узнаете, какие шрифты применяются в интернете, и как они оформляются свойствами CSS, а так же, что такое кроссбраузерность и сервисы шрифтов.

В интернете огромное количество шрифтов, объединённых в несколько семейств. Чтобы рассмотреть их все, скорее всего, потребуется ещё один такой сайт, как мой.

Наверное поэтому, обычно мы видим на веб страницах лишь несколько образцов шрифта и вот почему.

Дело в том, что есть такое явление, как кроссбраузерность, то есть возможность какого либо элемента, одинаково отображаться во всех имеющихся в интернете браузерах.

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

Чтобы избежать явных различий при отображении шрифта, вместе с названием, обычно указывается семейство, в которое он входит.

И если какой либо браузер или операционная система его не поймут, то в 99% случаев, они покажут шрифт из того же семейства, что не особо испортит дизайн страницы.

Конечно, такое положение со шрифтами нельзя назвать нормальным, и оно не осталось без внимания умных ребят из команды Google.

Ими был создан сервис, или библиотека, &#171;Google Fonts&#187;, который изменил ситуацию в лучшую сторону, но о нём в конце статьи.

Там же покажу ещё несколько аналогичных сервисов, с которых можно будет так-же скачать шрифты и установить их на свой сайт.

А пока я представлю список тех шрифтов, которые входят в наиболее распространённые ОС, а значит в большинстве случаев отобразятся так как положено.

1. Семейство sans-serif &#8212; шрифты без засечек, с прямыми чётко прописанными контурами.

а) Arial Шрифты для сайта
б) Arial Black Шрифты для сайта
в) Tahoma Шрифты для сайта
г) Verdana Шрифты для сайта
д) Lucida Sans Unicode Шрифты для сайта
е) Trebuchet MS Шрифты для сайта
ж) MS Sans Serif Шрифты для сайта
з) Impact Шрифты для сайта
е) Century Gothic Шрифты для сайта

2. Семейство serif &#8212; шрифты с засечками.

а) Times New Roman Шрифты для сайта
б) Georgia Шрифты для сайта
в) Palatino Linotype Шрифты для сайта
г) MS Serif Шрифты для сайта
д) Sylfaen Шрифты для сайта
е) Garamond Шрифты для сайта
ж) Century Шрифты для сайта

3. Семейство monospace &#8212; моноширинные шрифты.

а) Courier New Шрифты для сайта
б) Lucida Console Шрифты для сайта
в) Consolas Шрифты для сайта
г) Courier New Шрифты для сайта

4. Семейство cursive .

а) Сomic Sans MS Шрифты для сайта
б) Monotype Corsiva Шрифты для сайта
в) Mistral Шрифты для сайта

Полный список свойств и значений css для шрифтов и текста, можно посмотреть в шпаргалках, а здесь рассмотрим основные.

Сначала посмотрим, как задаются шрифты в таблицах стилей.

Выбираем элемент контента, для которого задаётся шрифт, это может быть тег <body>, если мы захотим задать шрифт для всей страницы, могут быть теги <h>, или <p>, если шрифты будут задаваться для заголовков или абзацев.

Задаются шрифты при помощи свойства CSS font-family , а в значении указывается название шрифта.

Задать шрифт и его оформление можно как в файле style.css, так и непосредственно в теге элемента.

В файле style.css задаётся общий шрифт для всех страниц сайта, а в теге, для выделения небольших участков контента.

Как я уже говорил, после названия шрифта, через пробел, указывается семейство шрифта.

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

И ещё одно правило. Если название шрифта состоит из нескольких слов, то при написании в стиле, его нужно заключать в кавычки, если слово одно – без кавычек.

Попробуйте разные шрифты, и в будущем будете знать, какой из них использовать для своего сайта.

Размер и цвет шрифта

Рассмотрим, как в CSS задаётся размер и цвет шрифта. Размер шрифта задаётся в пикселях (px), реже в процентах (%), и совсем редко в единицах(em) и пунктах (pt).

Базовый размер шрифта составляет: 16px, 100%, 1em, 12pt. Значит, если нам потребуется увеличить, или уменьшить шрифт, мы будем двигаться от этих данных в сторону увеличения, или уменьшения.

Свойство для задания размера шрифта называется font-size , и давайте установим его для всех абзацев, допустим, в 18px.

Так же можно задать это свойство заголовку h1 , в том случае, если размер заголовка нужно ещё увеличить

Цвет шрифта задаётся свойством color

Можно так же задать размер и цвет какому либо слову или предложению расположенному внутри абзаца, используя тег <span> и атрибут style

Тег <span> вводит в html код встроенные стили. Чуть ниже рассмотрим, как то же самое делается при помощи классов.

Теперь посмотрим, как отобразит этот код браузер.

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

Главное их знать, чтоб в дальнейшем, если придётся работать с каким либо кодом, иметь представление, что за значение указано в свойстве font-size .

Жирный и курсивный шрифт

Толщина шрифта задаётся свойством font-weight , которое принимает следующие значения:

1. normal &#8212; нормальный;
2. bold &#8212; полужирный;
3. bolder &#8212; жирнее родителя;
4. lighter &#8212; тоньше родителя;
5. от 100 до 900 &#8212; цифровое значение, не обладает кроссбраузерностью;

Курсив задаётся свойством font-style , принимающим значение – italic .

Чтобы иметь возможность выделять жирным или курсивом различные участки текста, нужно создать селекторы классов c этими свойствами, и при помощи тега <span> вставлять их в нужные места.

Результат применения свойств CSS - font-weight: bold; и font-style: italic;

Растянутый и сжатый шрифт

У шрифта можно изменить расстояние между символами и словами.

И хотя эти свойства относится уже к тексту, а не к шрифту, я хочу всё-же их здесь показать.

Для изменения расстояния между символами применяется свойство css letter-spacing

Для изменения расстояния между словами применяется свойство word-spacing

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

Шрифты можно сжать и растянуть не только по горизонтали, но и по вертикали.

Дело в том, что по умолчанию всем шрифтам задано расстояние между строк, и им можно манипулировать.

Для этого в CSS имеется свойство line-height . Увеличивая или уменьшая значение этого свойства, получаем требуемый результат.

Расстояние между строк
Расстояние между строк
Расстояние между строк

Все свойства CSS для шрифтов и текста можно найти в Шпаргалках CSS, все свойства

А теперь, как и было обещано, познакомимся, и научимся пользоваться сервисом Google Fonts

Представляю скриншот Главной страницы сервиса.

Правда интерфейсы популярных сервисов постоянно обновляются, но только в сторону улучшения и упрощения.

Сервис Google Fonts

Что-бы вам было проще освоиться, я покажу пункты интерфейса с описанием функций, которые в них заключены.

Сервис Google Fonts

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

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

Для получения кода надо щёлкнуть по красному кружочку с белым крестиком, находящемуся справа, в блоке каждого шрифта.

Внизу появится чёрная полоса Family Selected. Щёлкаем по ней &#8212; открывается окно с кодом.

Сервис Google Fonts

По умолчанию открывается вкладка STANDART в которой дан код для внедрения через файл head вашего сайта. Например:

Копируете его и вставляете в файл head, туда, где у вас прописаны все теги <linc>

Если с этой вкладки сервиса перейти на вкладку @IMPORT, то вы получите код для файла style.css вашего сайта. Например:

Этот код вставляется в самое начало файла style.css, перед самым первым селектором.

Только @import работает дольше чем link, что увеличивает время загрузки страницы.

Выбирайте предпочтительный вариант, хотя какого либо предпочтения я не заметил. Оба варианта отлично работают.

Теперь вам остаётся только оформить нужный элемент указанием шрифта так, как я уже показывал выше. Но, на всякий случай, ещё раз

Всё, шрифт, как говориться, внедрён.

Можно посмотреть, как он отображается, хотя особо переживать по этому поводу не стоит.

Сервис выложит шрифт на сайт именно в том виде, и с тем эффектом, который Вы выбрали. На всех компьютерах, которые откроют Вашу страницу.

А теперь посмотрим, как внедряется шрифт из библиотеки Google Fonts, на сайт управляющийся CMS WordPress.

Сделать это можно прямо из панели управления (одно из неоспоримых достоинств этой CMS).

Заходим в Панель управления > Внешний вид > Редактор, и находим в php-файлах темы, файл с тегом head .

В теме TwentyTen &#8212; это файл header.php . В коде этого файла, после тега </title> обычно расположен блок с подключающими тегами <link>

Вот в этом блоке и нужно вставить код, из вкладки STANDART.

Если же внедрять через файл стилей, то берём код из вкладки @IMPORT и вставляем в самое начало файла style.css

Обновляем файл &#8212; шрифт внедрён, и в дальнейшем &#8212; на Ваше усмотрение.

Если Вы хотите, чтобы все определённые заголовки Вашего сайта, отображались данным шрифтом, то нужно в файле style.css , в том же редакторе, найти селектор заголовков, допустим h1<> , и вставить в него название и семейство шрифта.

Если Вы захотите выделить данным шрифтом часть текста, или какое либо слово в статье, то этот текст или слово нужно заключить в следующий код:

77

Если же Вам захочется целую отдельную статью отобразить таким шрифтом, то нет проблем &#8212; заключайте всю статью в этот span или лучше div, и вся статья будет отображена этим шрифтом.

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

fontstorage.com &#8212; Большая библиотека шрифтов на многих языках.

www.xfont.ru &#8212; Самая большая библиотека русскоязычных шрифтов.

Подробнее, как поменять шрифты в шаблоне WordPress TwentyTen, можно посмотреть в статье Редактируем тему оформления

Желаю творческих успехов.

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


Перемена

Петя всего-навсего сказал &#171;Привет!&#187;, а Люся мысленно сыграла свадьбу и родила троих детей.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *