CSS — важные правила

CSS важные правилаСегодняшняя статья затронет важные так сказать фундаментальные правила работы такой технологии как 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.

С уважением Тригуба Сергей!

Автор:
Приглашаю присоединиться ко мне в следующих сервисах:
Получайте новые статьи по созданию сайтов на ваш почтовый ящик.

Комментарии Вконтакте:

Комментарии Facebook:

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

Надо серьезно изучать CSS , а то так и буду шаблоны улучшать по капле(. Купил прогу Веббуилдер 2014 там есть все навороты, думаю облегчит понимание и работу

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет