Лабораторная работа №3

Автор: | 28.09.2015
Нет комментариев

Ссылки

HTML тег a

С помощью html тега <A> создаются ссылки на сайте. Причем как внешние, так и внутренние. Тег a встречается на каждой странице сайта. Если бы его не было, то было бы очень затруднительно перемещаться по интернету, поскольку каждый адрес страницы (URL) пришлось бы писать вручную.

Синтаксис тега <A>

  1. <a class=«имя класса» target=«параметр» title=«подсказка» href=«URL»>анкор</a>

Обязательным параметром у ссылки является только href=»URL», т.е. адрес ссылки. Между открывающим тегом <a> и закрывающим тегом </a> пишется анкор ссылки.

Пример. Html код:

  1. <body>
  2. <a href=«http://zarabotat-na-sajte.ru/»>как заработать на своем сайте</a>
  3. </body>

К открывающему тегу <a> можно прописывать различные атрибуты. Они являются не обязательными, но очень важными. Давайте рассмотрим их.

Атрибуты тега a

1) Атрибут target=»параметр», который может принимать следующие значения:

→ _blank — открывает страницу в новом окне

→ _self — загружает страницу в текущее окно

→ _parent — загружает страницу во фрейм-родитель

→ _top — отменяет все фреймы и загружает страницу в полном окне браузера

Пример

  1. <body>
  2. <a target=«_blank» href=«http://iboard.kz/»>доска бесплатных объявлений в Казахстане</a>
  3. </body>

В этом случае мы получим ту же ссылку, что и в первом примере, но перейдя по ней, страница откроется в новом окне.

2) Атрибут title=»подсказка» позволяет прописать подсказку, которая высветится при наведении курсора на ссылку.

Пример

  1. <body>
  2. <a title=«Подсказка для ссылки на главную страницу сайта» href=«http://iboard.kz»>как заработать на своем сайте</a>
  3. </body>

В данном случае подсказка высвечивается стандартным способом. Однако можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки.

3) Атрибут class=»название класса» задает класс для ссылки со стилями. О классах Вы уже знаете из предыдущего урока (стили в html). Для тега a стили имеют небольшие отличия.

Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например
изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти
свойства можно определять по-разному, в зависимости от того, посетили уже ссылку,
активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить
интересные эффекты на ваш web-сайт. Для этого используются так называемые
псевдоклассы.

Что такое псевдокласс?

Псевдокласс позволяет учитывать различные условия или события при определении
свойств HTM-тэга.
Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом <a>.
В CSS мы также можем использовать a в качестве селектора:

  1. a {
  2. color: blue;
  3. }

Ссылка может иметь разные состояния. Например, её уже посетили/visited или
ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых
и непосещённых ссылок.

  1. a:link {
  2. color: blue;
  3. }
  5. a:visited {
  6. color: red;
  7. }

Используйте |a:link| и |a:visited| для непосещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель — над ссылкой.
Мы рассмотрим каждый их этих четырёх псевдоклассов на примерах и с
объяснениями.

Псевдокласс: link.

Псевдокласс :link используется для ссылок на страницы, которые
пользователь ещё не посещал.
В примере кода непосещённые ссылки — синие.

  1. a:link {
  2. color: #6699CC;
  3. }

Псевдокласс: visited

Псевдокласс :visited используется для ссылок на страницы,
которые пользователь посетил.
В примере кода посещённые ссылки — фиолетовые.

  1. a:visited {
  2. color: #660099;
  3. }

Псевдокласс: active

Псевдокласс :active используется для активных ссылок.
В примере активные ссылки имеют жёлтый фон.

  1. a:active {
  2. background-color: #FFFF00;
  3. }

Псевдокласс: hover

Псевдокласс :hover используется для ссылок, над которыми
находится указатель мыши.
Это можно использовать для создания интересных эффектов. Например, если мы
хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении
указателя над ними, то наш CSS должен выглядеть так:

  1. a:hover {
  2. color: orange;
  3. font-style: italic;
  4. }

Эффект при нахождении указателя над ссылкой

Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса :hover.

Пример 1a: Расстояние между буквами
Расстояние между
символами можно установить свойством letter-spacing. Это можно
применить для ссылки:

  1. a:hover {
  2. letter-spacing: 10px;
  3. font-weight:bold;
  4. color:red;
  5. }

Пример 1b: UPPERCASE и lowercase
Свойство text-transform может переключать символы с верхнего на нижний регистр. Это также можно
использовать для создания эффектов на ссылке:

  1. a:hover {
  2. text-transform: uppercase;
  3. font-weight:bold;
  4. color:blue;
  5. background-color:yellow;
  6. }

