Будь умным!


У вас вопросы?
У нас ответы:) SamZan.ru

ЛАБОРАТОРНАЯ РАБОТА ’5 Знакомство с CSS Есть три способа применить правила CSS к HTMLдокументу.html

Работа добавлена на сайт samzan.ru: 2016-01-17

Акция
Закажите работу сегодня со скидкой до 25%
Узнать стоимость работы
Рассчитаем за 1 минуту, онлайн

Знакомство с CSS

Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем - то есть внешней/external таблице стилей.

Метод 1: Инлайн/In-line (атрибут style)

Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:

<html>

  <head>

    <title>Example</title>

  </head>

  <body style="background-color: #FF0000;">

    <p>This is a red page</p>

  </body>

</html>

 

Метод 2: Внутренний (тэг style)

Второй способ вставки CSS-кодов  - HTML-тэг <style>. Например:

<html>

  <head>

    <title>Example</title>

    <style type="text/css">

      body {background-color: #FF0000;}

    </style>

  </head>

  <body>

    <p>This is a red page</p>

  </body>

</html>

 

Метод 3: Внешний (ссылка на таблицу стилей)

Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. В данном учебнике мы будем использовать именно этот метод во всех примерах.

Внешняя таблица стилей это просто текстовый файл с расширением .css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.

Например, скажем, ваша таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:

Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:

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

 

Обратите внимание, как указан путь к вашей таблице стилей атрибутом href.

Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:

<html>

  <head>

    <title>My document</title>

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

  </head>

  <body>

  ...

 

Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла. 
Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.

Цвет переднего плана : свойство 'color'

Свойство color описывает цвет переднего плана элемента.

Например, представьте, что мы хотим сделать все заголовки документа тёмно-красными. Все заголовки обозначаются HTML-элементом <h1>. В нижеприведённом коде цвет элемента <h1> устанавливается красным.

h1 {

 color: #ff0000;

}

 

 

Цвета можно указывать как шестнадцатеричные значения, как в примере (#ff0000), либо вы можете использовать названия цветов ("red") или rgb-значения (rgb(255,0,0)).

Свойство 'background-color'

Свойство background-color описывает цвет фона элемента.

В элементе <body> размещается всё содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство background-color нужно применить к элементу <body>.

Вы можете также применять это свойство к другим элементам, в том числе - к заголовкам и тексту. В следующем примере различные цвета фона применяются к элементам <body> и <h1>.

 body {

 background-color: #FFCC66;

}

h1 {

 color: #990000;

 background-color: #FC9804;

}

 

 

Заметьте, что устанавливает два свойства для <h1>, разделяя их точкой с запятой.

Фоновые изображения [background-image]

CSS-свойство background-image используется для вставки фонового изображения.

Для вставки рисунка бабочки в качестве фонового изображения web-страницы просто примените свойство background-image в тэге <body> и укажите местоположение рисунка.

 body {

background-color: #FFCC66;

 background-image: url("butterfly.gif");

}

h1 {

color: #990000;

background-color: #FC9804;

}

 

 

Повторение/мультипликация фонового изображения [background-repeat]

В таблице указаны четыре значения background-repeat.

Значение

Описание

Background-repeat: repeat-x

Рисунок повторяется по горизонтали

background-repeat: repeat-y

Рисунок повторяется по вертикали

background-repeat: repeat

Рисунок повторяется по горизонтали и вертикали

background-repeat: no-repeat

Рисунок не повторяется

Например, для отмены повторения/мультипликации фонового рисунка мы должны записать такой код:

 body {

background-color: #FFCC66;

background-image: url("butterfly.gif");

 background-repeat: no-repeat;

}

h1 {

color: #990000;

background-color: #FC9804;

}

 

 

Блокировка фонового изображения [background-attachment]

Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы.

Значение

Описание

Background-attachment: scroll

Изображение прокручивается вместе со страницей - разблокировано

Background-attachment: fixed

Изображение блокировано

Например, следующий код фиксирует изображение.

 body {

background-color: #FFCC66;

background-image: url("butterfly.gif");

background-repeat: no-repeat;

 background-attachment: fixed;

}

h1 {

color: #990000;

background-color: #FC9804;

}

 

 

Расположение фонового рисунка [background-position]

По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана. Свойство background-position позволяет изменять это значение по умолчанию, и фоновый рисунок может располагаться в любом месте экрана.

Есть много способов установить значение background-position. Тем не менее, все они представляют собой набор координат. Например, значение '100px 200px' располагает фоновый рисунок на 100px слева и на 200px сверху в окне браузера.

Координаты можно указывать в процентах ширины экрана, в фиксированных единицах (пикселы, сантиметры, и т. п.), либо вы можете использовать слова top, bottom, center, left и right. Модель ниже иллюстрирует сказанное: 

В примере кода фоновое изображение располагается в правом нижнем углу экрана:

 body {

background-color: #FFCC66;

background-image: url("butterfly.gif");

background-repeat: no-repeat;

background-attachment: fixed;

 background-position: right bottom;

}

h1 {

color: #990000;

background-color: #FC9804;

}

 

 

Размер рисунка [Background-size]

Значения

Значение Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.

Проценты Задает размер фоновой картинки в процентах от ширины или высоты элемента.

Auto Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.

Cover Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

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

Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.

Поля и заполнение

У элемента есть четыре стороны: right, left, top и bottom. Поля margin это расстояние от каждой стороны с до соседних элементов (или краёв документа).

В качестве первого примера мы разберёмся, как определить поля самогó документа, т. е. элемента <body>. На иллюстрации показано, какие поля нам нужны.

CSS-код для этого примера выглядит так:

 body {

margin-top: 100px;

margin-right: 40px;

margin-bottom: 10px;

margin-left: 70px;

 }

 

 

Или вы можете написать более элегантно:

 body {

margin: 100px 40px 10px 70px;

 }

 

 

Вы можете установить поля примерно таким же образом почти для любого элемента. Например, мы можем определить поля для всех параграфов <p>:

 body {

margin: 100px 40px 10px 70px;

}

 p {

margin: 5px 50px 5px 50px;

 }

 

 

Установим заполнение элемента

Заполнение не влияет на расстояние элемента до других элементов, а лишь определяет внутреннее расстояние между рамкой и содержимым элемента.

Использование заполнения/padding можно показать на простом примере, где все заголовки имеют цветной фон:

 h1 {

 background: yellow;

}

h2 {

 background: orange;

}

 

 

Определяя заполнение для заголовков, вы устанавливаете величину поля вокруг текста каждого заголовка:

 h1 {

background: yellow;

 padding: 20px 20px 20px 80px;

}

h2 {

background: orange;

 padding-left:120px;

 }

 

 

Семейство шрифта [font-family]

Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или web-страницы. Если первый шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту, ищется следующий шрифт списка, пока не будет найден подходящий.

Для категоризации шрифтов используются два типа имён: имя семейства/family-name и общее/родовое семейство/generic family. Эти два термина объясняются далее.

Family-name

Пример family-name (часто называемое просто "шрифт") это, например, "Arial", "Times New Roman" или "Tahoma".

Generic family

Его можно проще описать как группу family-names, имеющих характерные общие черты. Пример - sans-serif, набор шрифтов без "засечек/feet".

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

Список шрифтов может выглядеть так:

 h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}

 

 

Заголовки <h1> будут отображаться шрифтом "Arial". Если он не установлен на пользовательской машине, будет использоваться "Verdana". Если недоступны оба шрифта, для показа заголовков будет использован шрифт семейства sans-serif.

Обратите внимание, что имя шрифта "Times New Roman" содержит пробелы, поэтому указано в двойных кавычках.

Стиль шрифта [font-style]

Свойство font-style определяет normal, italic или oblique. В примере все заголовки <h2> будут показаны курсивом italic.

 h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif; font-style: italic;}

 

 

