Сегодняшняя статья затронет важные так сказать фундаментальные правила работы такой технологии как 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 | <div id=”on”> <div id=”off”> … </div> </div> |
- on – родительский элемент;
- off – дочерний элемент;
Дочерние элементы наследуют настройки родительских (за некоторым исключением)
Пример:
1 2 3 4 | ‹p›Привет‹/p› <div id=”on”> <p>Пока</p> </div> |
И в файле стилей напишем:
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.
С уважением Тригуба Сергей!
Мои групы:
