Главная База знаний "Allbest" Программирование, компьютеры и кибернетика Электронный дидактический материал по теме "Каскадные таблицы стилей (CSS)"

Электронный дидактический материал по теме "Каскадные таблицы стилей (CSS)"

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

Рубрика	Программирование, компьютеры и кибернетика
Вид	дипломная работа
Язык	русский
Дата добавления	24.01.2016
Размер файла	2,0 M

посмотреть текст работы

скачать работу можно здесь

полная информация о работе

весь список подобных работ

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

Страница:

На этом занятии Вы научитесь оформлять документ так, чтобы потом его можно было при необходимости переоформить без лишних затрат времени и сил, изменив лишь таблицу стилей.<br />

<strong><em>CSS</em></strong><em> - это язык, который содержит набор свойств для определения внешнего вида документа</em>.<br />

Средства CSS можно разделить на категории:</p>

<ul>

<li>Средства управления позиционированием;</li>

<li>Средства для управления шрифтами;</li>

<li>Средства для управления фоновым цветом и изображением;</li>

<li>Средства выравнивания текста.</li>

</ul>

<p align="center"><img src="img/Рисунок 1.jpg"

<div align="center">Рис. 1. Web-страница без форматирования</div><br />

Стилевые спецификации не заменяют языка разметки, они являются самостоятельной технологией, которая применяется непосредственно к тегу HTML. Чтобы назначить элементу HTML стилевое описание, необходимо в стилевой спецификации указать сам элемент и записать после него в фигурных скобках всю информацию о его форматировании: <em>имя элемента {стилевые_спецификации}.</em><br />

Например, необходимо задать правило форматирования элемента <H1> так, чтобы использовался шрифт гарнитуры Arial, размером 14 пунктов. Стилевая спецификация выглядит следующим образом:

<br> Итак, стилевые спецификации являются просто <em>набором правил</em>, которые включают в себя <em>селектор </em>(имя HTML-элемента, атрибута <em>CLASS</em>или <em>ID</em>)<em>, </em>связанный со <em>стилевым свойством</em> (например, <em>font</em><em>-</em><em>family</em>), после которого следует двоеточие и <em>допустимое значение</em> (или значения) этого свойства. В стилевую спецификацию может быть включено несколько правил, разделенных точкой с запятой.<br />

<br />

<strong>Задание 2</strong><br />

<br />

Откройте файл справочника «Sprav_CSS.doc». Найдите разделы «Свойства шрифта» и раздел «Свойства текста». Ознакомьтесь со стилевыми свойствами шрифта и текста. Выясните, к каким HTML-элементам можно применить эти свойства.<br />

Существует <strong><em>три основных вида стилевых спецификаций (</em></strong><strong><em>CSS</em></strong><strong><em>):</em></strong> </p>

<ul>

<li>Вы можете связать документ с <strong>внешней стилевой спецификацией.</strong> </li>

<li>Можно внедрить <strong>глобальную стилевую спецификацию,</strong> действующую в пределах одной Web-страницы, в заголовок гипертекстового документа. </li>

<li>И можно определить <strong>внутреннюю стилевую спецификацию</strong> для отдельного HTML-элемента.</li>

</ul>

</body>

</html>

Листинг Лекция «l1.htm»

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="" class="js"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link type="image/x-icon" href="http://www.intuit.ru/sites/all/themes/intuit/favicon.ico" rel="shortcut icon"><title>Общая информация</title><script type="text/javascript" src="./l1_files/jquery.js"></script><style></style><script type="text/javascript" src="./l1_files/drupal.js"></script><script type="text/javascript" src="./l1_files/jquery.ui.core.js"></script>

