Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Март, 2017

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

Кроме цвета сам бордюр может быть в виде сплошной линии, пунктирной, выпуклой границы

none — граница отсутствует (по умолчанию).

dotte — граница из ряда точек.
dashed — пунктирная граница.
solid — сплошная граница
double — двойная граница
groove — граница «бороздка»
ridge — граница «гребень»
inset — вдавленная граница
outset — выдавленная граница

Бордюр можно указывать одной цифрой, например: border: 2px; тогда толщина применится ко всем четырем сторонам контейнера.
Так же толщину можно указать для каждой стороны, например: border:2px 4px 1px 3px; тогда по порядку толщина будет: верх, правый, низ, левый.
Можно указывать три значения например: border: 2px 1px 3px; , тогда первая цифра верх, вторая левый и правый, а третья низ.
Или две цифры например: border: 1px 6px; тогда первая цифра верх-низ, а вторая левый-правый. Значение можно указывать не только в пикселях, но и в других принятых в CSS измерениях.

Примеры:
border: 1px solid #DCDCDC; — установлена толщина бордюра 1px, solid- сплошная, цвет #DCDCDC

border: 0px 2px; 0px 2px dashed #0000FF; — установлена граница по 2px с лева и с права, а сверху и снизу 0px, dashed-пунктираная, и цвет #0000FF

border-top: 2px solid #0000FF; — бордюр сверху толщиной 2px, сплошной, цветом #FFFACD

border-bottom: 6px ridge #E6E6FA; бордюр снизу, стиль «гребень», цвет бордюра #E6E6FA

border-left:1px solid #0000EE; бордюр левой границы контейнера, сплошная граница, цвет #0000EE

border-height:1px outset #BEBEBE; — устанавливает бордюр справа, outset-выдавленная граница, цвет #BEBEBE

width: и height: — задают размеры контейнеров (блоков и элементов)

С помощью стиля width: задается ширина блока (контейнера). Значение можно указывать как в пикселях, так и в процентах, и других принятых единицах. Стиль height: задает высоту блока. Если значения не заданы, то блок автоматически растягивается по ширине, или прижимается к леврому или правому краю и его размер зависит от содержимого внутри блока. Если это текст, то контейнер растягивается по всей ширине того контейнера, в котором он вложен, если изображение или видеоплеер, то по его ширине и высоте.

Стили width: и height: можно применять практически ко всем тегам, например к тегам , ,

, , и другим. Примеры:

width: 400px; — ширина контейнера 400 пикселей

width: 80%; — ширина контейнера 80 процентов от доступной ширины
height: 320px; — высота контейнера 320 пикселей

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

Ссылки на веб-документ

Использование после открывающего тега параметра ссылки href позволяет указать адрес документа, на который будет осуществлен переход. Синтаксически данный отрезок в html-документе будет выглядеть так: текст_ссылки. При этом пользователь увидит на странице только подчеркнутый текст, выполненный в синем цвете, что будет указывать о наличии гиперссылки.

Ссылка на скачивание и электронку

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

Для обращения к электронке (отправке письма) вместо пути указывается почтовый адрес после параметра mailto. При этом строка в HTML будет иметь вид:
Отправить_письмо. Посетитель увидит тот же подчеркнутый синий текст, а при нажатии будет автоматически открываться используемая им почтовая программа для отправки письма по указанному адресу.

Создание ссылок на якоря

Если представленный на странице текст – длинный, то часто используются якоря (метки, закладки) для обращения к определенной части документа. В этом случае необходимый раздел (слово в тексте) отмечается атрибутом name: , а обращение к данной закладке происходит с помощью символа #:

Закладка.

Другие атрибуты ссылок

К важным атрибутам ссылок относится target, который будет определять, как именно открыть страницу (документ, файл): в том же окне, что установлено по умолчанию (_self), в родительском окне (_parent), в новой вкладке браузера(_blank). Для создания всплывающей подсказки применяют атрибут title, который укажет пользователю, что именно скрывается за ссылкой. Html-строка со ссылкой, которая будет открываться в новом окне и содержать подсказку, имеет вид: Текст_ссылки.

Пример добавления ссылки: Ссылка на сайт

Яндекс

Результат:

Яндекс

Атрибуты (параметры) ссылок.

По умолчанию браузер при переходе по ссылке открывает страницу в этом же окне. Чтобы изменить это используется атрибут тега < a> target. Он имеет следующие значения:
_blank— открывает страницу в новом окне;
Текст ссылки

_parent — загружает ссылку в родительском окне;
Текст ссылки

_self— по умолчанию. Открывает ссылку в этом же окне.
Текст ссылки

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

Яндекс.

Яндекс.

Ссылка на скачивание.

Ссылаться можно не только на файлы с расширением html но и на файлы с другими расширениями. Для этого в адресе ссылки необходимо прописывать соответствующее имя файла и расширение. Например, ссылка на архив выглядеть так:

Скачать эту статью в PDF

Где files/ — название папки с файлами, time.pdf — сам файл для скачивания.

Скачать эту статью в PDF

Ссылка на адрес электронной почты.

Создание ссылки на адрес электронной почты делается почти также как и ссылка на веб-страницу. Только вместо URL указывается mailto: адрес электронной почты

Адрес электронной почты.