Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
Facebook 0 Likes
Twitter 0 Followers
Instagram 0 Followers
Pinterest 0 Followers
YouTube 0 Subscribers
Подписаться
Маркетер
Маркетер
  • Маркетинг
  • Digital
  • Реклама
  • Public Relations
  • Менеджмент
  • Новости
  • CSS

История про CSS (часть I)

  • 29.03.2001
Total
0
Shares
0
0
0
0
0
0

Автор статьи: Мельников Михаил

Поговорим о каскадных таблицах стилей. Их применение позволяет перейти на новый уровень создания сайтов и добиваться нужных эффектов оформления более простыми и логичными способами.

Для чего нужны таблицы стилей?

Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.
Как мы помним, в первых версиях стандарта HTML не было предусмотрено никаких средств для управления внешним видом информации. Общая концепция гипертекста была направлена на доступность информации для любых устройств, способных воспроизводить текст. Для разметки рекомендовалось использовать только логические теги, определяющие заголовки, подзаголовки, списки, абзацы, цитаты и т.д. – то есть, те элементы, которые и составляют структуру документа. Интерпретация же внешнего вида оставалась полностью на совести оконечного терминала.
Однако с тех пор много что изменилось, и стандарт HTML потерял первоначальную стройность. Вначале Netscape добавил “улучшенные теги”, которые позволили более широко управлять внешним видом представляемой информации. Нововведение прижилось, и все расширения Netscape стали стандартом de facto. Потом точно также поступила Microsoft. Когда спохватились, то HTML представлял собой ужасную смесь логических и оформительских тегов, несовместимых расширений и полностью перестал отвечать первоначальной концепции – представлять информацию на любом устройстве независимо от его характеристик по выводу информации.
Тогда была предпринята широкомасштабная стандартизация. В результате чего на свет явился стандарт HTML 3.2. Он не был революционным, а лишь расставил по местам все нововведения и выработал общие рекомендации для производителей броузеров. Революционные изменения были введены в новом стандарте – HTML 4.0 или, как его стали называть, Dynamic HTML. В обращение были введены слои, таблицы стилей и универсальная объектная модель броузера.
В новом стандарте попытались вернуться к истокам концепции HTML. Четвертая версия, как и первая, рекомендует создавать странички таким образом, чтобы они могли быть воспроизведены на любом устройстве – будь это 21″ монитор или маленький черно-белый экран сотового телефона.
Каким же образом была решена проблема с представлением внешнего вида информации? В этом и заключается революционность подхода. Все оформление рекомендуется вынести во внешний стилевой файл. Основная же страничка будет содержать только информацию и ссылки на необходимые стили.
При показе странички конкретному устройству должна быть задействована соответствующая случаю таблица стилей. Для сотового телефона и монитора компьютера они, разумеется, должны быть разными. В первом случае мы используем минимальное оформление, которое позволит представить информацию наиболее оптимально и компактно. Во втором же случае в нашем распоряжении имеется все богатство шрифтового и цветового оформления.
Таблицу стилей нужно написать всего один раз при создании сайта для каждого из устройств, на котором планируется вывод информации. К тому же таблица стилей может быть единой для целого сайта. И, следовательно, не нужно будет повторять одни и те же описания стилей на каждой из страниц.
Размещение всей стилевой информации в одном внешнем файле открывает нам и другие полезные возможности – ведь изменив содержимое только одного (!) стилевого файла, мы можем в считанные секунды сменить весь дизайн сайта. Причем никаких других переделок не понадобится. Разумеется, это верно лишь в том случае, если первоначально сайт был спроектирован верно.
Разобравшись немного с теорией, давайте переходить к практике, и начнем мы с вопроса подключения таблицы стилей к HTML-файлу.

Подключение таблиц стилей

