14122

ОСНОВЫ CSS. Каскадные таблицы стилей

Конспект урока

Информатика, кибернетика и программирование

УРОК 12 ОСНОВЫ CSS Каскадные таблицы стилей CSS Cascading Style Sheets это средство позволяющее задавать различные свойства HTMLтегам. Например можно задать способ оформления вставленной картинки указать как должен выглядеть конкретный абзац P заголовок H1H2ссылка А Час

Русский

2013-05-21

309 KB

16 чел.

УРОК 12

ОСНОВЫ CSS

Каскадные таблицы стилей (CSS — Cascading Style Sheets) — это средство, позволяющее задавать различные свойства HTML-тегам. Например, можно задать способ оформления вставленной картинки, указать, как должен выглядеть конкретный абзац P, заголовок H1,H2,ссылка А,…

Частное применение стилей

Применить стиль частным образом, т.е. к отдельному тегу позволяет атрибут style. Значением атрибута является список стилевых определений. Стилевое определение задается в виде:

характеристика: величина;

Атрибут style можно использовать практически в каждом теге, задавая его специфические свойства.

Например:

Задание стиля для текстовых абзацев в HTML-коде:

<html>

<head>

<title>Частное применение стилей с помощью атрибута style</title>

</head>

<body>

<h2 align="center">Частное применение стилей с помощью атрибута style</h2>

  <p style="font-family : Arial;">Изменение шрифта</p>

  <p style="font-size : 1cm;">Изменение размера</p>

  <p style="color: #005980;">Изменение цвета</p>

   <p style="font-family: Arial;font-size : 1cm;color : #005980;">

         Изменение шрифта, и размера, и цвета</p>

</body>

</html>

Отображение текста в окне браузера

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

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

Внутренняя таблица стилей позволяет сосредоточить все стилевые установки Web-страницы в одном месте, задается в головной части Web-документа (<HEAD>…</HEAD>) с помощью тега <STYLE>…</STYLE>. Внутри тега перечисляются дескрипторы или классы и стилевые определения для каждого из них, заключенные в фигурные скобки {}.

Например:

Задание стиля для гиперссылок с помощью внутренней таблицы стилей:

A:link  вид еще не выбиравшейся ссылки;

A:hover  определяет вид ссылки во время наведения курсора мыши;

A:visited  вид посещенной ссылки;

<html>

 <head>

  <title>Стилевое оформление гиперссылок</title>

 <style>

A:link {

 font-size : 50px;

 color: #4A0000;

 font-weight : bold; }

A:hover {

 font-size : 50px;

 color: #D20000;

 font-weight : bold;

 font-style : italic;}

A:visited {

 font-size : 50px;

 color: #FF2B2B;

 font-weight : bold;}

   </style>

 </head>

 <body>

<h2 align="center">Стилевое оформление гиперссылок</h2>

<a href="style2.htm" title="Это ссылка на текущую страницу">Ссылка1</a><br>

<a href="style2.htm" title="Это ссылка на текущую страницу">Ссылка2</a><br>

<a href="style2.htm" title="Это ссылка на текущую страницу">Ссылка3</a><br>

<a href="style2.htm" title="Это ссылка на текущую страницу">Ссылка4</a><br>

</body>

</html>

Отображение ссылок в окне браузера

Внутренние таблицы стилей легко исправлять, придавая новый вид элементам страницы. Для браузеров, не поддерживающих CSS, содержимое команды <STYLE>…</STYLE>, рекомендуется заключить в HTML-комментарии (<!-- … -- >).

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

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

<LINK rel=stylesheet  type="text/css"  href=имя файла >

