Все о HTML и CSS

Здесь вы найдете много полезной информации о том как построить собственный сайт, как правильно верстать Web страницы, а также освоите множество приемов и трюков которые можно выполнить при помощи CSS, без использования Java-скриптов. Данный сайт будет полезен как новичку, так и опытному Web Мастеру.

Приветствую Вас Гость | Регистрация | Вход
МЕНЮ
КАЛЕНДАРЬ
«  Март 2009  »
ПнВтСрЧтПтСбВс
      1
2345678
9101112131415
16171819202122
23242526272829
3031
КАТЕГОРИИ УРОКОВ
HTML [8]
Тут уроки только по HTML
CSS [15]
Уроки только по CSS
Верстка дизайнов [0]
Верстка собственных дизайнов
Статьи [9]
Статьи о веб дизайне и не только
Скрипты [82]
Скрипты CSS
Что же такое CSS (Каскадные Таблицы Стилей)?
Что же такое CSS (Каскадные Таблицы Стилей)?

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

Обзор

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими Шрифт Брайля.

CSS при отображении страницы может быть взята из различных источников:


  • Авторские стили (информация стилей, предоставляемая автором страницы) в виде:


    • Внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе.

    • Встроенных стилей — блоков CSS внутри самого HTML-документа.

    • Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style.


  • Пользовательские стили


    • Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам.


  • Стиль браузера


    • Стандартный стиль, используемый браузером по умолчанию для представления элементов.

    Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.

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

    Схематически это можно показать так:

    Code

    селектор, селектор {
      свойство: значение;
      свойство: значение;
      свойство: значение;
    }

    Например:

    Code

    p {
      font-family: "Garamond", serif;
    }
    h2 {
      font-size: 110 %;
      color: red;
      background: white;
    }
    .note {
      color: red;
      background: yellow;
      font-weight: bold;
    }
    p#paragraph1 {
      margin: 0;
    }
    a:hover {
      text-decoration: none;
    }
    #news p {
      color: blue;
    }

    Здесь приведено шесть правил с селекторами p, h2, .note, p#paragraph1, a:hover и #news p.

    В первых двух правилах HTML-элементам p (параграфу) и h2 (заголовку второго уровня) назначаются стили. Параграфы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем (от нем. kegel — переводится как размер высоты буквы, включая нижнее и верхнее заплечики у этой буквы или знака..

    Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'. Например:

    Code
    <p class="note">Этот параграф будет выведен полужирным шрифтом красного цвета на желтом фоне.</p>

    Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).

    Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.

    Последнее, шестое правило, применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным «news».

    CSS-вёрстка
    До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

    Преимущества CSS вёрстки:


    • Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.

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

    • Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.

    • Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.

    История
    CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web». В 90-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML и стандарт CSS.

    Уровень 1 (CSS1)

    Рекомендация W3C принята 17 декабря 1996, откорректирована 11 января 1999. Среди возможностей, предоставляемых этой рекомендацией были:


    • Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.

    • Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.

    • Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)

    • Выравнивание для текста, изображений, таблиц и других элементов.

    • Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.

    • И другое…

    Уровень 2 (CSS2)

    Рекомендация W3C принята 12 мая 1998. Построена на CSS1 с сохранением обратной совместимости.

    Добавление к функциональности:


    • Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной верстки

    • Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК)

    • Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта)

    • Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати

    • Расширенный механизм селекторов

    • Указатели

    • Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента

    • И другое…

    Уровень 2.1 (CSS2.1)

    Рабочая версия W3C от 6 ноября 2006. Построена на CSS2, содержит исправления ошибок.

    Уровень 3 (CSS3)

    Рабочая версия. Сильно расширенна по сравнению с предыдущими версиями. Нововведения начиная с малых вроде закругленных углов div'ов, заканчивая трансформацией (анимацией) и введением переменных (variables).

    Включение в HTML

    CSS можно включать в HTML четырьмя способами:


    • Лишь ссылка в HTML, а сами CSS в отдельном файле (наиболее предпочтителен):

    Code

    <link rel="stylesheet" type="text/css" href="style.css">


    • Еще один способ подключить CSS, находящиеся в отдельном файле:

    Code

      <style type="text/css" media="all">@import "style.css";</style>


    • Непосредственно в HTML-документе:

    Code

    <style type="text/css">
      body {
      color: red;
      }
      </style>


    • Непосредственно в элемент:

    Code

    <p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>

    XHTML
    Для включения CSS в XML существует ещё один способ:

    Code

    <?xml-stylesheet href="style.css" type="text/css"?>

    Поддержка браузерами

    Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox и др.) и WebKit (Safari), а также браузер Opera. К сожалению, самый распространенный на данный момент браузер Internet Explorer 6 поддерживает CSS далеко не полностью. Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS, но всё ещё содержит значительное количество ошибок

    Для проверки поддержки браузером различных частей стандарта CSS был разработан тест «Acid». Его вторая версия называется «Acid2», а третья, соответственно, «Acid3»

    Различные блоковые модели

    В стандартах CSS от Консорциума W3C используется модель, в которой свойство width определяет ширину содержимого блока, не включая в нее отступы и рамки. Ранние версии Internet Explorer (4 и 5), реализовали собственную модель, в которой width определяет расстояние между рамками блока, включая отступы (padding) и рамки (border). Кроме Internet Explorer 5 эту модель так же понимают браузеры Netscape 4 и Opera 7. Поддержка стандартной модели W3C появилась в IE только в шестой версии.

    В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство box-sizing, со значениями content-box для указания на использование стандартной модели W3C и border-box для использования модели IE 5.

    В браузере Mozilla, при поддержке этого свойства, под собственным «рабочим» названием -moz-box-sizing, ввели еще одно значение — padding-box, таким образом создав третью блочную модель, в которой width это размер содержимого и отступов блока, не включая рамки.

    CSS-фильтры

    Различия в реализации CSS различными браузерами заставляют веб-разработчиков искать решения, как заставить все браузеры отображать страницу одинаково. CSS-фильтры (также часто называемые CSS-хаками) позволяют выборочно применять (или не применять) стили к различным элементам. Например, известно, что Internet Explorer 6 применяет правила, использующие селекторы вида * html селектор (фильтр, известный как «star html bug»). Тогда, чтобы заставить и браузеры, использующие блоковую модель W3C и IE, работающего в Quirks mode со своей блоковой моделью, отображать блок #someblock шириной в 100 пикселей и внутренними отступами в 10 пикселей можно написать такой код:

    Code

    /* Модель W3C - 80px ширина содержимого и 10px отступы с каждой стороны */
    #someblock { width: 80px; padding: 10px; }

    Code

    /* Следующее правило применит только IE6. */
    * html #someblock { width: 100px; padding: 10px; }

    Ещё одним способом выборочного применения правил для Internet Explorer являются условные комментарии.
    Категория: Статьи | Просмотров: 1861 | Добавил: Red_Line666x | 16:13 | Рейтинг: 0.0/0 |
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    © 2008-2017 Школа HTML и CSS. Все права защищены.
    При копировании материалов с данного сайта, гиперссылка на http://school-html-css.3dn.ru/ ОБЯЗАТЕЛЬНА! Вся информация защищена законами о защите авторских правах.
    Полную информацию о копировании материалов читайте в разделе "Правила копирования информации"