HTML ШАБЛОНЫ САЙТОВ
Современные готовые адаптивные HTML 5 шаблоны.
Откройте для себя мир современных и оригинальных шаблонов сайтов...
АДАПТИВНЫЕ ШАБЛОНЫ шаблоны сайтов
Независимо от устройства, Вам будет удобно пользоваться сайтом.
Изображения будут большими, а текст четким! шаблоны сайтов

Урок 6. Шрифты

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

Font-family - задает непосредственно сам шрифт. Шрифты можно разделить на группы:

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 - задает стиль шрифта: normal (обычный), oblique (наклонный), italic (курсивный). Создадим html-страница с тремя параграфами и пропишем каждому ID:

<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>

 

Пропишем шрифт для всех параграфов:

 

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

 

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

 

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

 

 

Font-variant - вариант написания букв: normal (обычный) и small-caps (малые прописные буквы). По умолчанию это свойство имеет значение normal.

 

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

 

Font-variant - вариант написания букв

Font-weight - задает толщину букв. Задается числами: 100, 200, 300, 400, 500, 600, 700, 800 и 900. Можно задавать толщину букв при помощи ключевые слова:

normal - нормальный

bold - полужирный

bolder - более жирный по отношению к базовому, унаследованному от предка

lighter - менее жирный по отношению к базовому, унаследованному от предка

 

 

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

 

css толщина букв

 

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

с помощью ключевых слов (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, large)

с помощью относительных единиц (% и em)

с помощью единиц измерения длины (пикселы, пункты, сантиметры и миллиметры)

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

Для web-страниц лучше использовать только три единицы измерения:

px - для "фиксированного" дизайна сайта

% - для "резинового" дизайна

em - для пропорционального изменения размера

 

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

 

css размер шрифта

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

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

 

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

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

23

 

 
Please enable / Bitte aktiviere JavaScript!
Veuillez activer / Por favor activa el Javascript!

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

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

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

Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.