Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов (88‰)...
Археология об основании Рима: Новые раскопки проясняют и такой острый дискуссионный вопрос, как дата самого возникновения Рима...
Топ:
Установка замедленного коксования: Чем выше температура и ниже давление, тем место разрыва углеродной цепи всё больше смещается к её концу и значительно возрастает...
Процедура выполнения команд. Рабочий цикл процессора: Функционирование процессора в основном состоит из повторяющихся рабочих циклов, каждый из которых соответствует...
Техника безопасности при работе на пароконвектомате: К обслуживанию пароконвектомата допускаются лица, прошедшие технический минимум по эксплуатации оборудования...
Интересное:
Берегоукрепление оползневых склонов: На прибрежных склонах основной причиной развития оползневых процессов является подмыв водами рек естественных склонов...
Уполаживание и террасирование склонов: Если глубина оврага более 5 м необходимо устройство берм. Варианты использования оврагов для градостроительных целей...
Как мы говорим и как мы слушаем: общение можно сравнить с огромным зонтиком, под которым скрыто все...
Дисциплины:
2017-06-29 | 75 |
5.00
из
|
Заказать работу |
|
|
Цель: Научить применять свойства шрифта и использовать цветовую гамму.
Краткие теоретические сведения
Применение CSS
Каскадные таблицы стилей или CSS (Cascading Style Sheets) были революцией, потрясшей WWW. Если до этого Web-дизайнер не знал, как будет выглядеть его творение в разных программах Web-обозревателей, то теперь он может контролировать все: от начертания шрифта до положения картинки на странице.
Предположим, вам нужно изменить цвет текста в HTML-документе с черного на синий. Вы помещаете его в пару тегов <FONT> и </FONT> следующего вида:
<P><FONT color="blue">Это синий текст</FONT></P>
А теперь представим, что вы внесли определение внешнего вида текста в другое место документа:
P.bluetext { color: blue }
Эта строка обозначает, что мы определили для текста, находящегося внутри тега <P> и помеченного стилевым классом bluetext, синий цвет шрифта. Такая конструкция HTML называется определением стиля или просто стилем.
В результате в HTML-тексте у нас останутся только теги логического форматирования текста:
<P class="bluetext">Это синий текст</P>
Здесь мы пометили нужный текст с помощью атрибута class, присвоив ему значение bluetext. Атрибут class задает имя стилевого класса для тега, и его поддерживают все теги.
Вы можете переназначить цвета текста для всех тегов <P>. В этом случае мы не задаем имя стилевого класса:
P { color: blue }
Или вы можете задать форматирование для стилевого класса, не привязанного ни к какому тегу:
.bluetext{ color: blue }
И теперь вы можете присваивать стилевой класс тексту, заключенному в любые теги:
<H1 class="bluetext">Это синий цвет</H1>
<CENTER class="bluetext">Это синий цвет</CENTER>
Это <B class="bluetext">жирный синий</B> текст
|
Вы можете дать специальное форматирование тегу только в том случае, если он заключен внутрь другого тега:
H7 B { color: blue }
И теперь:
<H7><B>Этот</B> текст будет синим</H7>
<P>А <B>этот</B> - не будет!</P>
Более того, вы можете встроить определение стиля прямо в тег: <P style="color: blue">Это синий текст</P>
Это достигается при помощи атрибута style, который также поддерживают все теги HTML.
И еще один способ привязать стиль к какому-либо тегу - использовать атрибут id, задающий уникальное имя элемента HTML. #headerofdocument { font-size: 20pt }
Здесь мы задали размер шрифта 20 пунктов.
<H1 id="headerofdocument">Это заголовок документа</H1>
Вы можете задавать несколько атрибутов в определении стиля. В этом случае они разделяются точкой с запятой:
P { color: blue; font-size: 9ptl; text-align: center }
Определение стилей, вынесенные в заголовок HTML-документа, составляют таблицу стилей. Таблица стилей заключается в теги <STYLE> и </STYLE>:
<Style [type="text/css"]>
...
</STYLE>
Тег <STYLE> может содержать необязательный атрибут type, содержащий обязательное значение text/css.
Таблицу стилей можно вынести в отдельный файл и использовать сразу в нескольких документах. В этом случае в заголовке HTML-документа необходимо разместить тег <LINK>, указывающий на эту таблицу стилей:
<LINK rel="stylesheet" href="{Адрес файла таблицы стилей}">
Свойства шрифта
font - задает параметры шрифта элемента страницы.
Заменяет атрибуты font-family, font-height, font-size, font-style, font-variant и font-weight. Значения этих атрибутов могут располагаться в любом порядке.
font: { font-family } [{ font-height }] [{ font-size }] [{ font-style }] [{ font-variant }] [{ font-weight }];
Значение по умолчанию - normal normal normal medium normal "Times New Roman".
Альтернативный формат:
font: caption|icon|menu|message-box|small-caption|status-bar;
В этом случае доступны шесть предопределенных значений, задающие один из стандартных шрифтов, используемых в элементах интерфейса Windows:
font: caption; - шрифт заголовка кнопок, текстовых меток и т.п.;
font: icon; - шрифт подписей под пиктограммами;
|
font: menu; - шрифт пунктов меню;
font: message-box; - шрифт содержимого стандартных окон-предупреждений;
font: small-caption; - мелкий шрифт заголовков;
font: status-bar; - шрифт содержимого строки состояния.
Поддерживается IE начиная с 4.0
font-family - указывает имя или семейство шрифта.
font-family: {Имя шрифта}|serif|san-serif|fantasy|monospace;
В качестве значения этого атрибута задается либо непосредственно имя нужного шрифта, либо одно из пяти предопределенных значений, задающих имя шрифтового семейства. Можно задавать одновременно несколько шрифтов, разделив их имена запятыми; в этом случае Web-обозреватель сможет выбрать из них тот, который установлен на компьютере клиента. Если имя шрифта содержит пробелы, его следует взять в кавычки.
font-family: "Times New Roman",sans-serif;
Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
Поддерживается NN начиная с 4.0
font-weight - задает "жирность" шрифта, используемого в элементе страницы.
font-weight: normal|bold|bolder|lighter|100..900;
"Жирность" может быть задана тремя способами. Во-первых, предопределенными значениями normal и bold, задающими обычное и жирное начертание соответственно. Во-вторых, относительными значениями bolder и lighter, делающими шрифт элемента страницы жирнее и светлее шрифта родителя. И, в-третьих, одним из девяти значений от 100 до 900; здесь нормальному начертанию соответствует значение 400, а жирному - 700.
font-weight: normal; - обычный;
font-weight: lighter; - светлее;
font-weight: bold; - жирный;
font-weight: bolder; - жирнее;
font-weight: от 100 до 900 - любое значение, кратное 100
Значение по умолчанию normal.
Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых. При этом IE 4.0 и более старые версии распознавали только значения normal и bold этого атрибута.
Поддерживается NN начиная с 4.0
font-size - задает размер шрифта.
font-size: xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|{Абсолютный размер}|{Относительный размер}%;
Возможно задание либо абсолютного размера шрифта в одной из поддерживаемых CSS единиц измерения, либо как процент от размера шрифта родителя. Также доступны девять определенных значений.
font-size: 200% - относительная величина (проценты)
font-size: 150px - размер в пикселях
font-size: 300pt - размер в пунктах
font-size: {xx-small,small,medium,large,x-large,xx-large} - задают один из семи размеров шрифтов, поддерживаемых HTML
font-size: {smaller,larger} - задают размер шрифта, который на размер либо больше, либо меньше родительского шрифта соответственно
|
Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
Поддерживается NN начиная с 4.0
font-style - задает начертание шрифта.
font-style: normal|italic|oblique;
font-style: normal; - задает обычный вид шрифта (используется по умолчанию);
font-style: italic - курсивное начертание;
font-style: obligue - наклонное начертание (легкий наклон нормального шрифта) (IE отображает как курсив, а NN не поддерживает).
Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.
Поддерживается NN начиная с 4.0
font-variant - задает вид малых букв шрифта, используемого в элементе страницы.
font-variant: normal|small-caps;
font-variant: normal; - задает обычный вид малых букв шрифта (используется по умолчанию);
font-variant: small-caps; - делает их такими же, как большие буквы, только меньшего размера (капитель).
Поддерживается IE начиная с 4.0
Цветовая гамма
color - Определяет цвет элемента.
color: {Цвет};
Поддерживается IE начиная с 3.02 для текстовых элементов страницы и начиная с 4.0 для нетекстовых. Поддерживается NN начиная с 4.0
background - задает все свойства фона элемента страницы в один прием. Заменяет собой атрибуты background-attachment, background-color, background-image, background-position и background-repeat.
background: [{ background-color }] [{ background-image }] [{ background-repeat }] [{ background-attachment }] [{background-position}];
Значения этих свойств могут располагаться в любом порядке.
Значение по умолчанию transparent none repeat scroll 0% 0%.
Поддерживается IE начиная с 3.02; задание значений background-position и background-repeat поддерживается начиная с 4.0
background-color - задает фоновый цвет Web-страницы или ее элемента.
background-color: {Цвет}|transparent;
Предопределенное значение transparent задает "прозрачный" фон. Оно же является значением по умолчанию.
Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02
Поддерживается NN начиная с 4.0
background-image - задает фоновый рисунок Web-страницы или ее элемента.
background-image: url({Интернет-адрес файла рисунка})|none;
Предопределенное значение none отключает фоновый рисунок. Оно же является значением по умолчанию.
Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02
Поддерживается NN начиная с 4.0
|
background-attachment - данный атрибут позволяет "зафиксировать" фоновый рисунок, чтобы он не прокручивался вместе с содержимым Web-страницы.
background-attachment: scroll|fixed;
background-attachment: scroll; - фоновое изображение прокручивается вместе с содержимым страницы (значение по умолчанию);
background-attachment: fixed; - фоновое изображение фиксируется на одном месте и не прокручивается с содержимым страницы.
Применяется только для тега <BODY>.
Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02
background-repeat - устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе.
Иногда этот атрибут необходим, чтобы занять все свободное пространство, если фоновый рисунок слишком мал, чтобы покрыть пространство без повторения.
background-repeat: repeat|no-repeat|repeat-x|repeat-y;
background-repeat: repeat; - размножает фоновое изображение во всех направлениях (значение по умолчанию);
background-repeat: no-repeat; - запрещает фоновому изображению повторяться;
background-repeat: repeat-x; - размножает фоновое изображение только по горизонтали;
background-repeat: repeat-y; - размножает фоновое изображение только по вертикали.
Поддерживается IE начиная с 4.0
background-position - задает местонахождение фонового рисунка. Это комбинированный атрибут, заменяющий атрибуты background-position-x и background-position-y.
background-position: [{ background-position-x }] [{ background-position-y }];
Если задана только одна координата, то она считается горизонтальной, а для вертикальной принимается значение 50%.
Значение по умолчанию 0% 0%.
Поддерживается IE начиная с 4.0
background-position-x - задает горизонтальную координату фонового рисунка.
background-position-x: {X}|{X}%|left|center|right;
Координата может быть задана целым числом (абсолютная координата), процентом от соответствующего размера фонового рисунка (относительная координата) или предопределенным значением. Доступны три предопределенных значения: left, center, right, которые задают выравнивание фонового рисунка на странице по левому краю, по центру и по правому краю соответственно.
Значение по умолчанию 0%.
Поддерживается IE начиная с 4.0
background-position-y - задает вертикальную координату фонового рисунка.
background-position-y: {Y}|{Y}%|top|center|bottom;
Координата может быть задана целым числом (абсолютная координата), процентом от соответствующего размера фонового рисунка (относительная координата) или предопределенным значением. Доступны три предопределенных значения: top, center, bottom, которые задают выравнивание фонового рисунка на странице по верху, по центру и по низу страницы соответственно.
Значение по умолчанию 0%.
Поддерживается IE начиная с 4.0
scrollbar-3dlight-color - задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок.
scrollbar-3dlight-color: { Цвет };
Поддерживается IE начиная с 5.5
scrollbar-arrow-color - задает цвет стрелок на кнопках полосы прокрутки.
|
scrollbar-arrow-color: { Цвет };
Поддерживается IE начиная с 5.5
scrollbar-base-color - задает цвет бегунка и кнопок-стрелок полосы прокрутки.
scrollbar-base-color: { Цвет };
Поддерживается IE начиная с 5.5
scrollbar-darkshadow-color - задает цвет "тени", отбрасываемой бегунком и кнопками прокрутки полосы прокрутки (цвет правых и нижних гранией).
scrollbar-darkshadow-color: { Цвет };
Поддерживается IE начиная с 5.5
scrollbar-face-color - задает цвет бегунка и кнопок прокрутки полосы прокрутки.
scrollbar-face-color: { Цвет };
Поддерживается IE начиная с 5.5
scrollbar-highlight-color - задает цвет "освещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней).
scrollbar-highlight-color: { Цвет };
Поддерживается IE начиная с 5.5
scrollbar-shadow-color - задает цвет "неосвещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). Не путать с цветом "тени", задаваемым атрибутом scroll-darkshadow-color.
scrollbar-shadow-color: { Цвет };
Поддерживается IE начиная с 5.5
scrollbar-track-color - задает цвет рабочей части полосы прокрутки, т.е. той ее части, по которой перемещается бегунок.
scrollbar-track-color: { Цвет };
Практическое задание.
1.Создать HTML-страницу с использованием CSS.
2.Определить для тега <P> синий цвет шрифта, семейство шрифта, размер шрифта (на своё усмотрение).
3.Определить универсальный стиль, в котором переопределить цвет текста, размер шрифта, семейство шрифта (на своё усмотрение).
4.Переопределите тег <body>: цвет фона, размер шрифта, цвет шрифта, семейство шрифта (на своё усмотрение).
Контрольные вопросы.
1.Для чего были разработаны каскадные таблицы стилей?
2.Свойства шрифта и его атрибуты.
3.Цветовая гамма и его атрибуты.
Подготовка отчета по практическому заданию.
Отчет должен состоять из следующих пунктов:
1. Краткие теоретические сведения.
2. Индивидуальное практическое задание, метод его выполнения, текст кода программы и полученные результаты.
3. Краткое заключение.
Пример выполнения 5-го практического задания: Каскадные таблицы стилей CSS. Использование свойств шрифта и цветовой гаммы.
HTML код:
Index.htm
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="main.css">
<TITLE>Практическое задание №5.CSS. Использование свойств шрифта и цветовой гаммы.</title></head>
<BODY>
<TABLE BORDER="1" WIDTH="95%" HEIGHT="80%" ALIGN="CENTER" VALIGN="CENTER">
<CAPTION><H1>Практическое задание №5</h1></caption>
<TR>
<TD colspan="2">
Переопределённый тег <BODY>:<BR>
BODY {COLOR: black; background-color: c5c5c5; font-family: sans-serif; font-size: 200%;}
</td>
</tr>
<TR>
<TD WIDTH="50%">
После переопределения тега <P> в P {COLOR: blue; font-family: Courier; font-size: 20px;} текст выглядит следующим образом:
<P>Переопределённый текст</p>
</td>
<TD WIDTH="50%">
А это универсальный стиль.universal {COLOR: purple; font-size: 30px; font-family: Comic;}
<H1 class="universal">Вот так выглядит текст переопределённый универсальным стилем</h1>
</td>
</tr>
</table><BR>
</body></html>
Main.css
P {COLOR: blue; font-family: Courier; font-size: 20px;}
.universal {COLOR: purple; font-size: 30px; font-family: Comic;}
BODY {COLOR: black; background-color: c5c5c5; font-family: sans-serif; font-size: 200%;}
Рис. 5. Результат выполнения 5-го практического задания.
|
|
Автоматическое растормаживание колес: Тормозные устройства колес предназначены для уменьшения длины пробега и улучшения маневрирования ВС при...
Наброски и зарисовки растений, плодов, цветов: Освоить конструктивное построение структуры дерева через зарисовки отдельных деревьев, группы деревьев...
Папиллярные узоры пальцев рук - маркер спортивных способностей: дерматоглифические признаки формируются на 3-5 месяце беременности, не изменяются в течение жизни...
История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!