Свойства: цвет, фон, шрифт, текст.

28.10.2022 10:21

Свойства - color (цвет) и background (фон).

 

Цвет - color

    В течение предыдущих уроков мы все время использовали свойство цвета - color. Это свойство задает цвет текста внутри элемента.

    Свойство color является наследуемым. Рассмотрим на примере, что это значит. Пусть у нас имеется html-страница со следующим кодом:

 
<html>
  <head>
    <title>css color (цвет)</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>Здесь текст параграфа.</p>
    Здесь просто текст.
  </body>
</html>
    
    Зададим стиль для элемента body:
 
body{
  color:green;
}
    

    Теперь весь текст на странице зеленого цвета. Если мы захотим изменить цвет какого-либо элемента, то ему нужно будет задать свой стиль. Например, сделаем цвет заголовка красным:

 
body{
  color:green;
}
h1{
  color:red;
}
    

    Теперь цвет заголовка красный, т.к. мы задали ему свойство color, а до этого он, как и все остальные элементы, был зеленым, потому что унаследовал свойство color от своего "предка" - элемента body.

    Таким образом, если у элемента не задано свойство color, то оно наследуется от элемента "предка". Если оно не задано и для предка, то будет осуществлен поиск вверх по дереву элементов, пока не будет найден элемент, для которого это свойство задано.

    Дерево элементов - структура всех элементов html-страницы, отражающая их вложенность друг в друга. Схематично дерево элементов для нашего примера выглядит так:

    В нашем примере для элементов h1 и p предком является элемент body, для которого предком является элемент html. Это и есть принцип наследования.

    Значениями свойства color могут быть именные цвета (red, blue...), шестнадцатеричные коды цветов (#FF0000) и десятичные коды цвета в модели RGB (rgb(255, 0, 0)).

Итак, задать цвет текста для элемента можно тремя способами:
 
body{
  color:green;
}
h1{
  color:#FF0000;
}
h2{
  color:rgb(255,0,0);
}
    
 
 

Фон - background

    На самом деле это группа свойств, так или иначе связанная с фоном. При помощи CSS фон можно задать не только странице, но и заголовку, и абзацу, и любому другому элементу. Пусть у нас есть html-страница с таким кодом:

 
<html>
  <head>
    <title>css background (фон)</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    Здесь содержимое документа
  </body>
</html>
    

Рассмотрим группу свойств background:

  • background-color - задает цвет фона. По умолчанию не наследуется, но его можно сделать наследуемым, если в качестве значения указать значение inherit.
 
Пример:
 
body{
  background-color:#243CED;
  color:yellow;
}
 
  • background-image - задает фоновое изображение. Значением свойства является URL графического файла. Формат задания следующий: сначала идет обозначение функции url, а затем в круглых скобках указывается путь к файлу. Путь к файлу указывается относительно таблицы стилей.

 

Пример:

 
body{
  background-image:url(picture.gif);
  background-color:#243CED;
  color:yellow;
}
    

    В нашем примере страница стилей style.css лежит в той же папке, что и изображение picture.gif.

    Обратите внимание, мы задали оба свойства: background-image и background-color. Это рекомендуется делать на случай, если фоновое изображение по тем или иным причинам окажется недоступным. При задании обоих свойств фоновое изображение будет лежать поверх фонового цвета.

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

Возможны 4 варианта:

        repeat - повторять изображение по горизонтали и вертикали.

        repeat-x - повторять изображение только по горизонтали.

        repeat-y - повторять изображение только по вертикали.

        no-repeat - не повторять изображение.

    По умолчанию используется значение repeat. 

    Давайте посмотрим как ведут себя остальные значения:

Пример, где на экране одна картинка без повторений:
 
body{
  background-image:url(picture.gif);
  background-repeat:no-repeat;
  background-color:#243CED;
  color:yellow;
}
    
Пример, где на экране одна картинка повторяется по всей строке:
 
body{
  background-image:url(picture.gif);
  background-repeat:repeat-x;
  background-color:#243CED;
  color:yellow;
}
    
Пример, где на экране одна картинка повторяется по столбцу:
 
body{
  background-image:url(picture.gif);
  background-repeat:repeat-y;
  background-color:#243CED;
  color:yellow;
}
    
  • background-attachment - указывает, должно ли фоновое изображение прокручиваться вместе с текстом элемента или оно должно оставаться неподвижным. Может принимать два значения:

        scroll - фон прокручивается вместе с текстом. Это значение используется по умолчанию.

        fixed - фоновое изображение фиксируется относительно окна браузера, и во время прокрутки текста оно остается неподвижным.

Пример:

 
body{
  background-image:url(picture.gif);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-color:#243CED;
  color:yellow;
}
    

    Результат действия значения fixed непривычно для пользователя, поэтому применяйте его только когда это действительно обоснованно.

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

Рассмотрим на примерах:

 
body{
  background-image:url(picture.gif);
  background-repeat:no-repeat;
  background-color:#243CED;
  background-position:10% 30%;
  color:yellow;
}
 

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

    Этой проблемы можно избежать, задавая размер в пикселах:
 
body{
  background-image:url(picture.gif);
  background-repeat:no-repeat;
  background-color:#243CED;
  background-position:50px 50px;
  color:yellow;
}
    

    Левый верхний угол изображения будет смещен на 50 пикселов по горизонтали и на 50 пикселов по вертикали.

    Вообще, для выравнивания по горизонтали (первый параметр) можно использовать следующие ключевые слова: left (по левому краю), center (по центру) и right (по правому краю). Для выравнивания по вертикали (второй параметр): top (по верхнему краю), center (по центру) и bottom (по нижнему краю).

 

Сокращенная запись свойства background

    В CSS для многих свойств существует сокращенная запись. В этом случае значения всех свойств перечисляются через пробел в произвольном порядке. Например, для последнего примера сокращенная запись будет выглядеть так:

 
body{
  background:url(picture.gif) no-repeat #33CCFF center top;
  color:yellow;
}
 

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

 

Свойства - шрифты.

    Для задания параметров шрифтов в CSS используется свойство font.

Font-family

    Это свойство css задает гарнитуру шрифта. Все шрифты можно условно разделить на несколько групп:

  • Serif - шрифты с засечками, например, Times New Roman.
  • Sans-serif - шрифты рубленные, без засечек, например, Arial.
  • Monospace - моноширинные шрифты, например, Courier New.
  • Cursive - курсивные шрифты, например, Calisto MT.
  • Fantasy - декоративные шрифты, например, Torhok.

Вот примеры написания разными группами шрифтов:

 

Так вот в качестве значения свойства font-family можно указать шрифт и группу шрифтов. 

Например:

 
body{
  font-family: Verdana, sans-serif;
}
    

    Теперь весь текст страницы будет написан шрифтом Verdana, но если на компьютере пользователя такого шрифта не окажется, то будет использоваться любой другой из группы sans-serif. То есть будет подобран шрифт наиболее близкий ему по виду, и внешний вид страницы будет не очень отличаться от задуманного.

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

 

Font-style

    Это свойство css задает стиль шрифта: normal (обычный), oblique (наклонный), italic (курсивный). Пусть у нас есть html-страница с тремя параграфами, зададим каждому уникальный идентификатор:

 
<html>
  <head>
    <title>css шрифты</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p id="sn">Текст в параграфе с идентификатором sn.</p>
    <p id="so">Текст в параграфе с идентификатором so.</p>
    <p id="si">Текст в параграфе с идентификатором si.</p>
  </body>
</html>
    
    Зададим в таблице стилей шрифт для всех параграфов:
 
p#sn, p#so, p#si{
  font-family: Verdana, sans-serif;
}

 

    Теперь давайте зададим каждому параграфу свой стиль:

 
