Tweet Сегодняшняя статья затронет важные…
Tweet Сегодняшняя статья затронет важные так сказать фундаментальные правила работы такой технологии как css. Сейчас в наше время мало кто, знакомиться с css фундаментально. А просто берет готовый код (благо сайтов с кучей готовых способов решения проблем валом). И если хорошо поискать, можно найти ответы почти на все вопросы. Плюс положение усугубляется тем, что есть большое количество бесплатных шаблонов. Человек скачал и меняет, что-то по мелочи. Это конечно нормально. Но вот когда хочется переделать что-то большее и возникают проблемы.
Многие не знают основных аспектов по работе с css. И потом, изменив какой-то из стилей, он либо вообще ничего не меняет либо показывает совсем не то. Вот я и хочу вам рассказать несколько правил, которые очень важно знать для продуктивной работы с технологией css. Начнем
1. Файл стилей – обычный текстовый документ
Файл с расширением «имя. css» является обычным текстовым файлом без всякой интерактивности. Очень важно, что бы вы это понимали. Вы спросите: Ну, понял и что из этого? А то, что такой файл читается всегда сверху до низа. Пример:
1 2 3 | 25. p {background: red} … 46. p {background: green} |
То параграф получит зеленую заливку. Так как она находиться ниже. Особенно важно это помнить, если вы переделываете чужую тему. Обычно стили автора опускаются ниже, а свои новенькие начинают писать сверху. Тут то и могут начаться проблемы.
2. В css работает наследование для элементов
В css есть такое дело как родительские и дочерние элементы.
Для знакомых с программированием людей это знакомо, а вот для новичков поясню. Допустим, у нас есть два элемента «div» – «on», «off». И «off» находиться внутри «on».
1 2 3 | =”on”> =”off”> … > > |
- on – родительский элемент; off – дочерний элемент;
Дочерние элементы наследуют настройки родительских (за некоторым исключением) Пример:
1 2 3 4 | ‹p›Привет‹/p› =”on”> >Пока > > |
И в файле стилей напишем:
1 | body{font-family:Verdana, Geneva, sans-serif; font-size:10px} |
Этой командой мы приказали всему тексту на странице получить шрифт: «Verdana» и размер: «10» пикселей. А теперь допишем следующее:
1 | #on{font-family:Arial, Helvetica, sans-serif; font-size:18px} |
И теперь посмотрите на результат. «Привет» написано мелким, а вот «Пока» большими и другим шрифтом. Разберем, что произошло Элемент «body» самый главный, потому что в нем располагается весь контент. И когда мы задали эму шрифт и размер. То эти параметры автоматически наследуются всеми дочерними элементами. Коим является и элемент «div» и элемент абзаца «p», который содержится в «div» – е. Но когда мы задали отдельные настройки для «div — on», то абзац внутри него получил уже правила от своего «div» – a. Вопрос: Как же узнать какие параметры наследуются для элементов?
- Можно посмотреть справочник по css. Либо воспользоваться специальными программами. Например: Firebug для Firefox.
Идем дальше!
3. Элементы имеют разный приоритет выполнения
Как видите на наш абзац с текстом «пока» влияют правила от старшего «body» и от родительского «div». Как же браузер определяет, какие настройки должны наследоваться? Для этого есть такое понятие как «приоритет». То есть кто главнее. И в данном случае «div» имеет приоритет выше, чем «body», так как является прямым родителем для абзаца со словом «Пока». Но бывает, так что родительский элемент перекрывает настройки для дочернего. И тогда заданное вами свойство для дочернего элемента не приносит никаких изменений.
Что тогда делать? Для этого в css есть специальная команда «!important» Пишется так:
1 | P{color:#000 !important, width:200px } |
Команда «!important» поднимает приоритет!
4. Осторожно не стандарт
Технология css имеет большое количество параметров. Для того, что бы все браузере могли понимать их, был создан стандарт с описанием каждого элемента. Но некоторые разработчики браузеров вносят специальные параметры, которые понимает только их детище. Якобы бы в стандарте чего-то не хватает.
А в жизни это приводит к головной боли у разработчиков web сайтов и конечных пользователей.
- Разработчику, приходиться выбирать к какому браузере подстраиваться, либо пытаться угодить всем; Пользователь, заходя на сайт который не оптимизирован под его браузер. Может увидеть черти что;
Совет: Пытайтесь меньше использовать специальные команды отдельных браузеров. Так как в других продуктах они попросту могут не работать. На этом закончу. Надеюсь, эти правила помогут вам глубже разобраться с технологией css. С уважением Тригуба Сергей! Спасибо Вам, что добавили эту статью в: Добавить в Twitter Добавить в Вконтакт Добавить в Facebook Добавить в Google buzz Добавить в Мой мир Опубликовать в своем блоге livejournal. com Приглашаю присоединиться ко мне в следующих сервисах: Присоединится ко мне в twitter Присоединится ко мне в Вконктакте Присоединится ко мне в Facebook Присоединится ко мне в Google buzz Присоединится ко мне в friendfeed Мои групы: Группа webmasterprof. ru в Facebook Группа webmasterprof. ru в Вконтакте Будь в курсе! Подпишись на обновления блога через: RSS RSS Email Email