Шпаргалка по CSS
#1
Отправлено 16 Март 2007 - 16:32
CSS Cheat Sheet
автор: 2005.04.30 Dave Child
перевод: 2005.05.13 Александр Качанов
Шпаргалка по CSS служит одновременно справочником и подсказкой. В ней перечислены все селекторы (вплоть до спецификации CSS 2.1) и свойства. В шпаргалку включен визуальный пример блочной модели, список всех единиц измерения, используемых в CSS, а также список медиа-типов, которые поддерживает CSS. Ниже в статье даны разъяснения по каждому разделу шпаргалки, но если вам невтерпеж, вы можете ее сами сразу посмотреть перейдя по ссылке:
"Шпаргалка CSS" в формате PNG 97kb.
"Шпаргалка CSS" в формате PDF 379kb.
Список свойств
В спецификации CSS упоминается куча свойств, о многих из которых очень легко забыть или перепутать. Многие свойства имеют сокращенную запись, позволяя задавать комплекс параметров одной строкой. Внешние колонки шпаргалки посвящены свойствам.
Синтаксис
Синтаксис - это одни из тех грабель, на которые наступают многие разработчики, изучая CSS. Часто новички тратят кучу времени пытаясь понять, почему не работает тот или иной стиль. И чаще всего это происходит из-за того, что допущена синтаксическая ошибка или нарушен принцип наследования.
Селекторы
Принимая во внимание все разнообразие селекторов в CSS, неудивительно, что разработчики часто путаются в них. Очень легко запутаться в селекторах "id" и "class", не говоря уже о родственных и дочерних селекторах, селекторах атрибутов, языков. Данный раздел дает список всех селекторов и показывает, к каким элементам данные селекторы применимы.
Псевдо-селекторы
Псевдо-селекторы используются для определения стилей элементов, которые либо не существуют, либо находятся в определенном состоянии. В данном разделе представлен их список.
Пожалуйста, обратите внимание, что я не упомянул в списке псевдо-селекторы :before и :after. Я посчитал, что информация о них слишком сложна, чтобы включать ее в данный список и при этом сохранить удобство работы с ним.
Медиа-типы
Одна из причин, по которым CSS является такой мощной технологией, заключается в поддержке различных типов устройств вывода данных. Этой поддержкой управляют с помощью медиа-типов. Хотя сейчас они не так популярны, наступит время, когда они станут важным элементом страниц. Данный раздел описывает различные медиа-типы, поддерживаемые CSS 2.1.
Блочная модель
С блочной моделью у новичков в CSS постоянно возникают проблемы. Помимо того, что не все ведущие браузеры правильно ее поддерживают, само определение блочной модели - довольно запутанное. Данный раздел пытается более ясно представить принцип работы блочной модели.
Единицы измерения
CSS позволяет разработчикам использовать различные комбинации единиц измерений и обозначений цветов. Это может особенно пригодиться при использовании различных медиа-типов. Данный раздел шпаргалки выводит список всех единиц измерения, поддерживаемых CSS и объясняет принцип их работы.
Наследуемые свойства
Наследование - это еще одна тема, с которой постоянно возникают проблемы, не только у новичков, но и опытных разработчиков. Элемент, расположенный внутри другого элемента, получает те же свойства, что и его родитель. Например, если вы определите шрифт для элемента <div>, а затем поместите в него элемент <span>, <span> будет выводить текст таким же шрифтом, что и <div>, если вы только явно не переопределите шрифт для <span> Однако не все свойства наследуются от "родителя" к "потомку". В данном разделе шпаргалки выведен список только тех свойств, которые наследуются.
Ну, теперь, когда вы разобрались с тем, что написано в шпаргалке, распечатайте ее.
Dave Child
#2
Отправлено 30 Апрель 2007 - 16:48
Или всё же можно обойтись без css, ведь пользователю, зашедшему на мой сайт совершенно наплевать использую я css или нет, ему нужна информация (если он, конечно, не профессионал в веб-дизайне).
Мне кажется тут можно провести аналогию с Word, где обычные пользователи (очень часто с этим встречаюсь) используют пробелы вместо табуляции, ставят циферки вручную вместо нумерованных списков и т.д. Это, конечно, не профессионально, но позволяет добиться поставленной цели.
Вобщем, просто интересно ОБЯЗАТЕЛЬНО ли использовать css?
Перейди с компьютером на ТЫ!
#3
Отправлено 30 Апрель 2007 - 16:59
Это сделано исключительно для удобства!
Но в таком случае код превратится в помойку и вы сами в нём заблудитесь.
#4
Отправлено 30 Апрель 2007 - 17:05
Перейди с компьютером на ТЫ!
#5
Отправлено 30 Апрель 2007 - 17:12
Я просто создаю в Дриме свой шаблон и на его основе верстаю все страницы. Если что-то нужно обновить - исправляю в шаблоне и все страницы вслед за ним автоматически обновляются, вместе со стилями и т.д.
А посетителям сайта все равно, использует создатель сайта CSS или нет. Для них - никаких неудобств по этому поводу... Эта технология, по-моему, имеет отношение только к верстке сайта...
Пока я отвечала, Дима уже оставил свой пост.
Опять опоздала со своим мнением...
Сообщение отредактировал Элли Камилали: 30 Апрель 2007 - 17:15
#6
Отправлено 30 Апрель 2007 - 21:32
Перейди с компьютером на ТЫ!
#7
Отправлено 01 Май 2007 - 07:29
#8
Отправлено 01 Май 2007 - 08:04
Перейди с компьютером на ТЫ!
#9
Отправлено 01 Май 2007 - 08:22
Если все стилевые параметры сайта заложены в css-файл, то он будет грузится быстрее.
Причиной этому является то, что css-файл при первой же загрузки сайта попадает в кэш.
Поэтому при дальнейшей навигации по сайту все стилевые параметры уже не будут загружаться по новой - они будут в памяти браузера.
Отсюда следует, что CSS - рулит!
Что и т.д.
#10
Отправлено 01 Май 2007 - 08:29
Перейди с компьютером на ТЫ!
#11
Отправлено 01 Май 2007 - 08:54
Ведь он же очень прост в изучении и использовании!
Если есть какие-нибудь вопросы, задавайте их, только в соответствующем разделе.
#12
Отправлено 01 Май 2007 - 11:08
А я "font'ы каждый раз не прописываю. Все параметры (шрифт, размер, цвет, выравнивание и т.д.) прописываю в стилях и помещаю их вверху страницы, а потом просто выбираю нужный стиль (см.скриншоты)Дело в том, что без стилей, при верстке таблицами и "font'ами" возникают серьезные проблемы с совместимостью браузеров.
А таблицы - да, использую часто. Но сайт в разных браузерах вроде как положено отображается... Никто не жаловался пока.
#13
Отправлено 01 Май 2007 - 11:51
Так это же и есть CSS! )) Cascade Style Sheets (вроде так) - каскадные таблицы стилей. Все эти стили - это и есть CSS. Просто их можно выносить в отдельный CSS-файл, а можно не выносить. Вот такие вот дела. Кстати, если выносите все стили в отдельный файл, это действительно ускоряет загрузку страниц.А я "font'ы каждый раз не прописываю. Все параметры (шрифт, размер, цвет, выравнивание и т.д.) прописываю в стилях и помещаю их вверху страницы, а потом просто выбираю нужный стиль (см.скриншоты)
А таблицы - да, использую часто. Но сайт в разных браузерах вроде как положено отображается... Никто не жаловался пока.
И насчет кода, о котором тут все говорили. Посмотрите мой новый сайт:
http://www.psdschool.ru
Загляните в код страницы. Он очень чист и аккуратен (вот она - моя скромность! ). CSS файл, правда, очень большим получается, если верстать на дивах и ничего лишнего в код не запихивать. Можете, кстати, этот самый CSS файл посмотреть для моего сайта:
http://www.psdschool.ru/main.css
C праздником!
#14
Отправлено 01 Май 2007 - 14:45
Так это же и есть CSS! ))
Ну дела...
А я и не подозревала... Мимоходом обнаружила.
Cascade Style Sheets (вроде так) - каскадные таблицы стилей.
Да я знаю, как расшифровывается.
Просто я в учебник по CSS никогда не заглядывала и всё время думала, что те стили, которые прописываю, можно каким-то образом "урезать" (чтобы код не очень грузить), используя CSS.
Загляните в код страницы. Он очень чист и аккуратен (вот она - моя скромность! CSS файл, правда, очень большим получается, если верстать на дивах и ничего лишнего в код не запихивать. Можете, кстати, этот самый CSS файл посмотреть для моего сайта:
http://www.psdschool.ru/main.css
Посмотрела... Молодец, Кирилл!
#15
Отправлено 17 Март 2008 - 18:12
А мета-тэги на каждой странице прописываете или один раз на все в основном шаблоне?
#16
Отправлено 17 Март 2008 - 20:44
А мета-тэги на каждой странице прописываете или один раз на все в основном шаблоне?
Мета я не прописываю.
Ну а так, то, конечно, в каждой страничке нужно прописывать. Содержание страничек-то разное и если оптимизировать, то каждую страничку отдельно.
#17
Отправлено 30 Январь 2009 - 14:49
#18
Отправлено 30 Январь 2009 - 20:57
Эх-эх, давно такое искал, а ссылка не рабочая
Какая ссылка нерабочая?..
#19
Отправлено 04 Февраль 2009 - 10:39
"Шпаргалка CSS" в формате PNG 77Kb
"Шпаргалка CSS" в формате PDF 316Kb
#20
Отправлено 06 Май 2011 - 05:18
Есть такой анекдот:Я, например, не использую. Знаю, что эта технология совсем не сложна и очень облегчает работу со страницами сайта, но времени на ее освоение катастрофически не хватает. Тут с основными делами еле справляешься...
Я просто создаю в Дриме свой шаблон и на его основе верстаю все страницы. Если что-то нужно обновить - исправляю в шаблоне и все страницы вслед за ним автоматически обновляются, вместе со стилями и т.д.
А посетителям сайта все равно, использует создатель сайта CSS или нет. Для них - никаких неудобств по этому поводу... Эта технология, по-моему, имеет отношение только к верстке сайта...
Пока я отвечала, Дима уже оставил свой пост.
Опять опоздала со своим мнением...
Мужик лихорадочно пилит тупой пилой дерево, процесс идет туго, мужик мокрый как мышь.
Сосед ему:
- Мужик, ты заточи пилу, дело нормально пойдет!
- Нет времени точить, пилить надо!
Наточите пилу - выучите css.Это займет пару дней, зато сэкономит вам огромное количество времени в будущем.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 скрытых пользователей