Обучение HTML, Excel, Word. Как сделать свой сайт бесплатно

Microsoft Office	Сайтостроение	HTML	Программинг	Компьютер	Графика	Разное
· Основы Word · Основы Excel · Основы VBA	· Как сделать сайт · Свой сайт от А до Я · Оптимизация сайта · Шаблоны для сайта · Обзор CMS	· Основы HTML · HTML-теги · Основы CSS	· Основы PHP · Основы JavaScript · Софт для сайта	· Что внутри ПК · ПК для чайников · Все о BIOS	· Web-графика · САПР: AutoCAD	· Статьи · Форум · SEO-новости

HTML, Excel, Word, SEO Основы CSS Форматирование картинок

Основы CSS

Смотреть книги»

· Справочник атрибутов CSS
· Что такое CSS?
· Структура html-страницы
· Шрифт: размер и гарнитура
· Выравнивание и пробелы
· Начертание шрифта
· Оформление ссылок
· Форматирование списков
· Классы
· Изображения

Форматирование картинок

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

Используйте атрибуты размера картинки: height, width. Они задают высоту и ширину картинки и браузер при загрузке веб-страницы "знает" сколько места нужно отвести под изображение. Если эти данные не указать, то при загрузке страницы будет происходить "тряска" страницы, пока она полностью не загрузится.

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

В теге картинки <img> можно задавать при помощи атрибута border толщину рамки вокруг картинки. Но гораздо более гибкое оформление рамки изображений дает CSS:

none - без рамки;
hidden - невидимая рамка;
dotted - точечная рамка;
dashed - штриховая рамка;
solid - линия;
double - двойная линия;
groove - контур рамки заглублен (3D-эффект);
ridge - контур рамки выступает (3D-эффект);
inset - внутренняя поверхность рамки заглублена (3D-эффект);
outset - внутренняя поверхность рамки выступает (3D-эффект).

Пример использования border в картинках: Пример №13

HTML-код страницы:

CSS файл:

CSS позволяет определять отдельные элементы рамок:

border-top - верх рамки;
border-bottom - низ рамки;
border-right - правая сторона рамки;
border-left - левая сторона рамки.

С помощью этих четырех параметров можно установить значения для отдельных сторон рамок. За параметром надо указать значения толщины, вида и цвета рамки.

Пример использования отдельных сторон border в картинках: Пример №14

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

CSS файл:

body  {font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif; color: black; font-size: 8pt;}
H1 {color: green; font-size: 130%;}
p {text-indent: 15px; font-size: 10pt; text-align: justify;}
a:link {FONT-SIZE:9pt; color: olive; text-decoration:none; font-family: Verdana, Arial;}
a:visited {FONT-SIZE:9pt; color: maroon; text-decoration:none; font-family: Verdana, Arial;}
a:active {FONT-SIZE:9pt; color: #ff0000; text-decoration:none; font-family: Verdana, Arial;}
a:hover {FONT-SIZE:9pt; color: #ff0000; text-decoration:underline; font-family: Verdana, Arial;font-weight : bold;}
.text1{text-indent: 5px; font-size: 10pt; text-align: left; color:navy}
.img1{border-top: 1px dashed black;}
.img2{
border: 1px dotted black;
border-bottom-color: red; 
border-left-width: 2mm;}
.img3{border-bottom: 1px dashed black; border-bottom-style: solid;}
.img4{border-left: 4px outset red;}
.img5{
border-top: 1mm solid green; 
border-bottom: 1mm solid green; 
border-right: 2mm dotted red; 
border-left: 2mm dotted blue;
}

Как видите, любые форматирования рамок можно комбинировать, чтобы одновременно форматировать несколько рамок. Обратите внимание на класс img2 - в котором сначала заданы базовые значения для всех сторон рамки, а потом указано форматирование для сторон, где оно отличается от основного.

top

Загрузка...

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

E-mail:
admin@on-line-teaching.com