Expose

A Timeline Design For Your Blog

Дорогие читатели! Сегодня мы с вами приступаем к изучению таблиц стилей — CSS. С их помощью вы сможете преобразить свой веб-ресурс до неузнаваемости — настолько это важная часть нашего курса!

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

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

Говоря популярным простым языком, CSS — это язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML). Отделяя стиль представления документов от содержимого документов, CSS упрощает создание веб-страниц и обслуживание сайтов.

Для того чтобы вам, дорогие читатели, было чем себя занять во время досуга, я предлагаю вам посмотреть это видео с канала «Loftblog», чтобы поднять аппетит к изучению CSS 😋:
Дорогие читатели! В этом сообщении вы узнаете о CSS вообще и о всевозможных способах применения таблиц стилей CSS к HTML-документу в частности.

Основы. Создание таблиц стилей

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

Объявление стиля состоит из двух частей: селектора и объявления. В HTML имена элементов нечувствительны к регистру. Объявление состоит из двух частей: имя свойства и значение свойства. Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.

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

Способы добавления таблиц стилей в HTML-документ

Внешние таблицы стилей

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило с расширением .css, а для связывания документа с этим файлом применяется тег <link>. Данный тег помещается в контейнер <head>...</head>.

Например, если мы хотим, чтобы заголовок первого уровня выводился на экран шрифтом «Tahoma» 20-го размера красного цвета по центру, запишем следующий код в таблице стилей:

h1 {
    font-family: Tahoma; /* Шрифт текста «Тахома» */
    font-size: 20pt; /* Размер текста 20 пунктов */
    color: red; /* Цвет текста красный */
    text-align: center; /* Выравнивание текста по центру */
}

а в коде HTML-документа запишем следующее:

<!DOCTYPE html>
<html>
    <head>
        <link rel="style" href="http://site.ru/mysite.css"> <!-- Подключение внешней таблицы стилей -->
    </head>
    <body>
        <h1>Заголовок 1-го уровня</h1> <!-- Вывод на экран заголовка 1-го уровня -->
    </body>
</html>

В итоге на экране заголовок <h1> выведется на экран таким:

Заголовок 1-го уровня

Внутренние стили

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

Например:

<!DOCTYPE html>
<html>
    <head>
        ...
        <style> <!-- Объявление стилей внутри документа -->
            h1 {
                font-family: Tahoma;
                font-size: 20pt;
                color: red;
                text-align: center;
            }
        </style>
        ...
    </head>
    <body>
        <h1>Заголовок 1-го уровня</h1>
    </body>
</html>

Результат будет тот же, что и в разделе выше:

Заголовок 1-го уровня

Встроенные стили

Встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил.

Например:

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        <h1 style="font-family: Tahoma; font-size: 20pt; color: red; text-align: center;">Заголовок 1-го уровня</h1> <!-- Стили для отдельно взятого тега -->
    </body>
</html>

На экране увидим всё тот же

Заголовок 1-го уровня

Смешанные стили

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

Импорт стилей

Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами.

Синтаксис импорта следующий:

@import url("имя файла") типы носителей;
@import "имя файла" типы носителей;
Дорогие читатели! В этом и следующем уроках мы немного коснёмся JavaScript’а, чтобы вы могли украсить свой блог и придать ему интерактивности. Эти два урока будут последними на нашем пути к освоению основ создания интернет-документов.

JavaScript — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили.

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами.

Вообще говоря,
  1. JavaScript — язык сценариев, или скриптов. Скрипт представляет собой программный код — набор инструкций, который не требует предварительной обработки (например, компиляции) перед запуском. Код JavaScript интерпретируется движком браузера во время загрузки веб-страницы. Интерпретатор браузера выполняет построчный анализ, обработку и выполнение исходной программы или запроса.
  2. JavaScript — объектно-ориентированный язык с прототипным наследованием. Он поддерживает несколько встроенных объектов, а также позволяет создавать или удалять свои собственные (пользовательские) объекты. Объекты могут наследовать свойства непосредственно друг от друга, образуя цепочку объект-прототип.
Как обычно, чтобы понять, что такое вообще скрипты и язык программирования JavaScript, предлагаю вам посмотреть это видео с канала «Loftblog»:
Дорогие читатели! Что ж, вот она — финишная прямая! Сегодняшнее занятие будет последним. Вы уже столько всего изучили и впитали в себя. Надеюсь, последнее занятие не станет для вас исключением!

Подключение сценариев к HTML-документу

Сценарии JavaScript бывают встроенные, т. е. их содержимое является частью документа, и внешние, хранящиеся в отдельном файле с расширением .js. Сценарии можно внедрить в документ следующими способами.

Подключение сценариев в виде гиперссылки

Для этого нужно разместить код в отдельном файле и включить ссылку на файл в заголовок:

<head>
    <script src="script.js"></script>
</head>

или тело страницы:

<body>
    <script src="script.js"></script>
</body>

Этот способ обычно применяется для сценариев большого размера или сценариев, многократно используемых на разных веб-страницах.

В виде обработчика события

Каждый html-элемент имеет JavaScript-события, которые срабатывают в определенный момент. Нужно добавить необходимое событие в html-элемент как атрибут, а в качестве значения этого атрибута указать требуемую функцию. Функция, вызываемая в ответ на срабатывание события, является обработчиком события. В результате срабатывания события исполнится связанный с ним код. Этот способ применяется в основном для коротких сценариев.

Внутрь элемента <script>

Элемент <script> может вставляться в любое место документа. Внутри тега располагается код, который выполняется сразу после прочтения браузером, или содержит описание функции, которая выполняется в момент ее вызова. Описание функции можно располагать в любом месте, главное, чтобы к моменту ее вызова код функции уже был загружен.

Обычно код JavaScript размещается в заголовке документа (элемент <head>) или после открывающего тега <body>.

<body>
    ...
    <footer>
        <script>
            document.write("Всем привет!");
        </script>
    </footer>
    ...
</body>
Дорогие читатели! Сегодня знаменательный день! Вы только что прошли курс изучения HTML, CSS и JavaScript’a и теперь готовы сами создавать сайты на любой вкус. Но прежде чем начать трудиться на полях Всемирной паутины, я предлагаю вам закрепить знания и пройти этот несложный тест. Жмите на эту картинку ниже! 😉

Тест
© Copyright 2015 СПРАВОЧНИК
ПО ВЕБ-ПРОГРАММИРОВАНИЮ
. Все права защищены Тема создана Themexpose | Copy Blogger Themes
Наверх