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.  

 

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

29501. ФЕНОМЕН ВЛАСТИ В ОБЩЕСТВЕННОМ МНЕНИИ: ПАРАДОКСЫ И СТЕРЕОТИПЫ ВОСПРИЯТИЯ 123.5 KB
  При этом за пределами внимания остаются особенности представлений о природе и функциях власти присущие массовому сознанию современного общества. Необходимые разграничения В нашем общественном мнении обычно слабо различаются механизмы и функции власти структура властных институтов роли и действия конкретных лиц наделенных властью. Многочисленные опросные данные относительно доверия к социальным институтам регулярно публикуемые в журнале Мониторинг показывают существенные различия в отношении населения к власти федерального центра и...
29502. ИНДЕКСЫ СОЦИАЛЬНЫХ НАСТРОЕНИЙ В «НОРМЕ» И В КРИЗИСЕ 164 KB
  В последнее время большую международную известность приобрел индекс потребительских настроений который в нашей стране разрабатывается группой ИПНРоссия на основе регулярных мониторинговых исследований ВЦИОМ; его результаты широко освещаются в периодической печати в том числе в журнале Мониторинге общественного мнения2. По аналогичным методикам могут быть построены как частные так и сводный индексы социальных настроений и установок. По своей методологической природе любой сконструированный индекс величина искусственно полученная в...
29503. ПРОБЛЕМА ЭМОЦИОНАЛЬНОГО БАЛАНСА ОБЩЕСТВА 182.5 KB
  Высказанные им соображения о методологической слабости психологической трактовки распространенных в исследованиях общественного мнения в том числе и проведенных ВЦИОМ перечней различных страхов представляются вполне правомерными. Представляется полезным обсудить особенности природы и функций социальных страхов различных типов в их соотношении с другими компонентами эмоционального поля общества например интересами радостями позитивными оценками и переживаниями. Первое и важнейшее различение с которым приходится сталкиваться при...
29504. «ЧЕЛОВЕК СОВЕТСКИЙ» ПЯТЬ ЛЕТ СПУСТЯ: 1989-1994 (Предварительные итоги сравнительного исследования) 86 KB
  ВЦИОМ провел обширное исследование Советский человек результаты которого составили основу коллективной монографии2. было осуществлено новое исследование направленное на выявление изменений в установках ценностях нормативных структурах поведения человека в условиях социальных перемен и потрясений прошедшего периода. В первом исследовании было опрошено 2700 человек в нескольких республиках СССР в том числе 1325 человек в России во втором 3000 человек в различных регионах России.
29505. ВОЗВРАЩАЯСЬ К ФЕНОМЕНУ «ЧЕЛОВЕКА СОВЕТСКОГО»: проблемы методологии анализа 89 KB
  Все это совершенно новые типы ориентаций не имеющие аналогов и корней в советской реальности или в традиционных характеристиках человека советского. В условиях продолжающегося кризиса государственно-политических институтов общества не только важнейшими показателями его состояния но в значительной мере и условием социального выживания являются именно те нормативные и ценностные структуры которые действуют на уровне социального человека то есть те которые интериоризированы в структуре усвоенных им ориентаций и рамок восприятия...
29506. ЧЕЛОВЕК В ПОИСКАХ ИДЕНТИЧНОСТИ: проблема социальных критериев 97 KB
  С мыслью о своем народе опрошенные по программе Советский человек в 1989 и 1994 гг. Место где я родился и вырос 40 41 Наше прошлое наша история 24 37 Территория на которой мы живем 10 25 Язык моего народа 22 19 Родная природа 16 18 Государство в котором я живу 28 17 Исследования по программе Советский человек 1989 г. N = 1325 человек и 1994 г. N = 3000 человек.
29507. Сексуальні девіації, їх причини і форми 106.5 KB
  Вона характеризується значним підвищенням цінності сексуального життя для людини і витискання інших цінностей. При девіантній гіперсексуальності людина використовує статевий контакт не тільки для отримання сексуального задоволення а скоріше для себе здійснюється сексуальний контакт без урахування згоди партнера за кількістю тривалістю часом місцем та формою реалізації. При цьому можуть використовуватись засоби сексуального контакту з приниженням партнера залякуванням його тощо. Асексуальна поведінка людина знижує значимість і...
29508. Сексуальні перверзії, їх причини і форми 73 KB
  Особливу групу сексуальних девіацій раніше уподобань тепер є: з одного боку традиційна гетеросексуальна орієнтація а з другого має місце тенденція до порушення ідентифікації своєї статі. Гомосексуальна поведінка сексуальна орієнтація людини нетрадиційна спрямована на осіб своєї статі без суттєвої зміни ідентифікації своєї статі. Гомосексуалізм при вихованні або перебуванні ддовгий час серед людей своєї статі вязниця інтернати тощо. Такий тип гомосексуалізму зветься егодистонічним якщо у людини виявляється спаяність зрощування...
29509. Психотерапія сексуальних розладів 83 KB
  Психотерапія сексуальних розладів. Психотерапія сексуальних розладів. В наш час дія при проведенні психотерапії сексуальних дисфункцій більш визначена ніж медикаментозна терапія. Карен Хорні підкреслювала що розвиток сексуальних порушень найбільшу роль відіграє невротичний перехрест комплексів.