Для осуществления этой задачи мы можем воспользоваться одним из 3-х предлагаемых методов:

  • внешний файл
  • описание в секции заголовка
  • inline-описание

    Начнем с самого простого, с так называемого inline-описания или описания, встроенного в тег:

    <p style=”color:red; text-align:center;”> Этот текст переопределен стилем</p>

    При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый легкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания внешнего вида при помощи тега .
    Гораздо удобнее заранее определить все нужные стили оформления и впоследствии просто применять их к соответствующим тегам. Это будет второй способ – описание в секции заголовка. Его действие распространяется на всю страничку. Определение стилей происходит при помощи классов, которые представляют собой списки с определением всех необходимых параметров оформления.

    При использовании этого метода описание стилей необходимо разместить в секции заголовка:

    <head>
    ….
    <style type=”text/css”>
    <!–
    .header { text-align : center; font-size : 27pt;}
    .red { color : red; }
    –>
    </style>
    </head>

    Теперь эти стили можно применять в любом месте html-кода. Для этого используется следующая конструкция:

    <p class=header>Этот текст написан стилем header<p>
    <p class=red>Этот текст написан красным цветом<p>

    Как видите, все не так уж сложно. Главное понять основные принципы. Кроме определения новых классов мы также имеем возможность переопределять стандартные теги. Например, тег <p>:

    <style type=”text/css”>
    <!–
    p { text-align : center; font-size : 12pt;}
    –>
    </style>

    Теперь весь текст, заключенный в теги <p></p>, будет выглядеть так, как определено данным стилем. Это очень удобно и позволяет легко адаптировать уже существующие странички к использованию стилей. Кроме того, это несколько уменьшает объем файла за счет отсутствия лишних атрибутов class.

    И наконец, третий способ – вынесение описания стилей во внешний файл. Диапазон его воздействия простирается на все файлы, в которые включено описание. Это способ наиболее соответствует концепции HTML 4.0. В случае, если нам потребуется изменить внешний вид сайта, то будет достаточно скорректировать лишь один этот файл. Сравните его с предыдущими способами. В одном из них придется менять описание на каждой страничке, а в другом даже более того – около каждого тега, что, разумеется, совершенно не вдохновляет.
    Каким же образом производится внедрение внешнего файла? Для начала создается стилевой файл с описанием всех нужных нам классов (mystyle.css):

    .header { text-align : center; font-size : 27pt;}
    .red { color : red; }
    p { text-align : center; font-size : 12pt;}

    А потом ссылка на него внедряется в документ при помощи тега :

    <head>
    ….
    <link rel=”stylesheet” type=”text/css” href=”css/mystyle.css” title=”MyStyleSheet”>
    ….
    </head>

    Это самый удобный способ, и для основной таблицы стилей рекомендуется пользоваться именно им.
    Почему я сказал “основной”? Дело в том, что на практике приходится пользоваться всеми тремя способами, и здесь в игру вступает “каскадность” стилей. Но об этом мы поговорим уже в следующий раз.

    Продолжение следует…

  • Total
    0
    Shares
    Телеграфировать 0
    Поделиться 0
    Репост 0
    Твитнуть 0
    Алексей Волков

    Предыдущий материал
    • Новости

    Сага о фреймах

    • 29.03.2001
    • Алексей Волков
    Read More
    Следующий материал
    • JavaScript

    JavaScript и объектная модель

    • 29.03.2001
    • Алексей Волков
    Read More
    Вас также может заинтересовать
    Read More
    • CSS

    Формализация CSS

    • Алексей Волков
    • 23.05.2012
    Read More
    • CSS

    Ножницы для CSS

    • Алексей Волков
    • 25.01.2005
    Read More
    • CSS

    CSS: фон и цвет

    • Алексей Волков
    • 27.05.2004
    Read More
    • CSS

    CSS: позиционирование блоков

    • Алексей Волков
    • 08.04.2004
    Read More
    • CSS

    Что такое каскадные таблицы стилей (CSS)

    • Алексей Волков
    • 02.02.2004
    Read More
    • CSS

    Что такое каскадные таблицы стилей (CSS)

    • Алексей Волков
    • 27.11.2003
    Read More
    • CSS

    Создание “буквиц”

    • alexvolkov
    • 30.11.2001
    Read More
    • CSS

    Описание стилей элемента<A>

    • alexvolkov
    • 05.11.2001

    Добавить комментарий

    Для отправки комментария вам необходимо авторизоваться.

    Свежие посты
    • Рассылка как продукт
      • 24.07.20
    • Google назвал лучшие приложения App Store за 2018 год
      • 14.12.18
    • Онлайн-конференция интернет-магазин от “А до Я” CyberE-com 2018
      • 25.05.18
    • Бесплатная онлайн-конференция по управлению репутацией
      • 04.12.17
    • Открыта регистрация на CyberMarketing-2017
      • 19.10.17
    Маркетер
    • О проекте
    • Информационное спонсорство
    • Рекламным агентствам
    • Ссылки
    (с) ООО "Маркетер". Официальный сайт. Маркетер: Статьи про рекламу, маркетинг, public relations, интернет

    Введите ключевые слова для поиска и нажмите Enter