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

Страница 1 из 1
1

Шпаргалка по CSS (sml[idea])

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

Сикарашка

10.06.2010, Четверг в 01:31

Сообщение #1

Шпаргалка по CSS служит одновременно справочником и подсказкой. В ней перечислены все селекторы (вплоть до спецификации CSS 2.1) и свойства. В шпаргалку включен визуальный пример блочной модели, список всех единиц измерения, используемых в CSS, а также список медиа-типов, которые поддерживает CSS. Ниже в статье даны разъяснения по каждому разделу шпаргалки, но если вам невтерпеж, вы можете ее сами сразу посмотреть перейдя по ссылке:
Шпаргалка CSS
Список свойств

В спецификации CSS упоминается куча свойств, о многих из которых очень легко забыть или перепутать. Многие свойства имеют сокращенную запись, позволяя задавать комплекс параметров одной строкой. Внешние колонки шпаргалки посвящены свойствам.

Синтаксис

Синтаксис - это одни из тех грабель, на которые наступают многие разработчики, изучая CSS. Часто новички тратят кучу времени пытаясь понять, почему не работает тот или иной стиль. И чаще всего это происходит из-за того, что допущена синтаксическая ошибка или нарушен принцип наследования.

Селекторы

Принимая во внимание все разнообразие селекторов в CSS, неудивительно, что разработчики часто путаются в них. Очень легко запутаться в селекторах "id" и "class", не говоря уже о родственных и дочерних селекторах, селекторах атрибутов, языков. Данный раздел дает список всех селекторов и показывает, к каким элементам данные селекторы применимы.

Псевдо-селекторы

Псевдо-селекторы используются для определения стилей элементов, которые либо не существуют, либо находятся в определенном состоянии. В данном разделе представлен их список.

Пожалуйста, обратите внимание, что я не упомянул в списке псевдо-селекторы :before и :after. Я посчитал, что информация о них слишком сложна, чтобы включать ее в данный список и при этом сохранить удобство работы с ним.

Медиа-типы

Одна из причин, по которым CSS является такой мощной технологией, заключается в поддержке различных типов устройств вывода данных. Этой поддержкой управляют с помощью медиа-типов. Хотя сейчас они не так популярны, наступит время, когда они станут важным элементом страниц. Данный раздел описывает различные медиа-типы, поддерживаемые CSS 2.1.

Блочная модель

С блочной моделью у новичков в CSS постоянно возникают проблемы. Помимо того, что не все ведущие браузеры правильно ее поддерживают, само определение блочной модели - довольно запутанное. Данный раздел пытается более ясно представить принцип работы блочной модели.

Единицы измерения

CSS позволяет разработчикам использовать различные комбинации единиц измерений и обозначений цветов. Это может особенно пригодиться при использовании различных медиа-типов. Данный раздел шпаргалки выводит список всех единиц измерения, поддерживаемых CSS и объясняет принцип их работы.

Наследуемые свойства

Наследование - это еще одна тема, с которой постоянно возникают проблемы, не только у новичков, но и опытных разработчиков. Элемент, расположенный внутри другого элемента, получает те же свойства, что и его родитель. Например, если вы определите шрифт для элемента <div>, а затем поместите в него элемент <span>, <span> будет выводить текст таким же шрифтом, что и <div>, если вы только явно не переопределите шрифт для <span> Однако не все свойства наследуются от "родителя" к "потомку". В данном разделе шпаргалки выведен список только тех свойств, которые наследуются.

Сикарашка

10.06.2010, Четверг в 01:42

Сообщение #2

Шпаргалка по CSS (версия 2)

Скачать

Шпаргалка по CSS-3
Скачать

гоблин84

13.07.2010, Вторник в 21:45

Сообщение #3

и зачем это

Добавлено (13.07.2010, 21:45)
---------------------------------------------
смотрел и нехрена не понял

Сикарашка

21.12.2015, Понедельник в 15:23

Сообщение #4

@1.png

Код

    img:hover[title~=Ответить] {background:#333 url("http://omega-team.ucoz.kz/for_forums/images/forum_butons/t_reply_gif_hover.png") repeat-x scroll 0 0; z-index: 777;position: relative;}
    img[title~=Ответить] {position: relative; z-index: 4;}
    #frmButns83 {position: relative; z-index: 1;}
    a[href="#post"] {position: relative; z-index: 2;}
    a:hover[href="#post"] {position: relative; z-index: 3;}

Так можно добавлять стили любому объекту.

Сикарашка

21.12.2015, Понедельник в 15:38

Сообщение #5

@1.png
Чтобы статья не была утомительной, пробегусь тезисами по основным моментам. Итак, стиль страницы можно подгружать как из отдельного файла с помощью тега link

Код

так и с помощью тега style (для Blogger - в шаблоне )

Код

или атрибута style, которым не рекомендуется злоупотреблять, поскольку это усложняет поиск нужного фрагмента для корректировки и ведёт к повышению времени загрузки страницы в браузере, то есть стили желательно прописывать до

Код

<div style=" ... ... ... "> контент </div>

Стили выполняются в том же порядке, в котором читаются: сверху вниз, слева направо.
Например

Код

<html>
  <head>
    <title>Как использовать css</title>
    <style type="text/css">
      div {
        color: green;
        color: red; /* если бы не был указан атрибут style, то цвет текста был бы красным, а не зелёным */
      }
    </style>
  </head>
  <body>
    <div style="color: blue;">синиц цвет текста</div>
  </body>
</html>

При одновременном использовании id и class, приоритет будет отдан id.

Код

Приоритет отдаётся более узкой записи

Код

id в отличии от class нельзя использовать два раза
Не правильно

Код

Правильно

Код

Оптимально. Объединяем два элемента через запятую, поскольку они имеют одинаковые стили

Код

Может быть и так

Код

И совсем другой результат при отсутствии запятой

Код

Контекстные селекторы (второй пример)

Код

div { color: red; }
div p { color: red; }

Отличия между ними очевидны. Первой строкой мы задаем красный цвет для всех div, второй - только для содержимого тега p в div.

Код

<div> содержимое </div>
<div> содержимое <p> содержимое </p> </div>

Есть ли различия между этими двумя вариантами?

Код

.demo { color: red; }
p.demo { color: red; }

Первый ведёт к изменению в любых тегах, помеченных классом demo

Код

<div class="demo"> содержимое </div>
<p class="demo"> содержимое </p>

Второй будет применён только к тегу p с class="demo"

Код

<div class="demo"> содержимое </div>
<p class="demo"> содержимое </p>

Каковы различия между

Код

.demo p { color: red; }
p.demo { color: red; }

В первом случае только теги p, содержащиеся в контейнере с классом demo, будут иметь красный цвет

Код

<div class="demo">
  <p> красная палитра </p>
  <span> любого другого цвета </span>
  <p> красная палитра </p>
</div>

Во втором для любого тега p с данным классом (см. выше).

Аналогично с псевдоклассом :hover (изменения производятся при наведении мышки).

Код

И второй способ.

Код

Между ними нет различия.

Код

Код

Стили применяются только для тега с определённым атрибутом.

Код

Если свойство состоит из нескольких параметров, то разделять их должны пробелы.

Код

div {
background: #AAA url() no-repeat left top;
}

Вот этот вариант не будет функционировать в IE, поскольку нет пробела между url()no-repeat:

Код

div {
background: #AAA url()no-repeat left top;
}

Все свойства заканчиваются точкой с запятой (;)

Код

a {
  color: #AAA;
  outline: none;
  text-decoration: underline;
}

Комментарии в CSS выглядят иначе, нежели в HTML.

Код

В тег