Шпаргалка по CSS
Шпаргалка по правилам css. Будет полезна как начинающим верстальщикам веб-сайтов, так и практикующим, ибо все мы иногда что-то забываем.
Если вы не упражняетесь ежедневно по 6-8 часов кряду, выписывая хитроумные, либо простые правила файла стилей CSS, то наверняка иной раз просто забываете, как пишется тот или иной селектор или свойство. Я и сам часто забываю.
Да вот взять, хотя бы, дурное английское слово width (ширина), или height (высота). Не знаю как другим, а я до сих пор стараюсь запомнить такие слова так, как они пишутся. То есть буквально «видтх» «хейгхт». Ибо ошибка чревата жуткими последствиями.
Согласитесь, что это не слишком удобно. Если вдруг позабыл, то приходится лезть в разные книги и выискивать там правило. На такой случай я однажды просто взял, да и выписал все, наиболее часто встречающиеся, правила и свойства на отдельный лист и распечатал его. Можно, конечно, просто оставить его на Рабочем столе в виде вордовского файла. Это кому как удобнее.
Здесь я выписал то, чем сам пользуюсь постоянно. Надеюсь, кому-нибудь это также пригодится.
Свойства шрифта в CSS
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;
Свойства текста в CSS
text-align — выравнивание текста. Значения могут быть следующие: left, right, center, justify. Последний — это равномерное распределение слов в строке.
text-indent — «красная строка». Указывается либо в % либо в пикселях.
line-height — высота строки. Весьма полезная фишка, когда надо выровнять разнокалиберный шрифт.
letter-spacing — расстояние между буквами. Тоже очень полезное правило. Позволяет «сжать» буквы в слове и делает заголовки более аккуратными. Можно использовать отрицательные значения.
Например letter-spacing: -5px;
Свойства цвета и фона в CSS
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; — с повтором по вертикали.
Свойства рамки в CSS
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.
Точно так же можно задать и толщину.
Свойства списков в CSS
Задается свойство следующей строкой:
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;
Данную шпаргалку по CSS распечатать и съесть повесить на стену! :)
