Tweet Сегодняшняя статья затронет важные...

Tweet Сегодняшняя статья затронет важные так сказать фундаментальные правила работы такой технологии как css. Сейчас в наше время мало кто, знакомиться с css фундаментально. А просто берет готовый код (благо сайтов с кучей готовых способов решения проблем валом). И если хорошо поискать, можно найти ответы почти на все вопросы. Плюс положение усугубляется тем, что есть большое количество бесплатных шаблонов. Человек скачал и меняет, что-то по мелочи. Это конечно нормально. Но вот когда хочется переделать что-то большее и возникают проблемы.

Tweet Сегодняшняя статья затронет важные...

Многие не знают основных аспектов по работе с css. И потом, изменив какой-то из стилей, он либо вообще ничего не меняет либо показывает совсем не то. Вот я и хочу вам рассказать несколько правил, которые очень важно знать для продуктивной работы с технологией css. Начнем

1. Файл стилей – обычный текстовый документ

Файл с расширением «имя. css» является обычным текстовым файлом без всякой интерактивности. Очень важно, что бы вы это понимали. Вы спросите: Ну, понял и что из этого? А то, что такой файл читается всегда сверху до низа. Пример:

1 2 3 25. p {background: red} … 46. p {background: green}

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

2. В css работает наследование для элементов

В css есть такое дело как родительские и дочерние элементы.

Tweet Сегодняшняя статья затронет важные...

Для знакомых с программированием людей это знакомо, а вот для новичков поясню. Допустим, у нас есть два элемента «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», так как является прямым родителем для абзаца со словом «Пока». Но бывает, так что родительский элемент перекрывает настройки для дочернего. И тогда заданное вами свойство для дочернего элемента не приносит никаких изменений.

Tweet Сегодняшняя статья затронет важные...

Что тогда делать? Для этого в css есть специальная команда «!important» Пишется так:

1 P{color:#000 !important, width:200px }

Команда «!important» поднимает приоритет!

4. Осторожно не стандарт

Технология css имеет большое количество параметров. Для того, что бы все браузере могли понимать их, был создан стандарт с описанием каждого элемента. Но некоторые разработчики браузеров вносят специальные параметры, которые понимает только их детище. Якобы бы в стандарте чего-то не хватает.

Tweet Сегодняшняя статья затронет важные...

А в жизни это приводит к головной боли у разработчиков web сайтов и конечных пользователей.

    Разработчику, приходиться выбирать к какому браузере подстраиваться, либо пытаться угодить всем; Пользователь, заходя на сайт который не оптимизирован под его браузер. Может увидеть черти что;

Совет: Пытайтесь меньше использовать специальные команды отдельных браузеров. Так как в других продуктах они попросту могут не работать. На этом закончу. Надеюсь, эти правила помогут вам глубже разобраться с технологией css. С уважением Тригуба Сергей! Спасибо Вам, что добавили эту статью в: Добавить в Twitter Добавить в Вконтакт Добавить в Facebook Добавить в Google buzz Добавить в Мой мир Опубликовать в своем блоге livejournal. com Приглашаю присоединиться ко мне в следующих сервисах: Присоединится ко мне в twitter Присоединится ко мне в Вконктакте Присоединится ко мне в Facebook Присоединится ко мне в Google buzz Присоединится ко мне в friendfeed Мои групы: Группа webmasterprof. ru в Facebook Группа webmasterprof. ru в Вконтакте Будь в курсе! Подпишись на обновления блога через: RSS RSS Email Email

Понравилась статья? Получай обновления и будь всегда в курсе событий!
Подпишись на RSS или
blog comments powered by Disqus