Четверг, 10 Мая 2012 09:12

Верстка сайта. Урок 6. Основные свойства CSS

Written by 
Оцени эту запись
(0 Голоса)

Это уже шестая статья из серии уроков по верстке с нуля. В данной статье буду рассказывать о основных свойствах CSS. Эти свойства будут использоваться в любой верстке, даже самой простой. Больше CSS свойств в статье "CSS свойства"

 

План урока:

  • Color
  • Background
  • Font-family
  • Margin
  • Padding
  • Display
  • Border
  • Некоторые свойства для стилизации текста

 

 

Color

Свойство "Color" задает цвет текста. Когда только начинаете создавать шаблон, нужно для body или для основного контейнера страницы задать тип, размер и цвет текста. А потом уже менять его в нужных местах для определенных блоков.

Цвет можно задавать двумя способами - по его названию или по значению в RGB. Для того, чтобы узнать RGB код нужного цвета, используйте таблицу HTML кодов цветов.

Слово красным цветом

 

Слово <span style="color: red;">красным</span> цветом

 

или

 

Слово красным цветом

 

Слово <span style="color: #ff0000;">красным</span> цветом</p>

 

Задание цвета в RGB подускает упрощение. Если в данном 6-ти значном числе совпадают цифры по парам - первая и вторая, третья и четвертая и т.д, то их можно объединить. Тогда красныя цвет будет записан не #ff0000, а #f00. Также белый будет #fff, а черный #000.

 

Слово красным цветом

 

Слово <span style="color: #f00;">красным</span> цветом

 

 

Background

 

Свойство Background определяет фон элемента, например, блока div. Фон можно задать цветом, картинкой, повтором картинки.

 

 

 
 
 
 
 
 
background: #f00;
background: url(img.jpg);
background: url(img.jpg); background-position: -10px -10px; background-repeat: no-repeat;
background: url(rt.png);
background: url(rt.png) repeat-x;
background: url(rt.png) repeat-y;
 

 

Background: url(img.jpg) - задает фон блока картинкой. В url() прописывается путь к картинки.

Background-position - позиция картинки на фоне блока. По умолчанию, background-position: 0px 0px;, где первой число - это смещение по горизонтали, второе - по вертикали.

Background-repeat - повтор картинки горизонтально или вертикально - repeat-x, repeat-y. Значение no-repeat не будет повторять картинку, а свойство repeat - повторит в обоих направлениях. По умолчанию, background-repeat: repeat.

 

Эти свойства можно объединять - задать путь к картинке, смещение и повторение вместе

 

background: url(img.jpg) -10px -10px no-repeat

 

 

Font-family

Задаем шрифт текста.

 

font-family: Arial, Helvetica, sans-serif;

 

Первое значение этого свойства - это шрифт, который вы желаете видеть на сайте. Второе - то, что отобразится, если указанного шрифта нету на компе пользователя. Теретье значение - тип шрифта - с зачечками или без. Для типографии свойственно использовать шрифт с засечками. А для веба лучше использовать без засечек, он лучше читается с монитора.

При указании шрифта для текста нужно учитывать, что даже стандартные шрифты для Windows не обязательно есть в Linux и Mac. Но есть их аналоги. Для этого нужно указывать альтернативные варианты шрифта через запятую.

 

Стили для текста можно задавать коротко:

 

font: 12px/14px Arial,sans-serif;

 

Где 12px - размер шрифта, 14px - межстрочный интервал, Arial - имя шрифта и sans-serif - его тип.

 

 

Margin

 

Свойство Margin задает внешний отступ элемента.

 

 

 
 
 
 
 
 
 
margin: 10px;
margin-left: 10px;
margin-right: 5px;
margin-top: 10px;
margin-bottom: 20px;
margin: 20px 5px 10px 2px;
 

 

Красный блок - основной. Для внутреннего зеленого задаем разные значения margin:

margin: 10px; - отспут со всех сторон одинаковый - 10px;

margin-left: 10px; - задаем отспут слева

margin-right: 5px; - отступ справа

margin-top: 10px; - верхний оступ

margin-bottom: 20px; - нижний

margin: 20px 5px 10px 2px; - объединяем в одну строку оступы с такой последовательности верх--право--низ--лево

 

margin: верх--право--низ--лево

 

 

Padding

 

Свойство padding задает внутренний отступ элемента.

 

 

 
 
 
 
 
 
 
padding: 10px;
padding-left: 10px;
padding-right: 5px;
padding-top: 10px;
padding-bottom: 20px;
padding: 20px 5px 10px 2px;
 

 

Красный блок - основной. Для внутреннего зеленого задаем разные значения padding:

padding: 10px; - отспут со всех сторон одинаковый - 10px;

padding-left: 10px; - задаем отспут слева

padding-right: 5px; - отступ справа

padding-top: 10px; - верхний оступ

padding-bottom: 20px; - нижний

padding: 20px 5px 10px 2px; - объединяем в одну строку оступы с такой последовательности верх--право--низ--лево

 

padding: верх--право--низ--лево

 

Обратите внимание, что внутренний отступ padding увеличивает размер блока. Если у блока width: 100px; padding-left: 20px, то, по факту, его ширина на экране будет занимать 120px.

 

 

Display

 

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

 

В этой строке есть строчный элемент

 

В этой строке есть <span>строчный</span> элемент

В этой строке есть блочный элемент

В этой строке есть <span style="display: block">блочный</span> элемент

В этой строке есть

блочный

элемент

 

В этой строке есть <div>блочный</div>элемент

 

В этой строке есть строчный элемент

 

 

В этой строке есть<div style="display: inline">строчный</div>элемент

 

 

Свойство display может принимать такие значения: block, inline, none, inline-block, table-cell и т.д.

 

 

Border

 

Задает границу элемента.

 

border: ширина вид цвет

 

Ширина задается в пикселах. Вид(тип) границы может быть цельный (solid), точечный(dotted) или шрихом(dashed).

 

 

 

border: 1px solid red
border: 2px dotted green
border: 3px dashed blue

 

С помощью border'а можно делать кнопки объемными:

 

 

Button

 

 
<div style="padding: 5px; width: 60px; height: 15px; border-top: 3px solid #999; border-left: 3px solid #ccc; border-right: 3px solid #666; border-bottom: 3px solid #666; color: #ccc; background: #777;">
Button</div>
 
 

 

Некоторые свойства для стилизации текста

 

Рассмотрим некоторые полезный свойства для стилизации текста.

Font-size - размер шрифта. Задается через px или em.

Font-weight - жирность шрифта

Font-style - курсив

Text-decoration - подчеркивание. По умолчанию ссылки подчеркнуты - text-decoration: underline; Но это можно убрать, задав ссылке text-decoration: none.

Text-transform - заглавные буквы

 

В этой строке будет крупный текст - В этой строке будет <span style="font-size: 20px;">крупный</span> текст

 

В этой строке будет жирный текст - В этой строке будет <span style="font-weight: bold;">жирный</span> текст

 

В этой строке будет курсивный текст - В этой строке будет <span style="font-style: italic;">курсивный</span> текст

 

В этой строке будет подчеркнутый текст - В этой строке будет <span style="text-decoration: underline">подчеркнутый</span> текст

 

В этой строке будет заглавный текст - В этой строке будет <span style="text-transform: uppercase">заглавный</span> текст

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов