Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html. Создание заглавных букв с помощью CSS Css все прописные
Зачастую в спешке при добавлении материалов на сайт или, например, создании новой темы на форуме пользователь может начать писать предложение (название) с маленькой (строчной) буквы. Это в какой-то степени является ошибкой.
Я покажу несколько вариантов решения этой задачи: PHP и CSS подойдут больше для уже опубликованных материалов, когда как jQuery сможет исправить положение еще до публикации.
Первая буква строки в верхнем регистре на PHPНа PHP существует функция под названием «ucfirst », которая как раз преобразует первый символ строки в верхний регистр, но минус ее в том, что она не совсем корректно работает с кириллицей.
Для этого мы напишем свою небольшую функцию. Реализация будет выглядеть следующим образом:
В таком варианте мы получим предложение, которое начинается с большой буквы, что, собственно говоря, нам и необходимо.
Первая буква строки в верхнем регистре на CSSЭтот метод визуально (то есть в исходном коде сайта предложения будут выглядеть как есть) также преобразует первый символ в верхний регистр.
Использование следующее:
первое предложение
второе предложение
третье предложение
четвертое предложение
#content p:first-letter { text-transform: uppercase; }С помощью псевдоэлемента «first-letter » и свойства «text-transform » мы задали оформление для каждой первой буквы параграфа.
Первая буква строки в верхнем регистре на jQueryКак я уже говорил ранее, этот способ преобразования лучше всего подойдет для материалов, которые еще только будут публиковаться.
Для примера мы возьмем текстовое поле (оно будет выступать у нас в качестве поля для ввода заголовка) и напишем для него небольшой скрипт, который при вводе предложения с маленькой буквы делает его с большой:
$(document).ready(function() { $(".content").on("keyup", function() { var text = $(this).val(); var new_text = text.charAt(0).toUpperCase() + text.substr(1); $(this).val(new_text); }); });
Скрипт срабатывает как при написании текста, так и простой его вставке. Не забывайте, что для работы скриптов на вашем сайте необходимо наличие подключенной библиотеки jQuery.
или подробно про буквы и HTML CSS форматирование
Глава содержит примеры форматирования букв из области Гипертекстовой разметки.
В меню слева вы найдете современные и очень подробные уроки по HTML.
Они позволят вам создать свой сайт с чистого листа , а пока смотрим немного ниже.
Это может быть интересно.
Эпоха информационного общества
Человечество вошло в новый период своего развития, в котором информационные и сетевые технологии играют исключительно важную роль. Мы живем в эпоху информационного общества, которое характеризуется стремительным развитием информационных и телекоммуникационных технологий. С появлением компьютера и интернета начались колоссальные перемены. Компьютер и интернет подталкивают общество к оформлению новых норм поведения, правил и идеалов. Интернет для нового поколения является тем, чем было телевидение для предыдущего. Но Глобальная сеть намного функциональнее телевидения, потому как предоставляет возможность осуществлять покупки, продажи, предлагает общение и различные способы самовыражения, как, например, создание персональных интернет-страниц и сайтов.
HTML буквы: большие и заглавныеПример форматирования букв:
Результат форматирования:
Пример произвольного текста, написанного большими буквами
Пример произвольного текста, написанного заглавными буквами
Теги - определяют большие буквы (эти теги не поддерживаются в HTML 5).
CSS код style="text-transform:uppercase" - определяет заглавные буквы .
Выражаясь другими словами, заглавные буквы определяются с помощью CSS атрибутов.
HTML буквы и CSS расстояние между нимиПример форматирования букв:
Результат форматирования:
Произвольный HTML текст и CSS расстояние между буквами в 2 пикселя
Описание атрибутов и значений:
CSS код style="letter-spacing:2px" - определяет CSS расстояние между буквами .
Подобные примеры форматирования ищите в меню слева. Спасибо за ваше внимание.
В html размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство.
Теги и атрибуты при роботе со шрифтами htmlЯзык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html .
Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами.
Рассмотрим теги, которые используются для работы со шрифтами в html
и их атрибуты. Основным из них является тег . С помощью значений его атрибутов можно задать несколько характеристик шрифта:
- color – устанавливает цвет текста;
- size – размер шрифта в условных единицах.
Поддерживается положительное значение атрибута от 1 до 7.
- face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега . Поддерживается сразу несколько значений перечисленных через запятую.
Форматируется только тот текст, который расположен между частями парного тега font. Остальной текст отображается стандартным шрифтом, установленным по умолчанию.
Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:
- — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
- — размер больше установленного по умолчанию;
- — меньший размер шрифта;
- — наклонный текст (курсив ). Аналогичный ему тег ;
- — текст с подчеркиванием;
- — зачеркнутый;
- — отображение текста только в нижнем регистре;
- — в верхнем регистре.
Обычный текст
Жирный текст
Жирный текст
Больше обычного
Меньше обычного
Курсив
Курсив
С подчеркиванием
Зачеркнутый
Возможности атрибута styleКроме описанных тегов существует еще несколько способов, как изменить шрифт в html . Одним из них является применение универсального атрибута style . С помощью значений его свойств можно задавать стиль отображения шрифтов:
1) font-family
– свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя
.
Синтаксис написания:
font-family: имя шрифта [, имя шрифта[, ...]]
2) font-size
– задается размер от 1 до 7. Это один из основных способов того, как в html
можно увеличить шрифт.
Синтаксис написания:
font-size: абсолютный размер | относительный размер | значение | проценты | inherit
Размер шрифта можно также задать:
- В пикселях;
- В абсолютном значении (xx-small, x-small, small, medium, large );
- В процентах;
- В пунктах (pt ).
Font-size:7
Font-size:24px
Font-size: x-large
Font-size: 200%
Font-size:24pt
3) font-style – устанавливает стиль написания шрифта. Синтаксис:
font-style: normal | italic | oblique | inherit
Значения:
- normal –нормальное написание;
- italic – курсив;
- oblique – шрифт с наклоном вправо;
- inherit – наследует написание родительского элемента.
Пример того, как поменять шрифт в html с помощью этого свойства:
font-style:inherit
font-style:italic
font-style:normal
font-style:oblique
4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:
font-variant: normal | small-caps | inherit
Пример того, как изменить шрифт в html этим свойством:
font-variant:inherit
font-variant:normal
font-variant:small-caps
5) font-weight – позволяет установить толщину написание текста (насыщенность ). Синтаксис:
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Значения:
- bold – устанавливает полужирный шрифт html;
- bolder – жирнее относительно normal;
- lighter –менее насыщенное относительно normal;
- normal – нормальное написание;
- 100-900 – задается толщина шрифта в числовом эквиваленте.
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
font-weight:900
font-weight:100
Свойство font и цвет шрифта htmlFont является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :
font: font-size font-family | inherit
Также в качестве значения могут быть заданы шрифты, используемые системой в надписях на различных элементах управления:
- caption – для кнопок;
- icon – для иконок;
- menu – меню;
- message-box –для диалоговых окон;
- small-caption – для небольших элементов управления;
- status-bar – шрифт строки состояния.
font:icon
font:caption
font:menu
font:message-box
small-caption
font:status-bar
Times New Roman", Times, serif">font:italic 50px bold "Times New Roman", Times, serif
Для того чтобы задать цвет шрифта в html можно использовать свойство color . Оно позволяет устанавливать цвет, как с помощью ключевого слова, так и в формате rgb . А также в виде шестнадцатеричного кода.
Позволяет изменять регистр букв текста.
По-умолчанию устанавливается значение none , которое не оказывает на текст никакого воздействия. Регистр текста остается прежним. Значения uppercase и lowercase преобразуют символы в верхний и нижний регистр, соответственно. Если указать значение capitalize , то только первые символы каждого слова будут прописными. Inherit наследует значение родителя.
Пример h3 { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } text-transform Это заголовок. К нему применено свойство text-transform со значением uppercase. Все символы будут прописными.К данному абзацу применено Свойство Text-transform со Значением Lowercase, а значит все буквы будут в нижнем регистре.
А к этому, последнему абзацу применено свойствоо text-transform со свойством CAPITALIZE. Первые буквы каждого слова будут прописными, и только они.
РезультатОднако не все так просто. Присутствуют некоторые нюансы. Если обратить внимание на второй абзац вышеприведенного примера, то можно заметить, что слово capitalize , несмотря на примененное к абзацу свойство text-transform со значением capitalize , отображается полностью из прописных букв, что соответствует исходному тексту. Объясняется это тем, что при указанном значении capitalize проверяется только первые буквы слов, а остальные остаются неизменными, независимо от их первоначального состояния.
Несмотря на внешнюю простоту, свойство text-transform может оказаться очень полезным. Например, для того, чтобы сделать текст всех заголовков H1 вашего сайта прописным, достаточно лишь добавить в таблицу стилей одно свойство
H1 {text-transform: uppercase;}
и проблема будет решена. И не потребуется вручную изменять все заголовки, которых может быть очень и очень много.
Drop cap (врезанная в текст буквица) – это первая буква абзаца, имеющая больший размер чем остальные, и размещенная так, что её верх находится на уровне первой строки абзаца. На изображении вы можете увидеть пример врезанной в текст буквицы.
Кстати, у WordPress есть специальный плагин (wordpress.org/extend/plugins/drop-caps), который позволяет автоматически создавать врезанные в текст (и смещенные вниз) заглавные буквы . Замечательно! Однако, что если вы не хотите использовать плагин (я уверен, что не хотите), и вам всего лишь необходимо создать drop cap к нескольким постам, и, возможно, в каком-нибудь определенном месте?
Хорошая новость: для того чтобы создать заглавные буквы не нужно применять плагин, все что необходимо это немного css и тег span . Откройте свой css-файл и добавьте следующий код:
Span.dropcaps { font-family:Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right: 0.09em; position: relative; }
Как-то так. Конечно, вам понадобится стиль, который бы подходил к вашему дизайну и тексту. Например, значения свойств: font-size , margins и line-height будет необходимо подобрать исходя из вашего дизайна и текста.
Тег SpanДля того чтобы стиль применялся к заглавной букве текста, необходимо «завернуть» заглавную букву в тег span и прописать соответствующий класс.
A
Псевдоэлемент:first-letterТакже задать стиль первому символу в тексте можно и с помощью псевдоэлемента:first-letter . Однако к псевдоэлементу:first-letter можно применять ограниченное количество свойств: это свойства связанные со шрифтом, цветом, фоном, границами, полями и отступами. Еще следует отметить, что псевдоэлемент:first-letter не будет работать в старых браузерах.
P:first-letter { font-family:Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right: 0.09em; position: relative; }
Вот, собственно, пара методов редактирования заглавных букв с помощью CSS.