Пятница, 29.03.2024, 02:14
Приветствую Вас Гость

Шпаргалка По CSS - Форум

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Верстка » CSS » Шпаргалка По CSS
Шпаргалка По CSS
AvAtAr
сообщение Вторник, 04.05.2010, 14:39 |
Сообщение # 1


Подполковник

  • Группа: Администраторы
  • Сообщений: 160
  • Репутация: 10
  • Статус: Offline



Если вы не упражняетесь ежедневно по 6-8 часов кряду, выписывая хитроумные либо простые правила листа стилей CSS, то наверняка иной раз просто забываете как пишется тот или иной селектор или свойство. Я и сам часто забываю. Да вот взять, хотя бы, дурное английское слово width (ширина). Или height (высота). Не знаю как другим, а я до сих пор стараюсь запомнить такие слова так, как они пишутся. То есть буквально «видтх» «хейгхт». Ибо ашипко чревата жуткими последствиями.

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

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

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

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.

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

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

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

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;





 
Nel
сообщение Суббота, 12.06.2010, 10:38 |
Сообщение # 2


Лейтенант

  • Группа: Пользователь
  • Сообщений: 45
  • Репутация: 1
  • Статус: Offline



это не так уж и просто sad

 
Форум » Верстка » CSS » Шпаргалка По CSS
  • Страница 1 из 1
  • 1
Поиск: