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.  

 

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

14127. UNIT 5. MOTHERBOARD 35 KB
  UNIT 5. MOTHERBOARD I. Practice reading the following words: motherboard personal circuit electronic controller component either via determine features wireless expansion industry micro architecture proprietary endure accommodate video monitor prior processor universally current Ethernet graphics existing extension firmware rear failure volatile. II. Before reading the text try to answer these questions: 1. What is a motherboard 2. What is a...
14128. UNIT 6. PERIPHERALS 39 KB
  UNIT 6. PERIPHERALS I. Practise reading the following words: attached scanner internal video accessories refers component processing access similarly represents audio converted accommodate typical processor transform electronic capture included Ethernet chat advantage convert item graphics monitor produces permanent transparencies primarily via. II. Before reading the text try to answer these questions: 1. What components does an ordinary PC...
14129. UNIT 7. KEYBOARDS 46 KB
  UNIT 7. KEYBOARDS I. Practise reading the following words: component primary commands virtually obsolete corporate term universal specification equipment status automating layout arrangement area numeric mode isolated modified vendor menu cursor simulate mandatory via economic requirement environment support minimize sacrifice. II. Before reading the text try to answer these questions: 1. What input devices do you know 2. What input devices d...
14130. Основні етапи розвязування задачі з використанням компютера 67.5 KB
  Тема уроку: Основні етапи розвязування задачі з використанням компютера Мета уроку: Дати поняття про основні етапи розвязування задачі з використанням компютера.Тип уроку: Лекційний. Теоретичний матеріал: Зараз важко уявити собі життя людини без компютера. Люди в
14131. Поняття інформаційної моделі 39 KB
  Тема уроку: Поняття інформаційної моделі Мета уроку: Дати поняття про моделювання та створення інформаційних моделей обєктів.Тип уроку: Лекційний. На початку уроку рекомендується провести усне опитування за темою попереднього уроку з метою визначення засвоєного ма...
14132. Величини. Типи даних. Стандартні типи даних. Набір функцій і операцій, введених для кожного зі стандартних типів 83.5 KB
  Тема уроку: Величини. Типи даних. Стандартні типи даних. Набір функцій і операцій введених для кожного зі стандартних типів. Мета уроку: дати поняття величини та типів даних визначити стандартні типи даних їх опис та набір функцій і операцій для кожного зі стандартних ...
14133. Вказівка надання значення. Вказівки введення та виведення. Структура програми на мові програмування Паскаль 60 KB
  Тема уроку: Вказівка надання значення. Вказівки введення та виведення. Структура програми на мові програмування Паскаль. Мета уроку: дати поняття вказівки присвоювання познайомитись з вказівками введення та виведення зі структурою програми на мові Паскаль.Тип уроку:...
14134. Формування зображення на екрані ПЕОМ. Створення найпростіших лінійних програм 66.5 KB
  Тема уроку: Формування зображення на екрані ПЕОМ. Створення найпростіших лінійних програм Мета уроку: Дати дитині поняття про режими роботи монітору та принципи виведення зображення на екран в цих режимах.Тип уроку: Лекційний з практичними прикладами. Лекційний мате...
14135. Створення найпростіших лінійних програм 27 KB
  Тема уроку: Створення найпростіших лінійних програм Мета уроку: Дати дитині поняття про режими роботи монітору та принципи виведення зображення на екран в цих режимах.Тип уроку: Практична робота. На початку уроку необхідно нагадати дітям правила поведінки в комп'юте