Эти два примера показывают почти безграничные возможности комбинирования
различных свойств. Вы можете создавать свои собственные эффекты — попробуйте!

Удаление подчёркивания ссылок

Обычный вопрос — как удалить подчёркивание ссылок?Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Даже моя мама знает это! Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт.

Вообще-то удалить подчёркивание ссылок очень просто. Свойство text-decoration
можно использовать для определения подчёркивания текста. Для удаления
подчёркивания просто установите в text-decoration значение none.

  1. a {
  2. text-decoration:none;
  3. }

Альтернативно можно также установить text-decoration, наряду с
другими свойствами, для всех четырёх псевдоклассов.

  1. a:link {
  2. color: blue;
  3. text-decoration:none;
  4. }
  6. a:visited {
  7. color: purple;
  8. text-decoration:none;
  9. }
  11. a:active {
  12. background-color: yellow;
  13. text-decoration:none;
  14. }
  16. a:hover {
  17. color:red;
  18. text-decoration:none;
  19. }

 

 

Цвет — color

В течение предыдущих уроков мы все время использовали свойство цвета — color. Это свойство задает цвет текста внутри элемента. Свойство color является наследуемым. Рассмотрим на примере, что это значит. Пусть у нас имеется html-страница со следующим кодом:

  1. <html>
  2. <head>
  3. <title>css color (цвет)</title>
  4. <link rel=«stylesheet» type=«text/css» href=«style.css»>
  5. </head>
  6. <body>
  7. <h1>Заголовок</h1>
  8. <p>Здесь текст параграфа</p>
  9. Здесь просто текст
  10. </body>
  11. </html>

Зададим стиль для элемента body:

  1. body{
  2. color:green;
  3. }

Теперь весь текст на странице зеленого цвета. Если мы захотим изменить цвет какого-либо элемента, то ему нужно будет задать свой стиль. Например, сделаем цвет заголовка красным:

  1. body{
  2. color:green;
  3. }
  4. h1{
  5. color:red;
  6. }

Теперь цвет заголовка красный, т.к. мы задали ему свойство color, а до этого он, как и все остальные элементы, был зеленым, потому что унаследовал свойство color от своего «предка» — элемента body. Таким образом, если у элемента не задано свойство color, то оно наследуется от элемента «предка». Если оно не задано и для предка, то будет осуществлен поиск вверх по дереву элементов, пока не будет найден элемент, для которого это свойство задано. Дерево элементов — структура всех элементов html-страницы, отражающая их вложенность друг в друга. Схематично дерево элементов для нашего примера выглядит так:

css8

