Безобразный form html. HTML формы. Несколько более сложная форма
CSS3-текст включает свойства для работы с текстом, позволяющие решить проблемы с переносом текста и обрезкой текста в пределах содержимого.
CSS3-свойства для форматирования текста
1. Обрезка строки text-overflow
Свойство позволяет ограничивать длину текста в случае, когда он не умещается в контейнер, визуально обрезая его или отображая многоточием. Свойство работает только при задании следующих условий: должна быть определена ширина контейнера, элемент должен иметь значения overflow: hidden и white-space: nowrap . Не наследуется.
Синтаксис
P { width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } Рис. 1. Обрезка текста с помощью свойства text-overflow
2. Перенос внутри слов word-break
В обычной ситуации слова переносятся на другую строку в местах пробелов или дефисов («мягкий перенос»), или же в случае принудительного переноса с использованием элемента
. Данное свойство позволяет установить правила переноса внутри слов для того, чтобы длинные строки полностью заполняли пространство внутри контейнера. Не используется для CJK-языков (китайский-японский-корейский). Наследуется.
Синтаксис
P {word-break: normal;} p {word-break: break-all;} p {word-break: keep-all;}
3. Перенос слов в строке word-wrap
Применяется в случаях, когда текст не умещается в свой контейнер и выходит за его границу. Позволяет разрывать длинные слова и переносить их на следующую строку. Наследуется. Срабатывает лишь в случае, если значение white-space разрешает разрыв строк.
Свойства CSS для форматирования текста позволяют оформить содержимое страницы, не затрагивая HTML-код. Какие же параметры можно задать тексту через таблицы стилей?
Выравнивание по горизонтали
Для него используется свойство text-align
. Выровнять с его помощью можно только блочный текст (теги
). Свойству может быть задано одно из четырех значений: Вот код HTML-страницы, текст которой выровнен по правому краю:
Текст, который вы сейчас читаете, выровнен по правому краю. Выглядеть страница будет так: Если текст выровнен по ширине (text-align: justify
), то можно использовать свойство text-align-last
, чтобы задать отличное от основного содержимого выравнивание последней строчки текста элемента. Может задаваться только для строчных элементов (картинок, форм), определяется свойством vertical-align
. С его помощью выравнивается не содержимое, а сами элементы, кроме случая с ячейкой – использование vertical-align выравнивает не её саму, а только расположенный в ней текст. Значения могут быть следующими: Также с помощью vertical-align
можно переместить элемент вверх или вниз, указав значение в пикселях, единицах или процентах. Положительная цифра переместит его вверх, отрицательная - вниз. Свойство text-indent
позволяет задать отступ первой строки текста. Например, так можно отформатировать абзацы, чтобы лучше визуально отделить их друг от друга. В качестве значения используется цифра, задающая длину в процентах, единицах или пикселях. Отрицательное число превратит отступ в выступ. Текст Задаётся свойством line-height
, в качестве значения которого может указываться: Значение свойства text-decoration
позволяет сделать текст зачёркнутым (line-through
), подчёркнутым (underline
) - линия появляется под текстом, надчёркнутым (overline
) - линия появляется над текстом, или отменить эффекты (none
). Вот пример кода:
Это зачёркнутый текст. Это подчёркнутый текст. Это надчёркнутый текст. Результатом работы будет такая страница: Расстояние между словами можно изменить с помощью свойства word-spacing
. Межсимвольное расстояние задаётся свойством letter-spacing
. В качестве значений используются любые принятые в CSS единицы длины. Указав свойство text-transform
, вы можете сделать так, чтобы все буквы текста были заглавными (значение uppercase
), строчными (lovercase
), или чтобы каждое слово начиналось с большой буквы (capitalize
).
Здесь все буквы будут большими. Все буквы этой строки будут строчными. Здесь каждое слово будет начинаться с заглавной буквы. Результат: Обратите внимание, что текст в коде набран как обычно: единственная заглавная буква стоит в начале предложения. Отображение на странице меняет CSS-стиль. С помощью CSS свойства color
Вы можете изменять цвет текста HTML элементов. Цвет может быть задан следующими способами: Первый способ в основном используется для задания основных цветов, названия которых хорошо известны. Например red определит
красный, blue - синий, white - белый. Второй способ может использоваться для задания любых цветов и оттенков. Синтаксис:
Rgb(красный
,зеленый
,голубой
) красный
число от 0 до 255 указывающее как много красного будет в итоговом оттенке. зеленый
число от 0 до 255 указывающее как много зеленого будет в итоговом оттенке. голубой
число от 0 до 255 указывающее как много голубого будет в итоговом оттенке. Например rgb(255,0,0)
задаст красный цвет, а rgb(0,255,0)
rgb(255,255,0)
мы получим желтый. Третий способ по функциональности эквивалентен второму, но более компактен. На практике в основном используют именно этот способ. Синтаксис:
#красный
зеленый
голубой
красный
шестнадцатеричное число от 0 до ff указывающее как много красного будет в итоговом оттенке. зеленый
шестнадцатеричное число от 0 до ff указывающее как много зеленого будет в итоговом оттенке. голубой
шестнадцатеричное число от 0 до ff указывающее как много голубого будет в итоговом оттенке. Например #ff0000
задаст красный цвет, а #00ff00
зеленый. Смешивая красный с зеленым #ffff00
мы получим желтый. Теперь попробуем перекрасить абзацы в зеленый цвет всеми перечисленными выше способами: P {color:green;}
p {color:rgb(0,255,0);}
p {color:#00ff00;} Обратите внимание:
удобно выбирать необходимые оттенки цвета можно с помощью . С помощью CSS свойства text-align
Вы можете выровнять текст элемента по горизонтали. Текст может быть выровнен: Обратите внимание:
по ширине (justify) текст выравнивается путем растягивания всех строчек до одинаковой длины. Этот метод выравнивания часто используется в газетах и журналах. P.ta1 {text-align:center;}
p.ta2 {text-align:left;}
p.ta3 {text-align:right;}
p.ta4 {text-align:justify;}
Быстрый просмотр С помощью CSS свойства text-decoration
Вы можете сделать текст HTML элемента: P.td1 {text-decoration:underline;}
p.td2 {text-decoration:line-through;}
p.td3 {text-decoration:overline;}
Быстрый просмотр Свойство text-decoration со значением none "очищает" текст от всех вышеперечисленных эффектов. Это может использоваться для создания не подчеркнутых ссылок. A:link {text-decoration:none;}
a:visited {text-decoration:none;}
Быстрый просмотр Обратите внимание:
подчеркивать обычный текст не рекомендуется, так как пользователи могут перепутать его со ссылкой. С помощью CSS свойства letter-spacing
Вы можете увеличивать или уменьшать отступ между буквами в тексте HTML элементов. P.ls1 {letter-spacing:10px;}
Быстрый просмотр С помощью свойства word-spacing
Вы можете увеличивать или уменьшать отступ между словами в тексте HTML элементов. P.ws1 {word-spacing:15px;}
Быстрый просмотр Для того, чтобы посмотреть подробную информацию о желаемом CSS свойстве, щелкните по его названию. Обратите внимание:
для выполнения этого задания Вам необходимо будет посетить так как не все свойства оформления текста были разобраны в данной главе. Задание 1
оформите элементы согласно их описанию: 1. В данном абзаце отступ между буквами равен 17 пикс., а отступ между словами 5 пикс.
Данный абзац оранжевого цвета.
2. Текст данного элемента подчеркнут, отступ между буквами в нем равен 15 пикселей.
Данный абзац серого цвета.
3. Текст данного элемента выровнен по центру, отступ между словами в нем равен 10
пикселей. Данный элемент имеет цвет #ff3366.
4. Текст данного элемента выравнен по правому краю, отступ между буквами в нем равен 6
пикселей. Текст написан маленькими буквами красного цвета.
5. Текст данного элемента выравнен по центру, подчеркнут, отступ между буквами в нем
равен 7 пикселей. Текст написан большими буквами зеленого цвета.
CSS дает широкие возможности по оперированию стилем текста. Можно влиять на шрифт, цвет, размер и другие свойства текста. Так как эта страница расчитана на новичков, то сначала напомним базовый синтаксис CSS и используемую терминологию. Каждое правило CSS состоит из селектора и определения. Селектор - обычно это тег, к которому мы применяем наш стиль, а определение - это само стилевое отображение. Определение состоит из свойства и его значения. Например: свойство - цвет, значение - красный. Синтаксис CSS следующий: селектор { свойство: значение }
Пример правила CSS: p { color
: blue
}
Отображать текст синим цветом. Одному селектору можно указать несколько пар (свойство: значение). p { color
: blue
; font-size
: 10pt
}
В этом примере задано правило тегу Отображать текст синим цветом и размером 10pt. То есть тут мы имеем две пары (свойство: значение) применённые к одному селектору, в данном случае к тегу абзаца
В дальнейшем, когда в тексте будут встречаться слова свойство и значение, будет иметься ввиду именно определение для селектора в правиле CSS. Если не указывать это свойство в CSS, то броузер будет показывать текст шрифтом по умолчанию. Обычно это Times New Roman. Список шрифтов в значении font-family
может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки, одинарные или же двойные. Браузер поочерёдно проверяет наличие шрифтов из списка на компьютере пользователя. Если первый шрифт в списке есть, то используется он, иначе браузер проверяет наличие второго шрифта из списка. Если ни одного нет, используется шрифт по умолчанию. В конце списка обычно прописывают ключевые слово, которое описывает тип желаемого шрифта - serif, sans-serif, fantasy, cursive или monospace. Универсальные семейства шрифтов: Пример с использованием:
Следующее свойство: Пример кода, в этом примере встроим стили в тег при помощи атрибута style.
Пример нормального шрифта. Пример курсива. Пример наклонного шрифта. Видно что курсив от наклонного шрифта внешне не отличается. Следующее свойство: Капитель - так в типографике называется текст, в котором строчные знаки выглядят, как уменьшенные прописные. Следует различать капитель и просто уменьшенные прописные буквы. Капительные буквы несколько выше строчных и имеют, как правило, чуть расширенные пропорции.
Обычный текст.
Текст капителью. Опять обычный текст. Следующее свойство: Свойство font-weight
устанавливает насыщенность шрифта. Для этого в значении используются ключевые слова: bold
- полужирное начертание, normal
- нормальное начертание. Значение может быть установленно в диапазоне от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное - 900. Нормальное начертание шрифта (normal, которое установлено по умолчанию) соответствует 400, стандартный полужирный текст, bold, - значению 700. Браузеры обычно не могут точно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold
, normal
и lighter
. На практике же начертание в большинстве браузеров обычно ограничено только двумя вариантами: нормальное начертание и жирное начертание. Значения lighter
и bolder
изменяют жирность шрифта относительно насыщенности родителя, соответственно, в меньшую и большую сторону.
Обычный текст. Текст bold. Опять обычный текст. Следующее свойство: Свойство font-size
- определяет размер шрифта элемента. Размер шрифта можно задать несколькими способами. Абсолютный размер кегля шрифта может задаваться с использованием ключевых слов: xx-small (крайне малый), small (малый), medium (средний, значение по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое). Абсолютные размеры шрифта зависят от настроек браузера и операционной системы, так что они не совсем абсолютны. Для изменения размера текста относительно родителя используется другой набор констант (larger - увеличивает размер относительно родительского, smaller - уменьшает размер).
Обычный текст. Текст xx-small.
Текст larger. Текст small. Текст medium. Текст large. Текст x-large. Текст xx-large. Опять обычный текст. Текст 150%. Текст 15px.
Текст larger. Кроме работы со шрифтами, CSS даёт ряд инструментов для работы с свойствами самого текста. Рассмотрим первое свойство: При установке межстрочного интервала отчёт идёт от базовой линии шрифта. По умолчанию расстояние между строками текста зависит от вида и размера шрифта и определяется браузерами автоматически. Отрицательное значение интерлиньяжа не допускается.
Обычный текст. Первая строка.
Изменённый текст. Первая строка.
При процентной записи за 100% берется высота шрифта. Следующее свойство: При помощи определения { text-decoration
: none
}
можно убирать подчеркивание у ссылок, которое устанавливается в браузерах по умолчанию.
Поисковик Google. Следующее свойство: Свойство text-transform
- управляет отображением букв, можно устанавливать заглавные или прописные символы в зависимости от выбранного значения. Пример использования:
Текст none. Текст capitalize. Текст uppercase. Текст lowercase. Сравните текст который содержится в html-коде с текстом в окне браузера. Следующее свойство: Свойство text-align
- служит для выравнивания текста по горизонтали окна браузера или контейнера, в котором расположен блок текста. Подробное описание значений: Пример использования этого свойства будет совмещён с примером работы следующего свойства. Следующее свойство: Свойство text-indent
- служит для создания величины отступа первой строки блока текста (например, для абзаца
Это свойство допускает отрицательное значение, в таком случае создается выступ первой строки. Работа со свойствами text-align и text-indent.
Для лучшего понимания работы кода откройте страницу
в новом окне и уменьшите его размер. CSS-текст
представляет набор свойств для форматирования текстового содержимого веб-страниц. Использование CSS-стилей для форматирования текста позволяет придать HTML-элементам желаемый вид, благодаря чему HTML-теги могут применяться только по своему прямому назначению — для определения структуры документа. О свойствах для работы с текстом, добавленных в спецификацию CSS3
— text-overflow , word-break , word-wrap , можно прочитать . Свойство выравнивает строки текста внутри блока по ширине относительно его границ. Применяется только к блочным элементам, например, абзацам. Наследуется. Синтаксис
P {text-align: left;}
p {text-align: right;}
p {text-align: center;}
p {text-align: justify;}
Устанавливает отступ (выступ) в первой строке элемента, создавая иллюзию структурированного текста. Применяется к любому блочному элементу, значение по умолчанию 0. Если в первой строке блочного элемента присутствует изображение, то оно сдвинется вместе с остальным текстом. Наследуется. Синтаксис
P {text-indent: 5px;}
p {text-indent: 2%;}
Свойство задаёт расстояние между базовыми линиями строк текста, определяя величину, на которую увеличивается или уменьшается высота блока каждого элемента. Управляет межстрочным интервалом — дополнительным расстоянием между строками над и под текстом. Чтобы определить межстрочный интервал, нужно найти разность line-height и font-size , разницу поделить на два, а каждую половину прибавить к области содержимого сверху и снизу. Принимает только положительные значения. Стандартный межстрочный интервал эквивалентен 120%. При равных значениях line-height и height выравнивает текст по высоте. Наследуется. Синтаксис
H1 {line-height: 20px;}
h1 {line-height: 200%;}
h1 {line-height: 1.2;}
h1 {line-height: normal;}
Применяется только к строчным элементам, к изображениям и полям форм. Не выравнивает содержимое блочного элемента. Не наследуется.Выравнивание по вертикали
Отступ первой строки
Межстрочный интервал
Декорирование текста
Интервал между символами и словами
Смена регистра
Пояснения:
Выравнивание текста
Свойство text-decoration
Отступ между словами и буквами в тексте
Остальные CSS свойства оформления текста
Сделайте сами
Включите JavaScript, чтобы воспользоваться системой комментирования Disqus.
Свойства шрифта
Заголовок h1
Заголовок h2
Свойства текста
Вторая строка.
Третья строка.
Вторая строка.
Третья строка.
Свойство text-transform
Свойство
Значение
Описание
Пример
text-transform
none
capitalize
uppercase
lowercase
Убрать все эффекты
Начинать С Прописных
ВСЕ ПРОПИСНЫЕ
все строчные
text-transform: uppercase
Свойство text-align
Свойство
Значение
Описание
Пример
text-align
left
right
center
justify
Выравнивание текста
text-align: right
Свойство text-indent
Свойство
Значение
Описание
Пример
text-indent
значение
%
Отступ первой строки
text-indent: 15px;
text-indent: 10%
Форматирование текста в CSS
1. Горизонтальное выравнивание text-align
Значения:
left
Выравнивание по левому краю элемента. Значение по умолчанию для языков, в которых чтение происходит слева-направо.
right
Выравнивание по правому краю элемента.
center
Выравнивание по центру элемента, управляет выравниванием содержимого, а не самих элементов. Центрирует каждую строчку текста элемента.
justify
Выравнивание по ширине элемента. В выровненном по ширине тексте оба конца строки прижимаются к левому и правому краям родительского элемента. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами.
initial
inherit
Рис. 1. Свойство text-align
2. Отступ text-indent
Рис. 2. Свойство text-indent
3. Высота строки line-height
Рис. 3. Контейнер строки
Рис. 4. Пример отображения различных значений межстрочного интервала
4. Вертикальное выравнивание vertical-align
vertical-align
Значения:
baseline
Выравнивает базовую линию элемента по базовой линии его родителя, совмещая среднюю линию элемента со средней линией родительского элемента.
sub
Делает элемент подстрочным (аналогично с тегом ). Величина понижения элемента может меняться в зависимости от браузера пользователя.
super
Делает элемент надстрочным (аналогично с тегом ). При этом значения sup и super не меняют размер шрифта, по умолчанию текст надстрочного и подстрочного элемента имеет такой же размер, как и текст родительского элемента.
top
Верхний край элемента совмещается с верхним краем самого высокого элемента в линии.
text-top
Верхний край элемента совмещается с верхним краем шрифта родительского элемента.
middle
Средняя линия элемента (обычно изображения) совмещается с линией, проходящей через середину родительского элемента.
bottom
Нижний край элемента совмещается с нижним краем самого низкого элемента в линии.
text-bottom
Нижний край элемента совмещается с нижним краем шрифта родительского элемента.
длина
Устанавливает значение в единицах длины, перемещая элемент на заданное расстояние.
%
Не позволяет устанавливать middle , вычисляется как часть line-height элемента, а не его родителя, т.е. если установить значение vertical-align , равное 50% для элемента с line-height равным 20рх, то базовая линия элемента поднимется на 10px .
initial
Устанавливает значение свойства в значение по умолчанию.
inherit
Наследует значение свойства от родительского элемента.