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.  

 

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

23579. Отсутствующая структура Введение в семиологию 2.96 MB
  Код [2. Коды и лексикоды [2. Коды и их модификации [2. Кодифицируемость уровней [2.
23580. Россия в метафорическом зеркале: когнитивное исследование политической метафоры 1.25 MB
  Чудинов Россия в метафорическом зеркале: когнитивное исследование политической метафоры 1991 2000 УДК 408. Ч84 Россия в метафорическом зеркале: Когнитивное исследование политической метафоры 1991 2000: Монография Урал. ISBN 5718602778 Монография посвящена исследованию закономерностей моделирования образа современной России в зеркале концептуальной метафоры в котором вне зависимости от чьихлибо симпатий и антипатий достаточно объективно фиксируется подлинная картина национального самосознания в котором отражаются как традиционные...
23581. Семиосфера. Культура и взрыв Внутри мыслящих миров 5.53 MB
  ЛОТМАН Семиосфера Культура и взрыв Внутри мыслящих миров Статьи Исследования Заметки СанктПетербург ИскусствоСПБ О метаязыке типологических описаний культуры О семиотическом механизме культуры Миф имя культура Культура как коллективный интеллект и проблемы искусственного разума Феномен культуры Технический прогресс как культурологическая проблема Культура как субъект и самасебе объект О семиотике понятий стыд и страх в механизме культуры Память в культурологическом освещении [1] Содержание [2] Люди и знаки1 [3] Культура и взрыв...
23582. Язык и межкультурная коммуникация 1.96 MB
  Язык культура и культурная антропология 8 3. Межкулътурная коммуникация и изучение иностранных языков 14 5. Роль сопоставления языков и культур для наиболее полного раскрытия их сущности 19 Часть I. Язык как зеркало культуры 21 Глава 1.
23583. ЯЗЫК И БЕССОЗНАТЕЛЬНОЕ 2.05 MB
  Тексты собранные в книге последовательно представляют анализы общей проблематики бессознательного лингвистической структурированности афатических расстройств речи ребенка поэтической речи проблем семиотики структур языка как такового и его наименьшей смысловой единицы фонемы. Хайдеггером и наоборот спор Хайдеггера с семиотическим представлением языка встречи с Жаком Лаканом совершенно поновому осмыслившем 5 наследие Фрейда проштудировавшем и Хайдеггера и Якобсона вес это тот новый круг внутри которого вновь и вновь можно...
23584. ВЕЩЬ И ИМЯ 697.22 KB
  И физическая материя кресла и его отвлеченная идея не суть вещи реального обихода но исключительно предмет мыслительных операций. А вот помоему имя вовсе не есть звук имя вещи есть сила самой вещи. Поэтому я прямо утверждаю что имя неотделимо от вещи что оно есть оформление самой вещи в ее объективном существовании. Получается типичный для всякой абстрактной метафизики дуализм: вещи сами по себе без всякого имени а имена наши субъективные звуки сами по себе.
23585. ВЫСКАЗЫВАНИЯ, ЭКСПЛИЦИРУЮЩИЕ УСТАНОВКУ НА РАЗЛИЧНЫЕ СТОРОНЫ ЛИЧНОСТИ АДРЕСАТА - (лингвистический и философско-антропологический аспекты) 1.74 MB
  Близки к высказываниям подобным примеру 9 Ассертивы оценивающие знания собеседника вообще его эрудицию уровень образования начитанность: You know more than you think.Волошинова посвященные философии языкознания и Теория речи и языка английского исследователя А.Серля для директявов следующие: 1па speaker is not interested говорящий Нб Заинтересован е совершении действия; Benfaavoid Dh benefit for the _ польза слушающего Б ТОМhearer is in avoiding danger чтобы избежать опасности; KsDh speaker'...
23586. Язык как деятельность. Опыт интерпретации концепции 1.38 MB
  Дается характеристика этого принципа и его места в философии и методологии рассматривается типология деятельностных представлений языка в лингвистике. Деятельностная ориентация в построении картины языка в ходе исторического пути лингвистической науки сменялась нередко прямо противоположной а иногда и сосуществовала с ней. После блистательного опыта деятельностной трактовки языка у Гумбольдта в лингвистике наблюдается охлаждение к деятельностному видению языка и попыткам построения теоретических концепций исходящих из понимания языка как...
23587. СЕМИОТИЧЕСКИЕ ИССЛЕДОВАНИЯ (знак, схема, знание, семиотический организм, феномен человека). 440 KB
  Розин СЕМИОТИЧЕСКИЕ ИССЛЕДОВАНИЯ знак схема знание семиотический организм феномен человека. Действительно возражая против социальнопсихологического подхода в семиотике ставящего природу знака в зависимость от понимания и других психических процессов человека Г. Дело в том что оно никак не учитывает роль актанта человека интерпретирующего и действующего. Это определение вызывает массу вопросов например стало ли нам понятнее от замены сходства на изоморфизм почему семиотические понятия Эко заменяет математическими и...