p#sn, p#so, p#si{
  font-family: Verdana, sans-serif;
}
p#sn{
  font-style:normal;
}
p#so{
  font-style:oblique;
}
p#si{
  font-style:italic;
}
    

    Вы спросите, чем отличается наклонный стиль от курсивного? Дело в том, что различные шрифты включают в себя различные варианты начертания (bold, italic, regular и другие). Но, если в какой-либо шрифт не включен вариант italic, то он имитируется простым наклоном букв, что и соответствует значению oblique.

    По умолчанию используется стиль normal.

 

Font-variant

    Это свойство css задает вариант написания букв из двух возможных: normal (обычный) и small-caps (малые прописные буквы). По умолчанию это свойство имеет значение normal. Давайте изменим таблицу стилей предыдущего примера на такую:

 
p#sn, p#so, p#si{
  font-family: Verdana, sans-serif;
}
p#so{
  font-variant:small-caps;
}
    

Font-weight

    Это свойство css задает толщину букв шрифта. В качестве значений выступают числа: 100, 200, 300, 400, 500, 600, 700, 800 и 900. А также ключевые слова: normal (нормальный), bold (полужирный), bolder (более жирный по отношению к базовому, унаследованному от предка) и lighter (менее жирный по отношению к базовому, унаследованному от предка).

    При этом значению normal соответствует числовое значение 400, а значению bold - 700. Давайте зададим это свойство нашему второму параграфу:

 