Вариант шрифта [font-variant]

Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра. Непонятно? Смотрите примеры:

Если font-variant имеет значение small-caps, а шрифт small-caps недоступен, браузер, скорее всего, отобразит текст буквами верхнего регистра.

 h1 {font-variant: small-caps;}

h2 {font-variant: normal;}

 

 

Вес шрифта [font-weight]

Свойство font-weight описывает, насколько толстым, или "тяжёлым", должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта.

 p {font-family: arial, verdana, sans-serif;}

td {font-family: arial, verdana, sans-serif; font-weight: bold;}

 

 

Размер шрифта [font-size]

Размер шрифта устанавливается свойством font-size.

Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. В данном учебнике мы будем использовать самые распространённые и удобные единицы измерения. Вот примеры:

h1 {;}

 h3 {;color:#000000">Отступы [text-indent]

Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки. В примере 30px применяется ко всем параграфам <p>:

p {

text-indent: 30px;

}

 

 

Выравнивание текста [text-align]

CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, centred илиjustify.

В примере текст заголовочных ячеек таблицы <th> выравнивается вправо, а в ячейках данных <td> - по центру. Кроме того, нормальные параграфы - justify:

th {

text-align: right;

}

td {

 text-align: center;

}

 p {

text-align: justify;

}

 

 

Декоративный вариант [text-decoration]

Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д. В примере <h1> подчёркнуты, <h2> - имеют черту над текстом, а <h3> - перечёркнуты.

 h1 {

text-decoration: underline;

}

h2 {

text-decoration: overline;

}

h3 {

text-decoration: line-through;

}

 

 

Интервал между буквами [letter-spacing]

Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина. Например, если вам необходимо 3px между буквами в параграфах <p> и 6px - в заголовках <h1>, то используется такой код:

 h1 {

letter-spacing: 6px;

}

p {

letter-spacing: 3px;

}

 

 

Трансформация текста [text-transform]

Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде.

Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform:

capitalize

Капитализирует каждое слово. Например: "john doe" станет "John Doe".

uppercase

Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE".

lowercase

Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe".

none

Трансформации нет - текст отображается так же, как в HTML-коде.

Для примера мы используем список имён. Все имена выделены с помощью <li> (list-item). Давайте капитализируем все имена и отобразим все заголовки верхним регистром.

Видите, HTML-код в этом примере в действительности записан в нижнем регистре.

 h1 {

text-transform: uppercase;

}

li {

text-transform: capitalize;

}

 

 

Группирование элементов с помощью class

Предположим, у нас есть два списка ссылок сортов винограда - для белого и для красного вина. HTML-код может быть таким:

<p>Виноград для белого вина:</p>

 <ul>

<li><a href="ri.htm">Рислинг</a></li>

<li><a href="ch.htm">Шардонэ</a></li>

<li><a href="pb.htm">Пино Блан</a></li>

 </ul>

<p>Виноград для красного вина:</p>

 <ul>

<li><a href="cs.htm">Кабернэ Совиньон</a></li>

<li><a href="me.htm">Мерло</a></li>

<li><a href="pn.htm">Пино Нуар</a></li>

 </ul>

 

 

Далее, мы хотим, чтобы ссылки на белое вино были жёлтого цвета, на красное вино - красного, а остальные ссылки на этой же странице оставались синими.

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

Попробуем установить классы для предыдущего примера:

<p>Виноград для белого вина:</p>

 <ul>

<li><a href="ri.htm" class="whitewine">Рислинг</a></li>

<li><a href="ch.htm" class="whitewine">Шардонэ</a></li>

<li><a href="pb.htm" class="whitewine">Пино Блан</a></li>

 </ul>

<p>Виноград для красного вина:</p>

 <ul>

<li><a href="cs.htm" class="redwine">Кабернэ Совиньон</a></li>

<li><a href="me.htm" class="redwine">Мерло</a></li>

<li><a href="pn.htm" class="redwine">Пино Нуар</a></li>

 </ul>

 

 

Далее мы можем определить специальные свойства для ссылок whitewine и redwine, соответственно.

 a {

color: blue;

}

a.whitewine {

color: #FFBB00;

}

a.redwine {

color: #800000;

}

 

 

Как показано в примере, вы можете определять свойства для элементов, принадлежащих к определённому классу, с помощью .имя_класса в таблице стилей документа.

Идентификация элемента с помощью id

Помимо группирования элементов вам может понадобиться идентифицировать один уникальный элемент. Это можно реализовать с помощью атрибута id.

Особенность id в том, что в документе не может быть более одного элемента с данным конкретным id. Каждый id должен быть уникальным. В других случаях используйте атрибут class. Теперь взглянем на пример использования id:

<h1>Глава 1</h1>

...

<h2>Глава 1.1</h2>

...

<h2>Глава 1.2</h2>

...

<h1>Глава 2</h1>

...

<h2>Глава 2.1</h2>

...

<h3>Глава 2.1.2</h3>

...

 

 

Это могут быть заголовки документа, разделённого на главы или параграфы. Естественным будет назначить id каждой главе:

<h1 id="c1">Глава 1</h1>

...

<h2 id="c1-1">Глава 1.1</h2>

...

<h2 id="c1-2">Глава 1.2</h2>

...

<h1 id="c2">Глава 2</h1>

...

<h2 id="c2-1">Глава 2.1</h2>

...

<h3 id="c2-1-2">Глава 2.1.2</h3>

...

 

 

Заголовок, скажем, chapter 1.2, должен быть красным. Это делается в соответствии с CSS:

 #c1-2 {

color: red;

}

