www.popularsite.ru

RESTOR- От HTML до С++

Объявление

HTML

JavaScript

CSS

Flash MX
   

Содержание Курса(Введение в HTML)

     

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » RESTOR- От HTML до С++ » Основы работы с CSS » 2. Лекция: Синтаксис CSS и примеры использования

2. Лекция: Синтаксис CSS и примеры использования

Страница: 1
Тема закрыта

Сообщений 1 страница 10 из 10

1

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Синтаксис

Синтаксис CSS состоит из трех частей: селектора, свойства и значения:

селектор {свойство: значение}

Селектор — элемент/тег HTML, который необходимо определить. Свойство — атрибут, который желательно изменить. Каждое свойство может принимать значение. Существует ряд правил и рекомендаций, которые необходимо запомнить.

Свойство и значение разделяются двоеточием и помещаются внутри фигурных скобок:

p {font-size: 75%}

Если значение состоит из нескольких слов, то необходимо поместить значение в кавычки:

h1 {font-family: "lucida calligraphy"}

Если требуется определить более одного свойства, то необходимо разделить свойства точкой с запятой:

table { font-family: arial, "sans serif"; border-style: dotted}

Чтобы определения стилей было удобно читать, можно каждое свойство писать на отдельной строке:

h2
{
font-family: arial;
margin-right: 20pt;
color:#ffffff }

При определении правил допускается группировка селекторов, при этом в качестве разделителя селекторов используется запятая. В следующем примере в группу были объединены все элементы заголовков. Все элементы заголовков будут выведены шрифтом sans serif:

p,table,li
{
font-family: "sans serif";
}

0

2

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Селектор класса (class)

При Web-разработке часто возникает необходимость в задании различных стилей для одного и того же типа элемента HTML. Для решения этой задачи используют селектор класса.

Предположим, что в документе требуется два типа заголовков: более крупный заголовок должен иметь внешний отступ 10 пунктов, а второй — 20 пунктов. Вот как это можно сделать с помощью стилей:

h1.stepleft {margin-left: 10pt}
h2.stepright {margin-left: 20pt}

Для применения этих стилей в документе HTML необходимо будет использовать атрибут класс:

<h1 class="stepleft">
Заголовок с внешним отступом 10 пунктов.
</h1>

<h2 class="stepright">
Заголовок с внешним отступом 20 пунктов.
</h2>

В тоже время не допускается следующее определение атрибута class:

< h1 class="stepleft" h2 class="stepright">,

т.е. можно определить только один атрибут class

Можно также опустить имя тега в селекторе, чтобы определить стиль, который будет использоваться всеми элементами HTML, имеющими определенный class.

.left {margin-left: 40pt}

В следующем примере все элементы HTML, имеющие class="left", будут иметь внешний отступ, равный 40 пунктам.

В следующем коде элементы table и p имеют class="left". Это означает, что оба элемента будут следовать правилам в селекторе ".left":

<table class="left">
Эта таблица будет иметь внешний отступ, равный 40 пунктам.
</table>

<p class="left">
Этот параграф будет иметь внешний отступ, равный 40 пунктам.
</p>

Для корректности обработки кода браузерами не рекомендуется начинать имя класса с числа, т.к. это не будет работать в Mozilla/Firefox.

0

3

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Селектор идентификатора (id)

Стили элементов HTML можно определить также с помощью селектора идентификатора, который определяется символом #.

Следующее правило стиля будет применимо к элементу, который имеет атрибут id со значением "fontsz":

#fontsz{font-size: 50%}

Следующее правило стиля будет применимо к элементу ul, который имеет атрибут id со значением "first":

ul#first
{
list-style: disc;
color: #ffffff
}

Для корректности обработки кода браузерами не рекомендуется начинать имя ID с числа, т.к. это не будет работать в Mozilla/Firefox.

0

4

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Комментарии CSS

Для пояснения кода и для последующего его редактирования используются комментарии, которые игнорируются браузерами. Комментарий CSS начинается символом "/*" и заканчивается символом "*/", как в примере ниже:

/* Первый комментарий. */
table
{
/* Второй комментарий. */
margin-left: 10pt;;
font-family: "sans serif";
/* Третий комментарий. */
border-style:outset
}

0

5

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Примеры использования CSS

Рассмотрим несколько примеров использования CSS:

1. Технология CSS позволяет связываться с внешней таблицей стилей. Для этого в файле HTML применяют тег

<link>:
<html>

<head>
<link rel="stylesheet" type="text/css"
   style="color:#666666;" href="http://site.ru/style.css" onMouseOver="menuSetHelpText('site');return false;" onMouseOut="menuClearHelpText()" title="ссылка на SITE.RU">
</head>

<body>

<ol><!—Список имеет внешний отступ в 10 пунктов -->
<li>для этого элемента списка будет задан шрифт "arial"</li>
<li>для этого элемента списка будет задан шрифт "arial"</li>
</ol>

<ul><!—Список имеет внешний отступ в 20 пунктов -->
<li>для этого элемента списка будет задан шрифт "arial"</li>
<li>для этого элемента списка будет задан шрифт "arial"</li>
</ul>

</body>
</html>

Внешний файл содержит следующее описание стилей (style.css):

ol {margin-left: 10pt}
ul {margin-right: 20pt}
li {font-family: arial}

0

6

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

2.Следующий файл HTML связывается с внешней таблицей стилей с помощью тега <link>:

<html>
<head>
<link rel="stylesheet" type="text/css"
    style="color:#666666;" href="http://site.ru/style2.css" onMouseOver="menuSetHelpText('site');return false;" onMouseOut="menuClearHelpText()" title="ссылка на SITE.ru">:
</head>

<body>

<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>

<a  style="color:#666666;" href="www.site.ru" onMouseOver="menuSetHelpText('site');return false;" onMouseOut="menuClearHelpText()" title="ссылка на SITE.ru">Здесь размещена ссылка</a>

</body>
</html>

Внешний файл содержит следующее описание стилей (style2.css):

body {background-color: #FFFFFF)}
table {margin-left: 10pt;}
td {font-size:10pt; color: blue}
a:link     {color:blue}
a:visited  {color:brown}
a:hover    {color:lime}
a:active   {color:gray}.

0

7

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Подключение таблицы стилей

Когда браузер считывает таблицу стилей, он форматирует документ согласно с этой таблицей. Существует три способа подключения таблицы стилей.

1.Подключение внешней таблицы стилей

Этот способ обычно применяется в ситуациях, когда один стиль определяется для множества страниц. Если необходимо быстро поменять дизайн Web-сайта этот способ идельно подходит – редактируется только один файл с таблицей стилей. Для подключения внешней таблицы стилей предназначен тег <link>, который размещается в разделе заголовка:

<head>
<link rel="stylesheet" type="text/css"
href="first.css" />
</head>

Данный код указывает браузеру на то, что определение стиля хранятся в файле first.css. Последний, в свою очередь, выполнит форматирование документа согласно с этим определением стиля.

Некоторые замечания:
внешнюю таблицу стилей можно создать в любом текстовом редакторе;
файл с внешней таблицей стилей не должен содержать никаких тегов html;
файл с внешней таблицей стилей необходимо сохранить с расширением .css.

Пример:

ul {margin-left: 10pt}
li {font-family: arial}
body {background-color: blue}

Для корректности отображения браузерами таблиц стилей необходимо исключить пробелы между значением свойства и единицами измерения, т.к. это будет работать правильно только в IE6, но не в Mozilla/Firefox или Netscape.

Пример с пробелом — "margin-left: 20 px";

пример без пробела — "margin-left: 20px".

0

8

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

2.Подключение внутренней таблицы стилей

Данный способ применяется тогда, когда один документ имеет уникальный стиль. Для определения внутренних стилей используют тег <style>, который размещается в разделе заголовка:

<head>
<style type="text/css">
li {font-family: arial}
p {font-size: 25%}
h1 {margin-right: 10pt}
</style>
</head>

В соответствии с определениями стиля браузер форматирует документ. Однако если он встретит незнакомые теги, то проигнорирует их. Например, старый браузер, который не поддерживает стили, проигнорирует тег <style>, но содержимое последнего будет выведено на странице. Чтобы этого не произошло, необходимо скрыть описание стиля в элементе комментария HTML:

<head>
<style type="text/css">
<!--
body {background-color: green}
table {border-style: dotted}
-->
</style>
</head>

0

9

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

3.Встроенные стили

Данный способ используется в том случае, если необходимо применить стиль к одному появлению элемента. Метод обладает существенным недостатком, т.к. он смешивает содержимое документа с его представлением и теряет, соответственно, многие преимущества таблиц стилей.

Для определения встроенных стилей в соответствующем теге применяют атрибут style, который может содержать любое свойство CSS.

Пример:

<body style="background-color: blue" >
<h1 style="color: yellow" >Заголовок H1</h1>
</body>

В примере показано, как задать цвет фона документа и цвет заголовка h1.

0

10

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Несколько таблиц стилей

В случае объединения или использования нескольких таблиц стилей могут возникнуть ситуации, когда некоторые свойства заданы для одного и того же селектора в разных таблицах стилей; тогда будут использованы значения из более конкретной таблицы стилей.

Например, внешняя таблица стилей имеет следующие свойства для селектора p:

p
{
font-family: "sans serif";
margin-left: 10pt;
font-style: italic;
font-weight: bold
}

А внутренняя таблица стилей имеет для селектора p следующие свойства:

p
{
margin-left: 20pt;
font-style: normal;
font-weight: bolder
}

Итак, при соединении внешней таблицы стилей с внутренней для селектора p будут определены следующие свойства:

font-family: "sans serif";
margin-left: 20pt;
font-style: normal;
font-weight: bolder

Таким образом, тип шрифта будет наследоваться из внешней таблицы стилей, а его стиль, вес и внешний отступ параграфа определяются внутренней таблицей стилей.

0

Тема закрыта
Страница: 1

Вы здесь » RESTOR- От HTML до С++ » Основы работы с CSS » 2. Лекция: Синтаксис CSS и примеры использования

Рейтинг форумов | Создать форум бесплатно