В нашем примере для элементов h1 и p предком является элемент body, для которого предком является элемент html. Это и есть принцип наследования.
Значениями свойства color могут быть именные цвета (red, blue…), шестнадцатеричные коды цветов (#FF0000) и десятичные коды цвета в модели RGB (rgb(255, 0, 0)). Итак, задать цвет текста для элемента можно тремя способами:

  1. body{
  2. color:green;
  3. }
  4. h1{
  5. color:red;
  6. }
  7. h2{
  8. color:rgb(255,0,0);
  9. }

Фон — background На самом деле это группа свойств, так или иначе связанная с фоном. При помощи CSS фон можно задать не только странице, но и заголовку, и абзацу, и любому другому элементу. Пусть у нас есть html-страница с таким кодом:

  1. <html>
  2. <head>
  3. <title>css background (фон)</title>
  4. <link rel=«stylesheet» type=«text/css» href=«style.css»>
  5. </head>
  6. <body>
  7. Здесь содержимое документа
  8. </body>
  9. </html>

Рассмотрим группу свойств

background: background-color — задает цвет фона. По умолчанию не наследуется, но его можно сделать наследуемым, если в качестве значения указать значение inherit.
Пример:

  1. body{
  2. background-color:#243CED;
  3. color:yellow;
  4. }

Сейчас наша страница в браузере выглядит так:

css9

background-image — задает фоновое изображение. Значением свойства является URL графического файла. Формат задания следующий: сначала идет обозначение функции url, а затем в круглых скобках указывается путь к файлу. Путь к файлу указывается относительно таблицы стилей.

Пример:

  1. body{
  2. background-image:url(picture.gif);
  3. background-color:#243CED;
  4. color:yellow;
  5. }

Сейчас наша страница в браузере выглядит так:

css10

В нашем примере страница стилей style.css лежит в той же папке, что и изображение picture.gif (об относительной адресации читайте на странице абсолютная и относительная адресация). Обратите внимание, мы задали оба свойства: background-image и background-color. Это рекомендуется делать на случай, если фоновое изображение по тем или иным причинам окажется недоступным. При задании обоих свойств фоновое изображение будет лежать поверх фонового цвета.

background-repeat — задает возможность повторения фонового изображения. В качестве фонового изображения может выступать как цельное изображение (например, шапка сайта), так и маленькое изображение, которое должно замостить собой все пространство элемента. Данное свойство как раз и указывает, повторять ли изображение и, если да, то как именно повторять. Возможны 4 варианта:

repeat — повторять изображение по горизонтали и вертикали.
repeat-x — повторять изображение только по горизонтали.
repeat-y — повторять изображение только по вертикали.
no-repeat — не повторять изображение.
По умолчанию используется значение repeat, как мы и убедились в предыдущем примере.

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

  1. body{
  2. background-image:url(picture.gif);
  3. background-repeat:no-repeat;
  4. background-color:#243CED;
  5. color:yellow;
  6. }

В браузере выглядит так:

css11

  1. body{
  2. background-image:url(picture.gif);
  3. background-repeat:repeat-x;
  4. background-color:#243CED;
  5. color:yellow;
  6. }

В браузере выглядит так:

css12

  1. body{
  2. background-image:url(picture.gif);
  3. background-repeat:repeat-y;
  4. background-color:#243CED;
  5. color:yellow;
  6. }

В браузере выглядит так:

css13

background-attachment — указывает, должно ли фоновое изображение прокручиваться вместе с текстом элемента или оно должно оставаться неподвижным. Может принимать два значения:

scroll — фон прокручивается вместе с текстом. Это значение используется по умолчанию.

fixed — фоновое изображение фиксируется относительно окна браузера, и во время прокрутки текста оно остается неподвижным.

Пример:

  1. body{
  2. background-image:url(picture.gif);
  3. background-repeat:no-repeat;
  4. background-attachment:fixed;
  5. background-color:#243CED;
  6. color:yellow;
  7. }

 

Результат действия значения fixed непривычно для пользователя, поэтому применяйте его только когда это действительно обоснованно.

background-position — задает расположение элемента относительно окна браузера. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Рассмотрим на примерах:

  1. body{
  2. background-image:url(picture.gif);
  3. background-repeat:no-repeat;
  4. background-color:#243CED;
  5. background-position:10% 30%;
  6. color:yellow;
  7. }

Левый верхний угол изображения будет смещен на 10% от ширины окна по горизонтали и на 30% от выстоты окна по вертикали. Следует заметить, что это свойство по-разному воспринимается разными браузерами. Например, в IE7 наш пример будет выглядеть так:

css14

А в Opera так:

css68

Этой проблемы можно избежать, задавая размер в пикселах:

  1. body{
  2. background-image:url(picture.gif);
  3. background-repeat:no-repeat;
  4. background-color:#243CED;
  5. background-position:50px 50px;
  6. color:yellow;
  7. }

Левый верхний угол изображения будет смещен на 50 пикселов по горизонтали и на 50 пикселов по вертикали:

css15

  1. body{
  2. background-image:url(picture.gif);
  3. background-repeat:no-repeat;
  4. background-color:#243CED;
  5. background-position:center top;
  6. color:yellow;
  7. }

Изображение будет выровнено по горизонтали — по центру, а по вертикали — по верхнему краю страницы:

Вообще, для выравнивания по горизонтали (первый параметр) можно использовать следующие ключевые слова: left (по левому краю), center (по центру) и right (по правому краю). Для выравнивания по вертикали (второй параметр): top (по верхнему краю), center (по центру) и bottom (по нижнему краю).

 Сокращенная запись свойства background

В CSS для многих свойств существует сокращенная запись. В этом случае значения всех свойств перечисляются через пробел в произвольном порядке. Например, для последнего примера сокращенная запись будет выглядеть так:

  1. body{
  2. background:url(picture.gif) no-repeat #33CCFF center top;
  3. color:yellow;
  4. }

Вот мы и рассмотрели свойства цвета и фона. Помните, что их можно применять ко всем элементам. Для тренировки задайте фон для заголовка или ссылки.

OPACITY

Краткая информация

Значение по умолчанию 1
Наследуется Нет
Применяется Ко всем элементам
Процентная запись Неприменима
Ссылка на спецификацию http://www.w3.org/TR/css3-color/#transparency

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

Синтаксис

opacity: значение

Значения

В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.

Пример

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=«utf-8»>
  5. <title>opacity</title>
  6. <style>
  7. .semi {
  8. opacity: 0.5; /* Полупрозрачность элемента */
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <p>
  14. <img src=«images/igels.png» alt=«Обычный рисунок»>
  15. <img src=«images/igels.png» alt=«Полупрозрачный рисунок» class=«semi»>
  16. </p>
  17. </body>
  18. </html>

Результат данного примера:

Untitled-10

Браузеры

Firefox до версии 3.5 поддерживает нестандартное свойство -moz-opacity.

Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100