Задание

  1.  Создать html-страницу, содержащую три заголовка, с помощью CSS задать для них различные цвета.
  2.  Для одного из заголовков задать заливку заднего фона и зафиксировать его, вместе с фоном, чтобы полоса заливки была по ширине листа.
  3.  На странице задать фоновое изображение с фиксированным расположением по размеру окна браузера.
  4.  Ниже задать пять абзацев текста, сделать отступ справа на 40% от размера окна браузера, задать выравнивание, изменить цвет шрифта, стиль, размер, задать абзацный отступ, выделить несколько предложений в разных абзацах курсивным полужирным шрифтом с подчеркиванием.


Акция
Закажите работу сегодня со скидкой до 25%
Узнать стоимость работы
Рассчитаем за 1 минуту, онлайн


1. Рынок потребительских товаров в Украине
2. Созвездие Большой Пе
3. Статья- Николая Чудотворца церковь на Болвановке в Москве
4. Анализ ситуации, страхование рисков
5.  Введение 2 История декоративной и растительной косметики 3
6. как вымощенная в самых разъезженных местах схваченная бревнами но в остальном мало изменившаяся с прежних
7. Історія, перспективи розвитку та класифікація стрілецької зброїІсторія розвитку стрілецької зброї
8. 5 Введение
9. тема контроля качества на предприятии ООО ВКУСНОЕ ИЗОБИЛИЕ
10. Тема- Порівняння декоративного зображення об~єктів природи з реалістичними
11. Распределение обязанностей членов похода
12. Тема- Ранній постнатальний розвиток Питання- Особливості стадії новонародженності
13. Бюджетное право Российской Федерации Бюджетное право России это подотрасль российского права часть фи.
14. Тема Любимый уголок природы
15. Клеменс Брентано
16. Перебои в энергоснабжении часто бывают вызваны ледяным дождем дождем со снегом бурей и-или сильным ветром
17. а поскольку заполняет экран перекрывающимися окнами прямоугольными областями экрана содержащими свои со.html
18. тема правовых норм регулирующих имные а также связанные и некоторые не связанные с ними личные неимные от
19. а АДСОРБЦИЯ от лат
20. тема- понятие типы структура.