Шпора по CSS

[Bustle]

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

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

— для шрифтов без засечек

font-family: “Times New Roman”, Georgia, serif;

— для шрифтов с засечками

font-style: normal;

— нормальный.

font-style: italic;

— наклонный.

font-weight — normal или bold

. Соответственно, нормальный либо жирный.
Пример:

font-weight: bold;

font-size

— размер шрифта. Указывается обычно либо в процентах, либо в относительных величинах em, либо в пикселях px.
Примеры:

font-size: 120%; или
font-size: 1.2em; или
font-size: 14px;

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

text-align

— выравнивание текста. Значения могут быть следующие: left, right, center, justify. Последний — это равномерное распределение слов в строке.

text-indent

— «красная строка». Указывается либо в % либо в пикселях.

line-height

— высота строки. Весьма полезная фишка, когда надо выровнять разнокалиберный шрифт.

letter-spacing

— расстояние между буквами. Тоже очень полезное правило. Позволяет «сжать» буквы в слове и делает заголовки более аккуратными. Можно использовать отрицательные значения. Например

letter-spacing: -5px;

Свойства цвета и фона.

color — цвет шрифта. Задается шестнадцатиричным числом вида #000000. При одинаковых числах в парах можно делать сокращенную запись #000.
Пример:

color: #fff;

но

color: #f4f5f7;

— обязательны все шесть чисел.

background

— фон. Если мы не используем какую-либо картинку в качестве фона, то задаем так же, как и цвет для шрифта:

background: #fff;

При использовании изображения в качестве фона:

background: #333 url(images/bg.gif) no-repeat center left;

— без повтора, по центру(относительно вертикали), слева.

background: #333 url(images/bg.gif) no-repeat top right;

— без повтора, вверху, справа.

background: #333 url(images/bg.gif) no-repeat bottom right;

— без повтора, внизу, справа.

background: #333 url(images/bg.gif) repeat-x;

— с повтором по горизонтали.

background: #333 url(images/bg.gif) repeat-y;

— с повтором по вертикали.

Свойства рамки.

border — рамка. Имеет толщину, цвет, фактуру и местоположение. Обычно пишется таким образом:

border: #333 solid 1px;

— запись означает, что рамка темно-серого цвета, сплошная, толщиной в 1 пиксель. Другие значения фактуры: dotted — точечная, dashed — пунктирная, double — двойная (у этой толщина должна быть никак не меньше 3 пикселей, иначе выйдет одинарная).

Местоположение рамки также легко обозначить в правилах:
border-top — вверху
border-bottom — внизу
border-right — справа
border-left — слева

Можно задать цвет или толщину рамки сразу для всех 4 сторон объекта. Например:

border-color: #ccc #f4f5f7 #333 #000;

— означает, что цвет верхней рамки светло-серый (#ccc), справа #f4f5f7, снизу #333, слева #000.

Точно так же можно задать и толщину.

[Bustle]

Свойства списков.

Задается свойство следующей строкой:

list-style-type:

У маркированного списка маркеры могут быть следующего вида:

disc — круг
circle — окружность
square — квадрат
none — отсутствует

либо, если мы хотим использовать свой рисунок маркера, то так:

list-style-image: url(bullet.gif);

Понятно, что картинка bullet.gif уже должна существовать в папке с вашим сайтом.

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

lower-roman — римские цифры в нижнем регистре
upper-roman — то же, но в верхнем регистре
none — отсутствует.

list-style-position — положение маркеров по отношению к строчкам. По-умолчанию маркеры вынесены влево и могут выбиваться за пределы блока. Для устранения этого пишем так:

list-style-position: inside;

[Bustle]

Пишем меню

<style>

       #menu {
    height: 43px;
    behavior: url(csshover.htc);
    background: #9ea8b2 url(images/mbg.gif) repeat-x;
    }
#menu ul, li {
    margin: 0px;
    padding: 0px;
    }
ul.menu {
    float: left;
    }
#menu ul.menu li {
    margin: 0px;
    float: left;
    width: 200px;
    height: 30px;
    display: block;
    padding-top: 13px;
    text-align: center;
}
#menu ul.menu li:hover {
    background: #b14a11 url(images/mbgh.gif) repeat-x;
    }
#menu ul.menu li:hover ul.submenu {
    display: block;
    -margin-top: 30px;
    -margin-left: -141px;
    }
#menu ul.menu li ul.submenu {
    display: none;
    margin-top: 13px;
    position: absolute;
    background: #bcc4ce;
    }
#menu ul.menu li ul.submenu li {
    float: none;
    display: block;
    }
#menu ul.menu ul.submenu li:hover {
    background: #9ca6b0;
    }
#menu ul li a {
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    }
#menu ul li a:hover {color: #ecd661;}
#menu ul.submenu li a {
    color: #4f5458;
    font-size: 14px;
    text-decoration: none;}
#menu ul.submenu li a:hover {
    color: #152535;
    }





</style>

<div id="menu">
<ul class="menu">
	<li><a href="#">Главная</a></li>
	<li><a href="#">Об авторе и блоге</a></li>
	<li><a href="#">Портфолио</a>
             <ul class="submenu">
                  <li><a href="#">Php</a></li>
                  <li><a href="#">phyton</a></li>
                  <li><a href="#">js</a></li>
             </ul>
	</li>
	<li><a href="#">Реклама в блоге</a></li>
</ul>
</div>