14122

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

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

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

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

Русский

2013-05-21

309 KB

14 чел.

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

 

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

78590. ВОДОЁМЫ. РОДНИК 55 KB
  Формировать первичные знания, развивать стремление больше знать; ознакомив с литературой, вызвать желание больше читать, Заранее планируя свой выбор; учить умение высказывать свою точку зрения, опираясь на знания и опыт; воспитывать бережное отношение к водоемам, экономное использование пресной воды.
78591. Рідний край, де ми живемо, Україною зовемо 78 KB
  Обладнання: карта України державні символи України картки для роботи в парах зошит Я і Україна кросворд ілюстрації з краєвидами Києва різнокольорові паперові квітки недомальовані смайлики. Люби шануй оберігай Усе що зветься Україна.
78592. Зовнішня будова рослин. Рослини - живі організми. Рослини - джерело поживних речовин і кисню на Землі 97.5 KB
  Поглибити поняття органів рослин; сформувати уявлення про значення кожного органу (кореня, стебла, листків, квіток, плодів з насінням) для рослини, про особливості живлення і дихання рослин; уміння розрізняти органи рослин, називати їх; розвиток пізнавальних інтересів учнів...
78593. Кругообіг води в природі. Вода має бути чистою 155 KB
  Продовжити формувати поняття вода уявлення про умови перетворення води з одного стану в інший про кругообіг води в природі про необхідність бережного використання її. Обладнання: склянки з водою кусочки льоду скляна пляшка з замороженою водою; таблиця Кругообіг води в природі...
78594. ПІДСУМКОВИЙ УРОК ПО ТЕМІ «ТВАРИНИ» 44 KB
  Мета: Узагальнити і систематизувати знання учнів про найбільші групи тварин, розвивати вміння порівнювати варини,класифікувати їх за суттєвими ознаками, встановлювати взаємозв’язки з неживою природою; розвивати спостережливість,вміння аналізувати, робити висновки; виховувати шанобливе ставлення до тварин.
78595. Значення ґрунту в природі і для людей. Охорона ґрунту 3.69 MB
  Мета: формувати уявлення про значення ґрунтів в природі та значення його для людей про шляхи забруднення і руйнування ґрунту про охорону і збереження ґрунту розвивати логічне мислення виховувати бережливе ставлення до природних багатств.
78596. Формы финансовой поддержки малых предприятий 30 KB
  Государственная поддержка малого предпринимательства реализуется по следующим направлениям: формирование инфраструктуры поддержки и развития малого предпринимательства; создание льготных условий использования государственных финансовых материальнотехнических и информационных ресурсов научнотехнических разработок и технологий; учреждение порядка регистрации субъектов малого предпринимательства лицензирования их деятельности сертификации их продукции предоставления статистической и бухгалтерской отчетности; поддержка...
78597. Современные тенденции развития малого предпринимательства в регионах 48.5 KB
  Современные тенденции развития малого предпринимательства в регионах. В современных условиях роль малого бизнеса в рыночной экономике растет. Функции малого бизнеса: Экономические функции малого бизнеса: Придает рыночной системе необходимую гибкость активизация структурных сдвигов процессов разгосударствления и приватизации. Социальные функции малого бизнеса: Обеспечивает рост занятости.
78598. Взаимодействие малых и крупных компаний 56 KB
  Ford Motor США Mitsui Япония Mitsubishi Япония Itochu Япония Функции крупного бизнеса. Именно благодаря большим предприятиям идет развитие бизнеса в основе которого лежат механизмы снижения издержек производства. С наибольшей наглядностью эти свойства крупного бизнеса проявились в деятельности современных транснациональных корпораций ТНК. Эти особенности крупных фирм создают возможности для устойчивого развития бизнеса в средних и мелких размерах.