14122

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

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

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

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

Русский

2013-05-21

309 KB

12 чел.

УРОК 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.  

 

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

83765. Налоговая система. Основы законодательства о налогах и сборах. Принципы налогообложения 48.43 KB
  Понятие НС сегодня следует отнести к дискуссионным вопросам и актуальному предмету исследования в сфере налогов.2: НС – это совокупность налогов сборов пошлин и других платежей взимаемых в установленном порядке.: НС – это совокупность установленных в государстве существенных условий налогообложения установленных НП и налоговым законодательством. 3 НК порядок установления и введения налогов часть 1 НК система налогов – совокупность отдельных налогов обладающая организационноправовым и экономическим единством.
83766. Элементы юридического состава налога. Основные и факультативные. Понятие и их правовое значение 43.59 KB
  Обязанность плательщика по уплате налога устанавливается совокупностью элементов юридического состава налога. Элементы налога – это внутренние исходные функциональные единицы которые в своей совокупности составляют юридическую конструкцию налога и придают им их универсальность. Обязательные существенные элементы юридического состава налога это элементы без которых налоговое обязательство и порядок его исполнения не могут считаться определенными.
83767. Субъект налогообложения: понятие субъектов, виды, правовой статус 47.87 KB
  Общественные отношения преимущественно образующие предмет налогового права складываются относительно перехода права собственности на денежные средства. Большинство названных отношений направлены на достижение баланса частных и публичных интересов поэтому и понятие субъекта налогового права носителя интереса является ключевым. Точное определение субъекта налогового права имеет и практическое значение поскольку позволяет выявить круг лиц вступающих в налоговые отношения и действия которых влекут юридически значимые последствия. Наличие...
83768. Объект и предмет налогообложения. Масштаб налога и налоговая база 44.73 KB
  Объект налогообложения это те юридические факты действия события состояния которые обуславливают обязанность субъекта заплатить налог совершение оборота по реализации товара работ услуг; ввоз товара на территорию России; владение имуществом; совершение сделки куплипродажи ценных бумаг; вступление в наследство; получение дохода и т. наличие объекта налогообложения. Налоговый кодекс Российской Федерации определяет понятие объект налогообложения так: Объектами налогообложения могут являться операции по реализации товаров работ...
83769. Налоговый период, порядок исчисления налога, способы, сроки и порядок уплаты налога 42.93 KB
  Налоговый период календарный год или иной период времени применительно к отдельным налогам по окончании которого определяется налоговая база и исчисляется сумма налога подлежащая уплате. Продолжительность момент начала и момент окончания каждого налогового периода устанавливается законодательством о налогах и сборах применительно к каждому отдельному налогу. Порядок исчисления налога ст.
83770. Понятие системы налогов и сборов. Структура и принципы построения 45.33 KB
  Система налогов и сборов не путать с налоговой системой это совокупность налогов и сборов взимаемых с плательщиков в порядке и на условиях определенных Налоговым кодексом. 12 НК РФ устанавливает следующие виды налогов и сборов в РФ: федеральные; региональные; местные. Федеральные налоги Федеральными налогами и сборами признаются налоги и сборы которые установлены НК РФ и обязательны к уплате на всей территории РФ при отсутствии специальных налоговых режимов п.
83771. Налоговое право РФ: общие положения, предмет, метод, система 46.7 KB
  Сегодня основными научными подходами для определения места НП в системе юридических наук являются: 1 концепция рассмотрения НП в качестве обособленной части АП швейцарская налоговая правовая доктрина 2 концепция рассмотрения НП в качестве обособленной части ФП неаполитанская налоговая правовая школа 3 концепция автономии НП согласно которой оно занимает особое или даже исключительное положение в системе права независимое от общих принципов как частного так и публичного права французская налоговая правовая доктрина 4 концепция...
83772. Источники налогового права. Налоговое законодательство и дополнительные источники налогового права 48.45 KB
  Налоговое законодательство и дополнительные источники налогового права. Источники налогового права это внешние конкретные формы его выражения т. правовые акты представительных и исполнительных органов государственной власти и органов местного самоуправления содержащие нормы налогового права.
83773. Нормы налогового права: понятие, особенности, виды норм налогового права 48.68 KB
  Особенности норм НП: 1 налоговые нормы отличаются от всех иных норм права по своему непосредственному целевому назначению 2 реализация большинства из них политически направлена в рамках внутренней и внешней экономической политики Признаки: 1 это правила поведения гарантированные государством 2 возлагают юридические обязанности и предоставляют субъективные права 3 имеют общеобязательный характер 4 всегда выражены в НПА 5 являются средством реализации публичных а не частных интересов 6 практически не имеют своего прототипа в...