#Урок 3. Основные правила CSS

Таблица стилей CSS – не является решением всех проблем, которые связаны с оформлением HTML страниц, и CSS не избавит вас от всех трудностей оформления дизайна, но CSS позволит упростить внесение изменений в HTML документ.

Основная особенность CSS в том, что таблица стилей позволяет изменять и применять определенные правила для каждого элемента сформированного браузером. Например, возьмем снова HTML список, маркированный, который формируется с помощью тегов <ul> и <li>:

Выглядит созданный нами список вот так:

  • Пункт 1
  • пункт 2
  • пункт 3
  • пункт 4

 

 

Допустим, что нам нужно сделать цвет текста каждого пункта оранжевым, в самом HTML для таких задач есть тег <font>, у которого есть значение color

Так будет выглядеть наш список теперь:

  • Пункт 1
  • пункт 2
  • пункт 3
  • пункт 4

Согласитесь, так писать для каждого пункта тег font и задавать атрибут color будет нудновато, особенно если их будет не 4, а больше, а если через какое-то время будет необходимость поменять цвет?

Для таких ситуаций и существует CSS, но чтобы код получился эффективен, нужно знать некоторые CSS правила. CSS – технология, которая позволяет создать собственные правила отображения элементов в браузере, эти правила легко и быстро можно изменять и применять к любым элементам веб-страницы. Сейчас предлагаю вернемся к примеру и посмотреть, насколько быстрее и проще можно изменить правила отображения элементов <li>. HTML документ будет выглядеть точно так же, как и в первом варианте.

А оформление мы выносим в отдельный документ с расширением .css, как мы делали в предыдущем уроке. И так:

Это CSS правило позволит сделать текст всех элементов <li> на странице оранжевым. Более того, можно поменять цвета всех пунктов списка, просто изменив одну строку в файле css и забыть о теге <font>. Чтобы изменить цвет пунктов нашего списка, мы просто меняем правило CSS и все.

Комментарии закрыты.