Разработка сайтов, программирование, верстка

Часто при верстке бывают ситуации, когда надо знать какое именно CSS правило имеет больший приоритет нежели другое. Такое часто бывает, когда надо написать правило, которое бы перебило уже написанное. 

Итак, что нужно знать: приоритет правил определяет так называемое специфичность. Ее можно определить четырьмя цифрами. Например 0.0.1.3. Как их определить? Очень просто. 

  • Каждое название элемента имеет вес 0.0.0.1
  • Каждый класс, псевдо-класс, аттрибут имеет вес 0.0.1.0
  • Каждый id имеет вес 0.1.0.0
  • Правило, написанное непосредственно в коде элемента имеет вес 1.0.0.0

Приведем несколько примеров:

div ul ul li - 0.0.0.4 Четыре элемента

div.aside ul li - 0.0.1.3 Один класс и три элемента

a:hover - 0.0.1.1  Один элемент и один псевдо-класс

div.navlinks a:hover - 0.0.2.2  Класс, псевдо-класс и два элемента

#title em - 0.1.0.1 Идентификатор и элемент

h1#title em Идентификатор и два элемента 

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

Теперь про !important. Это слово означает, что специфичность перестает действовать на данное правило. Оно будет применено в любом случае. Более интересный момент когда два правила помечены этим ключевым словом. Тогда специфичность опять начинает иметь значение. 

В общем это все что надо знать о приоритете правил CSS. Надеюсь материал был для вас полезен. 

Комментариев(0)

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

Одной из преград к документированию кода для меня было то, что я не знал как это правильно делать. Но тут меня выручил замечательный стандарт Docblock. В нем описывается как надо правильно писать комментарии к коду, чтобы он был не только легко читаем человеком, но и понимался различными IDE для формирования всплывающих подсказок. 

Комментариев(1)

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

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

Развивается только то, что тренируется (с) Не помню кто

Свои знания надо постоянно расширять. В каждом новом проекте делайте что-то новое для себя. Осваивайте новые горизонты. Это может быть что-то маленькое, так и что-то большое. Главное чтобы каждая новая работа давала что-то в вашу личную копилку знаний. 

Читайте книжки, внимательно читайте. Они расширяют ваш кругозор. Дают новые решения старых вопросов, а также дает вам решения проблем, которые еще даже не стояли перед вами. Возможно при чтении какой-либо книги у вас родиться гениальная идея вашего собственного проекта. 

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

"а то ли я делаю?". "Могу ли я эффективнее потратить свое время?" "Приближает ли то, что я делаю к моим целям?" Об этом всегда надо помнить. 

Трудоголизм - интеллектуальная лень (с) Rework

Что-то я отвлекся :) На этом и закончу. 

Комментариев( 2 )

В данной статье речь пойдет про CSS-селекторы. Будут рассмотрены как старые селекторы, которые поддерживает даже IE6, так и совсем новые CSS3 селекторы, которые поддерживают только последние версии браузеров. Итак, начнем.

1. *

* { margin: 0; padding: 0; }

Начнем с самого простого, а потом уже перейдем к более продвинутым вещам.

Этот селектор выделяет каждый элемент на странице. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding. На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот селектор слишком сильно грузит броузер.

* также можно использовать для выделения дочерних элементов.

#container * { border: 1px solid black; }

В данном случае выделяться все дочерние элементы #container. Опять же, старайтесь не злоупотреблять им.

Демо

Совместимость

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera
Комментариев( 18 )

то руководство поможет вам настроить гибкий, мощный блог на MODx Revolution. В связи с тем, что MODx Revolution является не платформой для блогов, а полномасштабной системой для веб-приложений, то безразличных надстроек она не содержит готового решения для ведения блогов. Вам для этого необходимо настроить систему самостоятельно.

К счастью, инструменты для этого уже существуют. Данная статья поможет вам в них разобраться. Предполагается, что вы уже знакомы с синтаксисом тэгов MODx Revolution.

Прежде чем мы начнем, надо сказать: статья довольно объемная, рассказывает о создании действительно мощного блога с системой постинга, архивами, тэгами, комментариями и т.д. Если вам не нужна какая-либо конкретная часть из перечисленного, то просто пропустите конкретный раздел. MODx является модульной системой, и ваш блог может работать так как вам хочется, надо просто установить и настроить определенный модуль. Еще раз скажу, тут описан только один из способов создания блога на MODx Revolution. Помимо него есть еще множество других способов.

Эта статья создавалась на основе блога splittingred.com. Этот сайт можно использовать как пример.

Комментариев( 22 )