Читайте также:
|
Редактирование текста. Часть 1
В этой статье мы рассмотрим, как и что можно сделать с текстом с помощью языка Css. Мы уже рассмотрели ранее, как окрасить текст каким либо цветом. Здесь же мы рассмотрим абсолютно все варианты какие только можно применить к тексту.
Использование шрифтов.
Для всех остальных глав я создам класс стилей для текста и буду применять его ко всему, Вы же будете описывать классы свои.
Вот мой пример.
<p class=”text”> Этот текст используется в качестве примера </p>
Для обозначения шрифта используется следующий скрипт:
font - family
После этого свойства мы через двоеточие пишем нужный нам шрифт, вот пример:
.text{
font – family: “Times New Roman”;
}
Стиль шрифта определяется свойством font – style: которое может принимать одно из трех значений:
§ normal - нормальный
§ italic – курсив
§ obligue – наклонный
Пример (выделим текст курсивом):
.text {
font – style: italic;
}
Вид шрифта определяется свойством font – variant, которое может принимать одно из двух значений:
§ normal – обычный вид
§ small – caps – малые прописные
Пример (малые прописные буквы):
.text {
font – variant: small – caps;
}
Толщина шрифта определяется свойством font – weight которое может принимать значения числом от 100 до 900 (задает пользователь), а можно использовать такие автоматизированные свойства как:
§ normal – текст будет отображен обычным шрифтом. В числовом выражении соответствует значению 400.
§ bold – текст будет отображен более жирным шрифтом. В числовом варианте он равен 700.
§ bolder – определяет насыщенность шрифта на 100 больше, чем у родителя (тоесть при не форматированном шрифте, когда выбираем шрифт, то там свойство жирности стоит автоматически, так вот оно будет увеличено на 100)
§ lighter – задает насыщенность на 100 меньше чем у родителя
Пример (сделаем текст чуть жирнее):
.text {
font – weight: 500;
}
Размер шрифта. Теперь изменим размер шрифта основного текста. Для этого существует свойство font – size. Размер шрифта задается с помощью значения и единицы измерения, выбранной в одной из двух разных групп: абсолютной и относительной:
Абсолютные единицы:
§ in – дюйм (примерно равен 2,5);
§ mm – миллиметр;
§ cm – сантиметр;
§ pt – пункт (примерно равен 1/7 дюйма)
§ pc – пика (равна 12 пунктам)
Относительные единицы:
§ em – высота шрифта элемента;
§ ex – высота буквы «x»;
§ px – пиксел;
§ % - процентное соотношение
Пример (увеличим размер шрифта на 20 пикселей):
.text {
font – size: 20px;
}
Цвет фона устанавливается с помощью свойства background – color. В нем указываем цвет, которым хотим окрасить, это могут быть цвета:
· Словесные – red, blue, black и так далее
· RGB – значения, они более удобны тем что можно устанавливать оттенки цветам, их яркость и контрастность. Например rgb(255, 0, 0)
· С помощью шестнадцатеричного значения, например red будет выглядеть как #FF0000
Пример (окрасить фон текста в бледно серый цвет):
.text{
background-color: # CEC7C7;
}
Задание. Повторить все как указано на скриншоте, постарайтесь сделать еще графу «Выполнил: Антипов Олег (Лучше писать свои ФИ)», подсказка я пользовался выравниванием текст с помощью margin. Удачи!
.
Дата добавления: 2015-02-16; просмотров: 83 | Поможем написать вашу работу | Нарушение авторских прав |