Ну что ж, сегодня мы с вами разберем пару важнейших css параметров для дальнейшей верстки наших сайтов. В данной статье будет лишь несколько функций
в самом начале нашего .css пропишем примерно следующее: body { font: 12px/18px Arial, Tahoma, Verdana, sans-serif; width: 100%; background: #313131 url(../images/fon.png) repeat-x; margin: 0;
padding: 0;
Теперь попробуем разобрать.
Параметр font в нашем значении он задает размер всего текста 12px, и использует шрифт Tahoma/Verdana.
Параметр width в нашем случае у него значении 100% (растяжка).
Параметр background указывает на цвет\изображение нашего фона. с нашим параметром repeat-x который растягивается по оси x с цветом #313131
Параметр margin и padding указывает расположение объекта.
Прошу заметить после каждого параметра требуется знак «;«
a { color: blue; outline: none; text-decoration: none;
}
Теперь разберем этот класс, данный класс указывает на параметры наших ссылок на странице:
Параметр color указывает на цвет наших ссылок.
Параметр outline указывает на границы наших ссылок.
Параметр text-decoration делает наши ссылки более привлекательными, например подчеркивание
Собственно теперь у нас есть параметр для выделение наших ссылок, чтобы различать ссылки и текст. Но все же чего то нехватает теперь сделаем чтобы наши ссылки выделялись при наводке:
a:hover { color: #000000 text-decoration: none;
}
Параметр color указывает на цвет наших ссылок.
Параметр text-decoration делает наши ссылки более привлекательными, например подчеркиваниеЭто лишь основы разберем пару значительных параметров:
1.Расположение объекта
За расположение нашего объекта отвечают два параметра это margin и padding
margin-bottom — Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента
margin-left — Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента
margin-right — Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента
margin-top — Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края верхней границы текущего элемента до внутренней границы его родительского элемента
padding — Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
padding-bottom — Устанавливает значение поля от нижнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
padding-left — Устанавливает значение поля от левого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
padding-right — Устанавливает значение поля от правого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
padding-top — Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
2. Размеры нашего объекта.
За размеры наших объектов отвечают следующие параметры это width(ширина) и height(высота)
Разберем параметры:
width и height могут указываться как в пикселях так и в процентах.
html:
Какой либо контент
css:
.dragon {width: 500px;height: 200px;
}
Таким образом наш блок с классом «dragon» будет иметь размер 500px в ширину и 200px в высоту.
Так же есть еще один не мало важный параметр это float
Данный параметр может распределить ваш объект по правому или левому краю.
html:
Какой либо контент
css:
.dragon {width: 500px;height: 200px;float:right;
}
На сегодня пожалуй все. Большой список параметров вы можете получить и освоить на сайте htmlbook
С вами был DragoN
Источник: http://d-ragon.ru/