Обработка_данных_ОЗО / Лабораторные_работы / Лабораторные_работы_CSS / лаб_2
.pdfЛабораторная работа
«Использование CSS для управления форматированием web-страниц»
CSS, Cascading Style Sheet – каскадные таблицы стилей позволяют web-
разработчику отделить процесс форматирования страницы от заполнения ее конкретным содержанием и дают возможность определить форму представления информации от ее фактического содержания, т.е. возможность подготовить документ, а потом независимо редактировать используемые в нем стили.
CSS состоят из одного или нескольких правил, определяющих особенности отображения элементов web-страницы.
Синтаксис правила:
Селектор {свойство: значение}
Селектор − обозначение дескриптора, к которому применяется правило, а свойство – атрибут.
Можно задать несколько свойств, отделив их друг от друга точкой с запятой.
Примеры
1.H1 {color: red } – изменение действия элемента Н1 – устанавливается красный цвет текста для всех тегов Н1. Таким образом, можно изменять параметры текста в каждом блоке. Параметр color: называется свойством, а red – значением свойства.
2.H1 {font: 16pt "Arial"; font-weight: bold; margin-left: 0.25in; color: black } –
установлена насыщенность шрифта, границы и цвет текста.
Правила при работе с CSS:
−Комментарии могут присутствовать в любой позиции и начинаться символами /* и заканчиваться */
−Правила CSS не чувствительны к регистру символов, исключение значения непосредственно относящиеся к CSS (например, имена шрифтов, URL, HTML- атрибуты и т.д.)
−Имена селекторов могут включать буквы (А/а – Z/z), цифры 0-9 и знаки подчеркивания, но перед первым символом должна стоять буква.
Деление стилей по способу применения:
1. Inline Style – задание стилей для отдельного фрагмента документа;
PDF created with pdfFactory Pro trial version www.pdffactory.com
2.Embedding Style – встраивание таблицы стилей в документ при помощи парного тега <style>;
3.Linking Style – связывание документа с таблицей стилей, которая хранится в отдельном файле (html –файл, простой текстовый файл, но с расширением css , что позволяет централизованно управлять стилями).
Задание стилей для отдельного фрагмента документа производится установкой значения атрибута тега этого фрагмента.
Синтаксис: <tag style = "attribute: value; attribute: value;… "></tag>
Возможно использование атрибута style для тега <div> …</div> позволяет управлять стилем фрагмента, размещенного между границами парного тега <div>
þ Задание 1
−Откройте любой ранее созданный вами HTML-документ в режиме редактора Блокнот. Установите для нескольких абзацев стиль Заголовок 1, сохраните документ и просмотрите его в окне браузера.
−Вновь откройте данный документ в режиме просмотра HTML-кода и установите для одного из заголовков атрибут <style>:
<h1 style = "font-style: italic; color: navy"> Мой новый стиль заголовка </h1>
−Примените общий стиль для заголовка и абзаца с помощью тега <div>: выравнивание по центру, шрифт – подчеркнутый.
<div style = "text-align: center; text-decoration: underline ">
<h1> Наглядное отображение </h1> <p> использования тега div</P>
<h1 style = "color: red; font-family: courer "><span style = "color: Green ">для текста </span>, заданного стилем<h1>
<h1 style = " fontstyle: italic; color: nevy">Еще один <span style = "color: Green "> стиль </span> текста. <h1>
</div>
§Сохраните изменения и просмотрите документ в окне браузера.
Создание html-документа со встроенной таблицей стилей выполняется при помощи парного тега <style>, который следует разместить в head-блоке.
Синтаксис тега <style>:
PDF created with pdfFactory Pro trial version www.pdffactory.com
<style disabled media=screen ï print ï all titlt = text type = "text/css">
Type - единственный обязательный атрибут тега <style>. Этот атрибут задает тип mime (Multipurpose Интернет Mail Extension, стандарт электронной почты Интернет). Для того чтобы браузеры, не поддерживающие встроенные таблицы стилей, могли их игнорировать, атрибуту присваивается значение text/css.
Инструкции стилей набираются внутри тегов комментариев для того, чтобы браузеры, не распознающие таблицы стилей, не выводили содержимое тега <STYLE> в web-страницу. Комментарии внутри таблицы стилей располагаются между символами /* и */ , поэтому игнорируются браузером.
þ Задание 2
-Откройте любой ранее созданный вами html-документ в режиме редактора
Блокнот.
-В область head данного документа введите коды таблицы стилей
<html>
<head>
< style type = “text/css”> <!--
body {background: yellow; color: green}
/* Желтый фон документа с зелеными буквами */ h1 {font: 20pt Arial bold; color: red}
/* Заголовок h1: полужирный шрифт Arial высотой 20 красного цвета */ p {font: 12pt Arial; text-indent: 1.25cm}
/* Параграф: красная строка в 1.25 см, шрифт Arial высотой 12 */ -->
</style>
</head>
<body>
<h1> Новый стиль заголовка </h1> <p>
Новый стиль параграфа. </p>
</body>
</html>
PDF created with pdfFactory Pro trial version www.pdffactory.com
§Сохраните документ.
þ Скопируйте таблицу стилей в буфер обмена и внедрите ее в другой html-документ
Таблицу стилей можно создать на основе отдельного css-файла, с последующим применением его к документам. Таблица стилей хранится в текстовом css-файле.
Для связывания используется тег <link>, который должен располагаться между парными тегами <HEAD>.
Файл-css с определением стиля можно разместить на сервере и затем добавлять в заголовок каждого документа следующий фрагмент:
<Link Rel="Stylesheet" Type= "Text/css " src= http://имя_сервера/имя_файла/css>
Если документ, к которому будут применяться стили, находится в одном каталоге с css-файлом, тогда просто указывается ссылка на стилевой файл:
< Link Rel="Stylesheet" href= " NewStyle.css " type= "text/css ">
При загрузке страницы браузер будет загружать и стили, указанные в элементе LINK. Поэтому при внесении изменений в css-файл, изменится и внешний вид страниц всего узла.
þ Задание 3
−Создайте стилевой файл и примените его для форматирования ранее созданных вами страниц.
Для создания стилевого файла Вам потребуются несколько графических файлов: фоновое изображение, маркеры, линий и т.д. (файлы *.jpg или *.gif).
−Загрузите программу Блокнот и впишите следующий код:
Body{font-family: Verdana, Arial, Helvetica, sans-serif; color: rgb(0,90,90); font-size: 12px; background-image: url("*.jpg");}
P{ font-family: Verdana, Arial, Helvetica, sans-serif; color: rgb(0,90,90);} ul{list-style-image: url('*.gif');}
a {color: #707986; text-decoration: none;}
§ Сохраните документ как файл styles1.css (при сохранении документа установите в поле Тип файла категорию Все.
PDF created with pdfFactory Pro trial version www.pdffactory.com
þЗагрузите 2-3 ранее созданых html-документа и в область head каждого документа вставьте ссылку на стилевой файл:
<link rel="stylesheet" href= " styles1.css " type= "text/css ">
§ Сохраните документы и просмотрите их в окне браузера.
þВнесите изменения в стилевой файл styles1.css, например, замените файл фонового изображения и сохраните документ. Переключитесь в режим просмотра документа в браузере и выполните команду Обновить страницу.
þСоздайте новый стилевой файл styles2.css (например, замените в файле styles1.css файлы фонового изображения, маркеров, стили заголовков, абзацев и т.д. и сохранить его под другим именем.)
þОткройте несколько html-документов в режиме html-кода и замените имя
стилевого файла в записи ссылки
<link rel="stylesheet" href= " styles2.css " type= "text/css ">
§ Сохраните изменения и просмотрите результат в окне браузера.
Дополнительную гибкость применения таблицы стилей дает возможность определения в ней различных классов стилей для одного и того же элемента, которые затем можно применять к элементам документа.
Синтаксис записи класса
.ИмяКласса {свойство: значение; свойство:значение;…}
þ Задание 4
−Загрузите стилевой файл styles1.css и дополните его кодами классов стилей для абзаца, заголовка и гиперссылки:
Body{font-family: Verdana, Arial, Helvetica, sans-serif; color: rgb(0,90,90); font-size: 12px; background-image: url("*0.jpg") ;}
P{ font-family: Verdana, Arial, Helvetica, sans-serif; color: rgb(0,90,90);}
.fon{ background-image=url(*1.jpg) ;}
.fon1{text-align: center; background-image=url(*2.gif) ; } ul{list-style-image: url('*1.gif');}
.ul1{list-style-image: url('*2.gif');}
.ul2{list-style-image: url('*3.gif');}
PDF created with pdfFactory Pro trial version www.pdffactory.com
.ul3{list-style-image: url('*4.gif');}
.ul4{list-style-image: url('*5.gif');}
H1.Border {border-width: 1; border: solid; border-color: green; text-align: center}
H1.Background {background-color: lime; text-align: center} a {color: #707986; text-decoration: none;}
.prod {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #2D3368; font-style: normal; font-weight: bold; text-decoration: none; line-height: 15px;}
.prod:hover {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #A57329; font-style: normal; font-weight: bold; textdecoration: none; line-height: 15px; }
.menuurl {font-family: Verdana, Arial, Helvetica, sans-serif; color: #222222; font-size: 20px; font-style: normal; font-weight: bold; }
§Сохраните изменения в файле styles1.css
þ Задание 5
−Загрузите созданный ранее html-документ и определите для отдельных элементов документа классы стилей, например:
<html><head>
<link href="styles1.css" rel="stylesheet" type="text/css"> </head>
<body>
<p>Пример текста</p>
<p class="fon">Пример текста</p>
<H1 class="Border">Заголовок первого уровня с рамкой</H1> <H1 class="Background">Заголовок первого уровня с фоном</H1> <H1>Заголовок первого уровня стандартный</H1>
</body></html>
§Сохраните документ и прострите в окне браузера.
PDF created with pdfFactory Pro trial version www.pdffactory.com