<![CDATA[//><!--

jQuery.extend(Drupal.settings, { "basePath": "http:\/\/www.intuit.ru", "spelling": { "requestUri": "studies\/courses\/1101\/135\/print_lecture\/1982", "uri": "\/intuit\/admin\/content\/spelling\/save_form" } });

//--><!]]>

</script><link type="text/css" rel="stylesheet" media="all" href="./l1_files/admin_menu.css">

</div>

<div>

</div>

<div>

Лекция 1. <span class="spelling-content-entity" data="iduniver_edu_prog=1101&idcourse=135&idlecture=1982&type=2&comment=title">Общая информация</span>

</div>

</div></div><div class="eoi print-version">

<a xmlns:edi="http://www.intuit.ru/2010/edi" name="sect1"></a><h3 xmlns:edi="http://www.intuit.ru/2010/edi"><a name=l11>Технология CSS: общий взгляд</h3><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_1">Название "Каскадные таблицы стилей" происходит от английского Cascading <a name="keyword1"></a><span class="keyword">Style</span> Sheets, аббревиатурой которого является <a name="keyword2"></a><span class="keyword">CSS</span>. Впервые стили появляются в <a name="keyword3"></a><span class="keyword">HTML</span> 4.0 для определения представления элементов <a name="keyword4"></a><span class="keyword">HTML</span> и решения проблем представления документов. Стили обычно хранятся в таблицах стилей: могут быть определены как внутри <a name="keyword5"></a><span class="keyword">HTML</span>-документа, так и в специальном файле с расширением <a name="keyword6"></a><span class="keyword">css</span>. Используя отдельные файлы для хранения таблиц стилей, можно существенно сократить объем работы. Также можно определить несколько стилей, которые, подчиняясь существующим правилам, будут каскадно задавать один определенный стиль.</p><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_1"></div><a xmlns:edi="http://www.intuit.ru/2010/edi" name="sect2"></a><h3 xmlns:edi="http://www.intuit.ru/2010/edi"><a name=l12>Пример использования CSS</h3><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_2">С помощью <a name="keyword7"></a><span class="keyword">CSS</span> документы <a name="keyword8"></a><span class="keyword">HTML</span> можно выводить, используя различные стили вывода.</p><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_2"></div><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_3">Пример. Возьмем несколько таблиц стилей:</p><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_3"></div><a xmlns:edi="http://www.intuit.ru/2010/edi" name="sect3"></a><h4 xmlns:edi="http://www.intuit.ru/2010/edi">Style1</h4><div xmlns:edi="http://www.intuit.ru/2010/edi" class="example" id="id_4"><pre>p

{

color: blue; font-style: italic;

margin-left: 20pt;

}

ol,ul,li

{

list-style: circle;

font-family: arial;

}

a:link {color:black}

a:visited {color:black}

body

{

background-image: url("http://www.intuit.ru/departament/picture.gif")

}</pre></div><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_4"></div><a xmlns:edi="http://www.intuit.ru/2010/edi" name="sect4"></a><h4 xmlns:edi="http://www.intuit.ru/2010/edi">Style2</h4><div xmlns:edi="http://www.intuit.ru/2010/edi" class="example" id="id_5"><pre>h1,h3,h6

{

margin: 20pt;

}

h1,h2,h3,h4,h5,h6,p,ol,li

{

font-family: arial, "sans serif";

}

p,table,td,ol,ul

{

font-style: oblique;

}

:link {COLOR: blue;}

:visited {COLOR: blue;}

a:active {COLOR: black;}

a:hover {COLOR: black;}

a.myln:link {COLOR: olive;}

a.myln:visited {COLOR: olive;}

a.myln:active {COLOR: teal;}

a.myln:hover {COLOR: teal;}</pre></div><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_5"></div><a xmlns:edi="http://www.intuit.ru/2010/edi" name="sect5"></a><h4 xmlns:edi="http://www.intuit.ru/2010/edi">Style3</h4><div xmlns:edi="http://www.intuit.ru/2010/edi" class="example" id="id_6"><pre>p,ol,ul

{

font-style: italic;

margin-right: 20pt;

}

p,h1,h6

{

font-family: "comic sans ms", arial, "sans serif";

}

p,th

{

font-size: 20%

}

table {background-color: blue}

body {background-color:#FFF000}

p,ol,ul

{

color:green;

}

:link {color:blue}

:visited {color:blue}

:active {color:green}

:hover {color:green}</pre></div><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_6"></div><a xmlns:edi="http://www.intuit.ru/2010/edi" name="sect6"></a><h4 xmlns:edi="http://www.intuit.ru/2010/edi">Style4</h4><div xmlns:edi="http://www.intuit.ru/2010/edi" class="example" id="id_7"><pre>:link { color:red }

:visited { color:red }

:active { color:yellow }

:hover { color:yellow }

body

{

background-color: #FAD123;

}

h1,h2,h6

{

margin-left: 20pt;

color: blue;

}

h3,h4,h5

{

margin-left: 10pt;

color: green;

}

p,h1,h3

{

font-size: 150%;

}

p,h1,h2,h3,h4,h5,h6,table

{

font-family: arial;

}

{

margin-left: 30pt;

}</pre></div><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_7"></div><a xmlns:edi="http://www.intuit.ru/2010/edi" name="sect7"></a><h4 xmlns:edi="http://www.intuit.ru/2010/edi">Style5</h4><div xmlns:edi="http://www.intuit.ru/2010/edi" class="example" id="id_8"><pre>p,h1,h2,h3

{

font-size: 75%;

}

table,h4,h5,h6,li

{

font-family: arial, "sans serif";

margin-left: 20pt;

}

body

{

background-color: #F2FF2F;

}

ol,ul {color: 12a45d;}

:link {color:brown}

:visited {color:brown}

:active {color:blue}

:hover {color:blue}</pre></div><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_8"></div><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_9">При последовательном применении этих стилей к одному и тому же документу можно менять его <a name="keyword9"></a><span class="keyword">представление</span>.</p><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_9"></div>

<a xmlns:edi="http://www.intuit.ru/2010/edi" name="sect8"></a><h3 xmlns:edi="http://www.intuit.ru/2010/edi"><a name=l13>Предназначение стилей</h3><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_10">Язык <a name="keyword10"></a><span class="keyword">HTML</span> был создан для описания содержимого документа. Его теги были предназначены для определения "заголовка", "параграфа", "таблицы" ( <span class="texample"><h1></span>, <span class="texample"><p></span>, <span class="texample"><table></span> и т.д.). Первоначально для представления документов не было предусмотрено каких-либо тегов форматирования, т.е. предполагалось, что о представлении документа позаботится <a name="keyword11"></a><span class="keyword">браузер</span>.</p><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_10"></div><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_14">Но это породило процесс создания своих тегов и атрибутов к исходной спецификации <a name="keyword12"></a><span class="keyword">HTML</span>-браузерами Netscape и <a name="keyword13"></a><span class="keyword">Internet</span> Explorer (такие, например, как <a name="keyword14"></a><span class="keyword">тег</span> <span class="texample"><font></span> и <a name="keyword15"></a><span class="keyword">атрибут</span> <span class="texample">color</span> ), что затруднило создание <a name="keyword16"></a><span class="keyword">Web</span>-сайтов, на которых содержимое документов <a name="keyword17"></a><span class="keyword">HTML</span> было четко отделено от уровня представления документа.</p><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_14"></div><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_17">В этой ситуации консорциум <a name="keyword18"></a><span class="keyword">W3C</span> (World Wide <a name="keyword19"></a><span class="keyword">Web</span> Consortium) -- некоммерческая организация, ответственная за стандартизацию <a name="keyword20"></a><span class="keyword">HTML</span> -- создала при разработке стандарта <a name="keyword21"></a><span class="keyword">HTML</span> 4.0 каскадные таблицы стилей.</p><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_17"></div><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_18">Таким образом, необходимость разделения содержимого документа и его представления привела к созданию технологии <a name="keyword22"></a><span class="keyword">CSS</span>.</p><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_18"></div><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_19">Сегодня эту технологию поддерживают все основные браузеры (<a name="keyword23"></a><span class="keyword">Internet</span> Explorer, Mozilla Firefox, Opera и др.).</p><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_19"></div><a xmlns:edi="http://www.intuit.ru/2010/edi" name="sect9"></a><h3 xmlns:edi="http://www.intuit.ru/2010/edi"><a name=l14>Таблицы стилей могут существенно сократить объем работы</h3><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_20">Таблицы стилей определяют <a name="keyword24"></a><span class="keyword">вывод</span> элементов <a name="keyword25"></a><span class="keyword">HTML</span> (как, например, <a name="keyword26"></a><span class="keyword">тег</span> <span class="texample">font</span> и <a name="keyword27"></a><span class="keyword">атрибут</span> <span class="texample">color</span> в <a name="keyword28"></a><span class="keyword">HTML</span> 3.2). Как уже говорилось, каскадные таблицы стилей обычно хранятся во внешних файлах с расширением .<a name="keyword29"></a><span class="keyword">css</span>. Этот способ удобен тем, что позволяет изменить внешний вид и компоновку всех необходимых страниц в <a name="keyword30"></a><span class="keyword">Web</span>, редактируя только один, единственный документ <a name="keyword31"></a><span class="keyword">CSS</span>.</p><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_20"></div><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_23">Еще раз заострим внимание: <a name="keyword32"></a><span class="keyword">CSS</span> стали прорывом в <a name="keyword33"></a><span class="keyword">Web</span>-дизайне. Основой для него послужило то, что технология позволяет разработчикам одновременно управлять стилем и компоновкой <a name="keyword34"></a><span class="keyword">множества</span> <a name="keyword35"></a><span class="keyword">Web</span>-страниц, определять стиль для каждого элемента <a name="keyword36"></a><span class="keyword">HTML</span> и применять его к любому количеству <a name="keyword37"></a><span class="keyword">Web</span>-страниц. Также <a name="keyword38"></a><span class="keyword">CSS</span> дает возможность из одного документа ссылаться на несколько внешних таблиц стилей. Таким образом, чтобы сделать глобальное изменение, надо просто изменить стиль, и все элементы в <a name="keyword39"></a><span class="keyword">Web</span> будут автоматически изменены.</p><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_23"></div><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_24">Разработчик может определять стили следующими способами:</p><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_24"></div><ul id="id_25">

<li xmlns:edi="http://www.intuit.ru/2010/edi">внутри единственного элемента HTML;</li>

<li xmlns:edi="http://www.intuit.ru/2010/edi">внутри элемента <span class="texample"><head></span> страницы HTML;</li>

<li xmlns:edi="http://www.intuit.ru/2010/edi">во внешнем файле CSS.</li>

</ul><div class="lecture_mark" id="mark_25"></div><a xmlns:edi="http://www.intuit.ru/2010/edi" name="sect10"></a><h3 xmlns:edi="http://www.intuit.ru/2010/edi"><a name=l15>Приоритет использования стилей</h3><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_30"><b>Для каскадных таблиц стилей определен приоритет использования</b>. Если для элемента <a name="keyword40"></a><span class="keyword">HTML</span> определено более одного стиля, то все стили будут последовательно "каскадированы" в новую "виртуальную" таблицу стилей, согласно следующим правилам:</p><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_30"></div><ol id="id_31">

<li xmlns:edi="http://www.intuit.ru/2010/edi">стили, используемые по умолчанию браузером;</li>

<li xmlns:edi="http://www.intuit.ru/2010/edi">стили, хранящиеся во внешней таблице;</li>

<li xmlns:edi="http://www.intuit.ru/2010/edi">стили, хранящиеся во внутренней таблице стилей (внутри тега <span class="texample"><head></span> );</li>

<li xmlns:edi="http://www.intuit.ru/2010/edi">встроенный стиль (внутри элемента HTML).</li>

</ol><div class="lecture_mark" id="mark_31"></div><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_37">Эти правила определяют порядок увеличения приоритета стилей.</p><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_37"></div><p xmlns:edi="http://www.intuit.ru/2010/edi" id="id_38">Таким образом, встроенный стиль (внутри элемента <a name="keyword41"></a><span class="keyword">HTML</span>) имеет наивысший приоритет, т.е. будет переопределять стиль, который объявлен в теге <span class="texample"><head></span>, во внешней таблице стилей или в браузере (<a name="keyword42"></a><span class="keyword">значение</span> по умолчанию).</p><div xmlns:edi="http://www.intuit.ru/2010/edi" class="lecture_mark" id="mark_38"></div>

</div></body></html>

Размещено на Allbest.ru

Страница:

дипломная работа "Электронный дидактический материал по теме "Каскадные таблицы стилей (CSS)"" скачать

Подобные документы

Создание электронного учебника по дисциплине "Технология восстановления деталей и сборочных единиц"
Особенности и принципы разработки электронного учебника. Подбор и разработка удобного шаблона и дизайна учебника, наполнение его контентом. Экономическое обоснование и планирование работы, расчет сметы затрат на разработку электронного учебника.

дипломная работа [3,1 M], добавлен 06.09.2024
Технология создания электронного учебника "Основы информационной безопасности"
Использование программы Microsoft Word 2010 при создании электронного учебника. Структура учебника, навигация, полнотекстный поиск, защита информации от изменений. Алгоритм разработки программного продукта. Описание технологических средств учебника.

контрольная работа [196,9 K], добавлен 06.05.2014
Разработка электронного учебника по Информатике
Концептуальные основы разработки электронного учебника на основе гипертекстовых технологий. Архитектура учебного пособия. Этапы построения электронного учебника "Информатика" и его структура. Анализ практического использования электронного учебника.

дипломная работа [104,9 K], добавлен 02.05.2012
Проектирование и создание электронных учебных пособий
Структурные элементы электронного учебника. Основные этапы разработки электронного учебника. Варианты структуры электронного образовательного издания. Подготовка электронного издания к эксплуатации. Методическое обеспечение электронного учебника.

презентация [506,5 K], добавлен 28.12.2014
Разработка электронного учебника по теме "Характеристика и классификация вычислительной техники"
Особенности электронных учебных пособий и основные принципы их создания. Сбор и подготовка исходного материала для электронного учебного пособия. Разработка структуры электронного пособия. Выбор программ и разработка интерфейса электронного учебника.

дипломная работа [738,5 K], добавлен 27.06.2012
Разработка электронного учебника
Электронный учебник как средство самообразования. Основные принципы самообразования. Этапы проектирования электронного учебника, построение интерфейса системы. Язык гипертекстовой разметки HTML. Структура электронного учебника по "Численным методам".

дипломная работа [5,9 M], добавлен 15.03.2012
Создание электронного учебника по дисциплине "Численные методы"
Электронный учебник как средство самообразования. Основные этапы проектирования электронного учебника. Методика использования электронных учебников. Язык гипертекстовой разметки HTML. Структура электронного учебника по дисциплине "Численные методы".

дипломная работа [4,9 M], добавлен 02.05.2012
Разработка электронного учебника "Энциклопедия Интернет"
Создание электронного учебника "Энциклопедия Интернет" для ознакомления пользователя с его функциями. Подготовка к разработке программного продукта. Анализ предметной области. Выбор языка программирования. Работа в интегрированной среде Delphi 7.

курсовая работа [1,2 M], добавлен 09.03.2012
Электронный учебник
Учебник в электронном виде - элемент образовательной среды и новый жанр учебной литературы. Основные формы и методические рекомендации по разработке электронного учебника. Принципы создания, аппаратное и программное обеспечение электронного учебника.

реферат [23,3 K], добавлен 27.02.2009
Особенности электронного учебника и возможности его применения в обучении
Описание электронного учебника, требования к его внутренней структуре и элементам. Технические характеристики и основные программные средства, используемые в процессе разработки. Формирование руководства пользователя, информационный интерфейс учебника.

курсовая работа [1,5 M], добавлен 17.08.2015

Другие документы, подобные "Электронный дидактический материал по теме "Каскадные таблицы стилей (CSS)""

весь список подобных работ

скачать работу можно здесь

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.