Рассмотрим пример создания внешней таблицы стилей с помощью редактора стилей в программе HomeSite.

  1.  На панели инструментов Tools нажмите кнопку (StyleEditor). Откроется диалоговое окно редактора стилей:

  1.  Выберите команду NewSelector пункта меню Edit (или кнопка ). В открывшемся окне укажите тег IMG (или имя класса, к которому хотите применить стилевое описание) > OK.

    В окне редактора стилей слева появится новое стилевое определение
    IMG{   }, а справа окно со списком характеристик для стилевого определения.
  2.   Теперь можно выбирать из списка характеристики и их значения.

    Запись IMG{ border : 4px ridge #97A3B7;} означает, что рамка вокруг картинок будет выпуклой, шириной 4 пикселя, «мышиного цвета».
  3.  Заданные стилевые определения сохраняются в файле с расширением .css.
  4.  Связь Web-страницы с этим файлом можно указать с помощью тега LINK в заголовочной части Web-документа <HEAD>…</HEAD> :
    <link href="styleimg.css" rel="stylesheet" type="text/css">
    В этом примере мы определяем постоянную таблицу стилей, находящуюся в файле
    styleimg.css.

Результат стилевого оформления картинки
Задание

  1.  Опытным путем определите приоритеты при комбинировании применяемых стилевых указаний в отдельном теге, в HEAD, в css-файле для одного и того же элемента Web-страницы.
  2.  Применить стилевое оформление к фрагментам текста (заголовкам, пунктам меню) в своей проектной работе

PAGE  2

  1.  

 

А также другие работы, которые могут Вас заинтересовать

37605. Изучение методов векторного синтеза и отображения модулированных сигналов в современных систем связи 3.35 MB
  Формирование с помощью программы VSG модулированного сигнала в соответствии с данными приведенными в таблице ниже. Использованные параметры сигнала: Выборок на символ 16; Количество символов 500; Опорный уровень 0 дБ.1 IQ составляющие сигнала QPSK во временной области без использования предмодуляционного фильтра Рисунок1.2 Векторная диаграмма и Сигнальное созвездие QPSK сигнала Далее по заданию вводим обработку сигнала с помощью предмодуляционного фильтра.
37606. Исследование однородной линии в установившемся режиме 282 KB
  Минск 2013 Цель работы: Наблюдение основных режимов работы линии исследование частотных свойств входного сопротивления. Домашнее задание: По исходным данным таблицы 1 согласно варианту рассчитали длину линии которой эквивалентна данная искусственная линия содержащая 16 звеньев. Таблица 1 Вариант L0 мкГн км C0 пФ км r0 Ом км n0 1 620 21200 11 15 Определили частоту при которой на линии укладывается одна длина волны =16.
37607. Исследование характеристик метода доступа в сетях Ethernet 243.5 KB
  Мы добились схожих результатов с Ethernet, однако скорость увеличилась в 2 раза. Загруженности сети 100% соответствует интенсивность сети меньше 50.
37608. Проектирование и моделирование VHDL-описаний интегральных схем 124 KB
  Вывод: в ходе лабораторной работы изучили возможности языка VHDL и пакета ActiveHDL для проектирования заказных БИС
37609. Сценарий для утилиты Apache Ant, реализующий компиляцию 76 KB
  Каждый этап должен быть выделен в отдельным блок сценария; все переменные и константы, используемые в сценарии должны, должны быть вынесены в отдельный файл параметров; MANIFEST.MF должен содержать информацию о версии и о запускаемом классе.
37610. Изучение частотных характеристик мультивибратора Ройера в зависимости от величины нагрузки 310.5 KB
  Установив входное напряжение 30 В, путем изменения нагрузки, изменяем ток нагрузки до минимального возможного значения, фиксируя каждый раз значения токов Iвх , Iн, напряжения на нагрузке и частоты. Рассчитываем значения потребляемой мощности, выходной мощности и КПД
37611. Описание и моделирование регулярных (систолических) схем 289.5 KB
  Необходимо спроектировать VHDL-модель заданного устройства одним из указанных способов согласно требованиям, сформулированным к каждому варианту задания, разработать тестирующие воздействия и выполнить моделирование работы устройства.
37612. Проведение экспериментальных работ при исследовании переходных процессов в электрических цепях 115 KB
  На экране осциллографа получаем изображение зависимости напряжения и тока конденсатора от времени.Зарисовываем осциллограммы тока и напряжения на конденсаторе: Рассчитываем по осциллограмме постоянные времени разряда и заряда конденсатора по кривой uсt. На экране осциллографа получаем изображения зависимости тока и напряжения катушки от времени. Зарисовываем осциллограммы тока и напряжения катушки: Рассчитываем по осциллограмме постоянные времени при подключении и отключении катушки по кривой it.
37613. История государства и права зарубежных стран (ИГПЗС) 712 KB
  В силу конкретноисторического подхода к государственноправовым явлениям и процессам присущим тому или иному обществу на том или ином этапе его развития оперируя множеством фактов и событий политической жизни деятельности государств правительств классов и партий ИГПЗС ставит своей целью выявление исторических закономерностей развития государства и права. ИГПЗС тесно связана с другой юридической наукой и учебной дисциплиной Теорией государства и права также изучающей закономерности развития государства и права. Теория...