Основы CSS. Базовые понятия

Прежде чем переходить к дальнейшему рассмотрению HTML, в частности тега <body>, необходимо разобраться, хотя бы, с основными понятиями CSS.

CSSИтак, CSS (Cascading Style Sheetsкаскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки, в основном это будет HTML. Или, другими словами — это технология, которая позволит изменять цвета, стиль шрифта, размер блоков (элментов, тегов языка HTML).

Для чего придумли CSS?

Так как HTML никогда не предназначался для отображения внешнего вида документа, а был предназначен только для определения содержания (или схемы) документа, но не для указания того, какие цвета или шрифты использовать для отображения того или иного элемента (блока) в документе, например:

<h1>Это заголовок</h1>
<p>Это абзац.</p>

Здесь тег <h1> показывает, что текст внутри него будет заголовком, без указания каким стилем его отобразить. Точно таким же образом, тег <p> указывает бразуеру, что текст внутри него является абзацем.

Когда теги визуализации, такие как <font>, и цветовые атрибуты были добавлены в спецификацию HTML 3.2, начался кошмар для веб-разработчиков. Развитие больших веб-сайтов, где шрифты и цветовую информацию необходимо было добавлять на каждую страницу, стало долгим и дорогостоящим процессом.

Для решения этой проблемы, World Wide Web Consortium (W3C) создал CSS.

В спецификации HTML 4.0, все форматирование может быть удалено из документа HTML, и храниться в отдельном файле CSS. Это очень удобно, так как, если будет необходимо поменять внешний вид, например, всех обзацев на всех страницах сайта, то для этого достаточно всего лишь изменить несколько строчек в CSS классе, а не перелопачивать сотни и даже тысячи страниц вебсайта для внесения изменнений во внешний вид. На сегодняшний день, все современные браузеры поддерживают CSS.

При рендеринге страницы, стили для ее отображения, могут быть взяты из нескольких источников:

  • Авторские стили — стили, которые указал разработчик веб страницы, они могут быть указаны несколькими способами:
    • Внешняя таблица стилей — располагается во внешнем файле стилей, с расширением .css, и подключается к документу, при помощи ссылки на внешний файл, расположенной в секции <head> HTML-документа.
    • Встроенные стили — блоки CSS располагаются внутри самого HTML-документа, опять же в секции <head>.
    • Inline-стили — указание стиля элемента непосредственно в определенном элементе, а точнее в его атрибуте style.
  • Пользовательские стили — стили изменные конечным пользователем вручную
    • Локальный CSS-файл — пользователь, указывает в настройках браузера путь к CSS файлу из которого браузер должен брать стили. При этом данный файл переопределяет авторские стили, и применяемый ко всем документам.
  • Стиль браузера — стили, которые заложены в браузере для элементов по умолчанию
    • Стандартный стиль, используемый браузером по умолчанию для представления элементов.

Таблица стилей состоит из набора правил. Правила состоят из селекторов, в которых описываются непосредственные свойства и их значения для данного селектора, или группы селекторов.

Например:

div, p {
  font-family: "Arial", sans-serif;
  color: red;
  background: white;
}

данный набор стилей определяет семейство шрифтов, цвет текста и его фон ко всем элементам заключенным в теги <div> и <p>. Таким образом можно переопределить отображение любого тега в HTML документе.

Думаю, что для начального знакомстав с CSS, данной информации будет достаточно.


Намного удобнее за компом, когда тебе не мешают провода. При использовании wi-fi сетей, одним кабелем становиться меньше, и радость от работы в сети интернет возрастает.


Категории: Верстка, HTML, CSS  Теги: , ,
  1. Трэкбеков пока нет.
  1. Sultan
    21 августа 2014 20:18 | №1

    Спасибо за полезную информацию успехов вам на сайте

:D :) ^_^ :( :o 8) ;-( :lol: xD :wink: :evil: :p :whistle: :woot: :sleep: =] :sick: :straight: :ninja: :love: :kiss: :angel: :bandit: :alien: