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.  

 

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

79072. Уголовное право Рима в древнейший период. Виды деликтов 19.71 KB
  Многие из таких частных деликтов известных Законам XII таблиц стали рассматриваться как преступления в последующем. преступления которые наказывались от имени римского народа а взыскания по ним шли не частным лицам а государству. К ним относились прежде всего преступления против республики. В зависимости от характера преступления смертная казнь принимала различные формы: отсечение головы утопление распятие сбрасывание с Тарпейской скалы и т.
79073. Формы гражданского процесса 28.39 KB
  Характерной особенностью римского гражданского процесса в течение республиканского периода и периода принципата было деление процесса на две стадии производства из которых первая называлась вторая judidum. Римская же первая стадия процесса приводила к окончанию дела только в случае признания иска ответчиком а такой вопрос как видно из открытых в 1933 году новых фрагментов Институций Гая прямо ставился истцом; требую чтобы ты сказал да или нет.Какими потребностями было вызвано деление римского процесса на две стадии и какие цели оно...
79074. Эмфитевзис и суперфиций. Сущность и причины образования этих институтов. Прекращение эмфитевзиса и суперфиция. Залог и его формы. Ипотека 27.26 KB
  Установление одного из этих двух прав на земельный участок дает право собственности на эту землю почти только номинальным; лишь после прекращения эмфитевзиса или суперфиция право собственности на данный участок получает реальное выражение. Как показывает термин emphyteusis от греческого emphyteuein насаждать этот институт перешел в римское право из Греции где наследственная аренда земли имела широкое применение эмфитевзис был издавна также в практике Египта и Карфагена.В содержание эмфитевзиса входит право пользоваться земельным...
79075. Безымянные контракты. Их характеристика. Типы безымянных контрактов. Виды пактов 32.41 KB
  сведены к четырем основным типам: 1 do ut des: я передаю тебе право собственности на вещь с тем чтобы ты передал мне право собственности на другую вещь; 2 do ut fcis: я передаю тебе право собственности на вещь с тем чтобы ты совершил известное действие оказал какието услуги и т.; 3 fcio ut des: я совершаю для тебя известное действие с тем чтобы ты передал мне право собственности на известную вещь; 4 fcio ut fcis: я совершаю для тебя известное действие с тем чтобы и ты совершил для меня какоето действие. При куплепродаже...
79077. Вербальные договоры. Стипуляция. Порядок заключения и содержание 25.9 KB
  Открытые в 1933 году новые фрагменты из Институций Гая доказывают что договор стипуляции был известен уже законам XII таблиц.Несмотря однако на все смягчения необходимых формальностей в классическом римском праве всетаки прочно охранялись некоторые черты стипуляции как формального контракта: присутствие договаривающхся сторон в одном месте устный вопрос кредитора и такой же устный ответ должника совпадающий по смыслу с вопросом. Обязательство возникшее из стипуляции было обязательством строгого права и потому подлежало строго...
79078. Виды деликтов и обязательства из них. Личная обида. Кража. Неправомерное повреждение имущества. Другие виды частных деликтов 26.1 KB
  Наиболее подходящий русский термин соответствующий furtum кража. Однако furtum не совпадало полностью с современным понятием кражи. Во-первых к категории furtum в Риме относились и те деликты которые в современном праве именуются кражей и те которые теперь называются присвоением растратой и т.
79079. Владение и право собственности. Владение и держание. Виды. Установление и прекращение владения. Преторские интердикты. Защита добросовестного владения 33.21 KB
  Факты с наступлением которых лицо приобретает право собственности называются способами приобретения права собственности modus cquirendi а те юридические факты в особенности сделки которые служат основанием для приобретения права собственности называются титулом приобретения titulus cquirendi.Способы приобретения права собственности делятся на первоначальные и производные. При первоначальном приобретении права собственности нет праводателя ограниченность правомочий которого могла отразиться на содержании права приобретателя.
79080. Деятельность римских юристов. Формы их деятельности. Значение римской юриспруденции для формирования и развития права. Сабиньянская и прокулянская школы юристов 21.39 KB
  Сабиньянская и прокулянская школы юристов. В произведениях Цицерона формы деятельности римских юристов характеризуются терминами respondere cvere gere а также scribere. Термином respondere обозначается консультационная работа римских юристов дача гражданам обращавшимся к юристам советов по возбуждавшим сомнение вопросам: cvere ограждение интересов данного гражданина при совершении сделок также путем совета не включать какоелибо невыгодное условие и т.