p#sn, p#so, p#si{
  font-family: Verdana, sans-serif;
}
p#so{
  font-weight:bold;
}
    

Font-size

    Это свойство задает размер шрифта. Задавать размер в css можно тремя способами:

  • с помощью ключевых слов (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, large),
  • с помощью относительных единиц (% и em),
  • с помощью единиц измерения длины (пикселы, пункты, сантиметры и миллиметры).

 

    Использовать ключевые слова пока не рекомендуется, так как разные браузеры по-разному их отображают.

    С помощью относительных единиц задаются размеры относительно элемента-предка.

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

    Существует три относительных единицы измерения:

  • px - равен одной точке на экране, называемой пикселом.
  • em - равен высоте шрифта, используемого в данном элементе.
  • ex - равен высоте строчной буквы "х" шрифта, используемого в данном элементе.

    И пять абсолютных единиц измерения:

  • in - равен 1 дюйму (2,54 см).
  • pt - равен 1/72 дюйма.
  • pc - равен 1/6 дюйма.
  • mm - равен 1 миллиметру.
  • sm - равен 1 сантиметру.

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

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

    Поэтому для web-страниц лучше использовать только три единицы измерения: pt - для "фиксированного" дизайна сайта, % - для "резинового" дизайна и em - для пропорционального изменения размера.

    Давайте зададим для наших параграфов размер в 12 пикселов, для второго параграфа увеличим его на 20%, а для третьего - уменьшим на 10% от базового (т.е. от 12 пикселов):

 
p#sn, p#so, p#si{
  font-family:  Verdana, sans-serif;
  font-size:12px;
}
p#so{
  font-size:1.2em;
}
p#si{
  font-size:0.8em;
}
    

Обратите внимание, у величины em в качестве разделителя выступает точка (.), а не запятая.

 

Сокращенная запись свойства font

    В этом случае значения всех свойств перечисляются через пробел в следующем порядке: font-style, font-variant, font-weight, font-size, font-family. Причем, любое из свойств, кроме font-size и font-family, можно не указывать. Давайте зададим нашим параграфам следующие свойства:

 
p#sn, p#so, p#si{
  font:italic 12px Verdana, sans-serif;
}
p#so{
  font-size:1.2em;
}
p#si{
  font-style:normal;
}
    

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

 

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

 

Свойства - текст.

    Свойства текста позволяют задавать параметры слов и предложений, а также их взаимное расположение.

Text-decoration

    Это свойство отвечает за оформление текста. Может принимать следующие значения:

  • none - у текста нет оформления.
  • underline - текст подчеркивается.
  • overline - текст надчеркивается линией, расположенной над текстом.
  • line-through - текст отображается зачеркнутым.
  • blink - текст становится мигающим (не работает в IE).

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

 
a{
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}
 

Text-align

    Это свойство отвечает за горизонтальное выравнивание текста. Может принимать следующие значения:

  • left - выравнивание по левому краю.
  • center - выравнивание по центру.
  • right - выравнивание по правому краю.
  • justify - выравнивание по ширине.
 
    Пример кода:
 
