Шпаргалка По CSS

Дата: 18.03.2008 | Автор: Игорь Квентор | Рубрика: Верстка |

Тэги: , ,

Если вы не упражняетесь ежедневно по 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;

Данную шпаргалку распечатать и съесть повесить на стену! :)

Вебсовет

rss Подпишитесь на RSS

Или получайте новости на ваш e-mail:

Комментарии (22) на запись “Шпаргалка По CSS”

  1. Владимир 18.03.2008 11:49

    А я пользуюсь одной очень интересной прогой : Top Style - это чудесное творение неизвестных мне программистов знает всё о CSS. Интерфейс понятный даже имбицилу, все по полочкам, в общем рекомендую к применению!

  2. Tolyattinec 18.03.2008 13:01

    Спасибо, как раз вовремя (я css изучаю), но мало.

  3. Анна 18.03.2008 13:54

    Спасибо. Вещь в хозяйстве необходимая. Обязательно что-то вылетает из головы.

  4. Дмитрий 18.03.2008 14:04

    Полной эта информация всё равно не является и, когда надо будет что-нибудь посерьёзнее, - придётся лезть в справочник. С Win98 идёт классный справочник по HTML+CSS, ярлык на рабочем столе, запускается за доли секунды.

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

    IMHO. :)

  5. Di 18.03.2008 15:54

    Наверное апрофессиональный совет скажу, но я пользуюсь для написания всего Dreamweaver, а там, если наловчиться, он сам будет подсказывать нужное свойство по первым буквам.)

  6. Kventor 18.03.2008 16:43

    Вы правы, друзья, каждый пользуется теми способами, которые наиболее ему привычны и удобны.
    Шпаргалка данная, конечно же, не полная. Здесь лишь основные, наиболее часто встречающиеся правила. Но ведь именно за такими простыми вещами ломает лезть в справочник. Когда ты в общем-то помнишь, но вот чуток подзабыл. :)

    2 Владимир: TopStyle - хорошая прога! При небольшом весе (1,8 мБ) много чего умеет. Правда вот на русском я ее не нашел, только английская версия.

  7. Arthur 19.03.2008 01:56

    Мда… Более чем скудно…

  8. Kventor 19.03.2008 10:27

    2 Arthur: Так предложите боле полный вариант! :) Что бы вы сами добавили?

  9. Наталья 06.04.2008 01:05

    У вас очень хороший и нужный сайт!

  10. Kventor 06.04.2008 09:31

    Спасибо, Наташ! :)

  11. rOOse 10.04.2008 05:59

    Тоже пользуюсь TopStyle в Windows и CSSEd в Linux, и шпаргалки в принципе не нужны, ну а если и нужна шпаргалка то пользуюсь CSS Cheat Sheet. Очень хорошая вешь. Можете посмотреть ее у меня. Кстати на TopStyle 3 версии где-то у меня лежит руссификатор, если нужен обращайтесь)

  12. rOOse 10.04.2008 06:00

    Кстати посоветовал бы вам выделить как нибудь кнопку “Отправить”, а то ее не заметно.

  13. Kventor 11.04.2008 18:11

    2 rOOse: Да, вы правы. Надо кнопку выделить поярче. Сделаем! :)

  14. oxana 03.05.2008 14:49

    Красивая игрушечка для менюшек :)
    http://www.highdots.com/css-tab-designer/

    Кстати, практикую записывать различные “костыли” в тетрадку от руки - помогает запоминать различные height’ы и прочие иностранности… наверное, механическая память помогает…

  15. Kventor 04.05.2008 14:43

    Тоже верно! :) Практика конспектирования весьма полезна в деле запоминания. Менюшки симпатичные. Спасибо за ссылочку!

  16. pocherk 27.05.2008 08:25

    Я на своем локальном компе установил форум и туда записываю всякие полезности. Очень способствует… :)

  17. Kventor 27.05.2008 08:58

    Любопытно! Форум - в качестве органайзера или записной книжки. :)

  18. pocherk 28.05.2008 07:29

    На локальном форуме информация, как в off-line библиотеке, разложена на отдельные шкафы и полочки. Легко наполнять и легко искать. Я уже этим приемом пользуюсь более 3-х лет. Рекомендую… ;-)

  19. Kventor 28.05.2008 17:28

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

  20. pocherk 29.05.2008 08:21

    Включите логику:) Если я бываю на этом сайте, то скорее всего занимаюсь разработкой сайтов. А у каждого уважающего себя веб-мастера на локальном компе должен быть установлен сервак - для обкатки скриптов и прочего.

  21. Kventor 29.05.2008 19:52

    Окей! Каждый выбирает то, что ему вкуснее. :)

  22. Elman Vebs 31.07.2008 15:58

    TopStyle Pro - Не что иное как шпаргалка. Лучшая прога по написанию CSS. Рекомендую всем!!!

Трэкбеки

Оставить комментарий