a{
  text-decoration:none;
  text-align:center;
}
a:hover{
  text-decoration:underline;
}
    
 

Text-indent

    Это свойство отвечает за отступы в абзацах. Отступы задаются в единицах измерения и %, могут быть как положительными (красная строка), так и отрицательными (висячая строка). Пусть у нас есть html-страница с тремя абзацами:

 
<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>Текст в параграфе, где первая строка будет с отступом.</p>
    <p>Текст в параграфе, где первая строка будет с отступом.</p>
    <p>Текст в параграфе, где первая строка будет с отступом.</p>
  </body>
</html>
    
    Добавим для параграфов свойство text-indent, чтобы задать красную строку:
 
p{
  text-indent:1.2em;
}
    
 
    Здесь лучше использовать единицу em, чтобы отступ был пропорционален размеру шрифта.

 

Text-transform

    Это свойство отвечает за видоизменение текста, точнее за смену регистра. Используются следующие значения:

  • capitalize - меняет первую букву каждого слова на заглавную.
  • uppercase - меняет все буквы на заглавные.
  • lowercase - меняет все буквы на строчные.
  • none - изменений не происходит.

    Давайте в предыдущем примере присвоим каждому абзацу идентификатор:

 
<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p id="sc">Текст в параграфе со свойством capitalize.</p>
    <p id="su">Текст в параграфе со свойством uppercase.</p>
    <p id="sl">Текст в параграфе со свойством lowercase.</p>
  </body>
</html>
    
    И изменим таблицу стилей, задав для каждого абзаца свойство text-transform:
 
p#sc{
  text-transform:capitalize;
}
p#su{
  text-transform:uppercase;
}
p#sl{
  text-transform:lowercase;
}
    
 

    Наша страница в браузере выглядит так:

Интервалы

    В CSS есть несколько свойств, регулирующих расстояния между словами, буквами в словах и строками.

  • word-spacing - задает интервал между словами.
  • letter-spacing - задает интервал между буквами.
  • line-height - задает интервал между строками.

    Значения этих свойств задаются в единицах измерения и %. Вернемся к примеру с параграфами и изменим таблицу стилей:

 

p#su{

  word-spacing:10px;

}

p#sl{

  letter-spacing:5px;

}

    

    Наша страница в браузере выглядит так:

    Обратите внимание на интервал между строками абзаца. Давайте его увеличим, для этого добавим в нашу таблицу стилей свойство line-height:

 
p{
  line-height:200%
}
p#su{
  word-spacing:10px;
}
p#sl{
  letter-spacing:5px;
}
    

    Теперь интервал между строками стал больше.

    Мы рассмотрели свойства текста, теперь вы можете оформить свой текст так, как вам захочется. 

    Для закрепления того, что мы уже знаем, давайте оформим следующую страницу:

 
<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
 
    <h1>Заголовок первого уровня</h1>
 
    <p>Просто какой-то текст в параграфе.</p>
 
    <p id="su">Текст в параграфе с идентификатором su.</p>
 
    <p>Просто какой-то текст в параграфе.</p>
 
    <h2>Заголовок второго уровня</h2>
 
    <p>Просто какой-то текст в параграфе.</p>
 
    <p id="su">Текст в параграфе с идентификатором su.</p>
 
    <p>Просто какой-то текст в параграфе.</p>
    
  </body>
</html>
    
    Зададим для этой страницы следующее оформление:
 
body{
  background:#0033CC;
  color:#FFFFFF;
  font:12px Verdana, sans-serif;
}
h1{
  font-size:1.6em;
  color:#FFCC00;
  letter-spacing:5px;
  text-align:center;
}
h2{
  font-size:1.3em;
  color:#FFCC00;
  text-decoration:underline;
  text-align:center;
}
p:first-letter{
  color:#FFCC00;
}
p#su{
  text-indent:1.5em;
  word-spacing:10px;
  font-style:italic;
}
    

    Наша страница в браузере выглядит так:

    Разберитесь с таблицей стилей самостоятельно. Умение "читать" чужой код пригодится вам не раз. Наша таблица стилей пока достаточно проста, но начинать и нужно с малого.

Назад