Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Как сделать рамку на сайте с помощью CSS.

Viktor | 24.02.2014 | нет комментариев

Тег border в CSS. Как правильно применить?

Сегодня мы с Вами будем учиться делать рамки для вашего сайта. Что это значит? Все очень просто. Рамку можно задать вокруг любога элемента: абзац, заголовок, таблица, одна из строк или колонок в таблице и т.д. Сейчас на практике вы это поймете сами.

Каждая рамка имеет всего три свойства:

  1. ширина рамки задается в CSS свойством border-width:2px; – это свойство Вам уже знакомо по HTML задается например в пикселях px;
  2. цвет рамки задается в CSS свойством border-color:black; – это Вы уже тоже знаете по HTML, указывается или название цвета или его шестнадцатеричное значение;
  3. стиль рамки задается в CSS свойством border-style:solid;- это свойство для Вас новое, может принимать значения: solid – сплошная линия, dotted – точечная рамка, dashed – рамка из черточек.

Комбинирую в различных сочетаниях эти свойства можно создавать множество разных стилей и придать эти стили разным элеменам.

В первом уроке по CSS мы очистили код нашей web-страницы от тегов форматирования HTML, там у нас была создана рамка вокруг нашей странички. Давайте создадим подобную рамку с помощью CSS. Открываем наш файл таблицы стилей style.css и создаем новый стиль для рамки главной таблицы.

Этот стиль у нас будет предназначен для создания рамки главной таблицы назовем его .main_border прописываем в таблице стилей следующий код в сокращенном виде:

Листинг 4.1.

.main_border {border:2px solid black;}

Что мы написали в коде? Рамка вокруг главной таблицы, окаймляющей нашу web-страницу – толщиной в 2px черного цвета. Сохраняем файл таблицы стилей и переходим в код страницы index.html . Здесь (в начале кода, сразу после тега body) находим открывающей тег table и прописываем ему только что созданный стиль. Теперь код нашего тега table выглядит так:

Листинг 4.2.

<table align=”center” width=”780px”>

Сохраняем файл index.html , обновляем, смотрим . Согласитесь смотрится симпатичнее.

Далее если Вы помните уроки по HTML у нас идет вложенная таблица, которая состоит из двух столбцов: в первом расположено меню нашего сайта, а во втором текст самой страницы. Давайте сохраним общий стиль оформления web-страницы и обрамим каждый столбец рамкой черного цвета толщиной в 1px. Coздадим для каждого из этих столбщов свой стиль. Стиль для левого столбца (где меню) назовем .lefttd (левый столбец). Кроме того хорошо бы придать этому столбцу другой цвет вспоминайте преведущий урок, выбираем не очень темный цвет например #f6f6f6 , и дописываем в таблице стилей следующий код:

Листинг 4.3.

.lefttd {
border:1px solid black;
background-color:#f6f6f6;
}

Создаем отдельный стиль для правого столбца (в котором расположен текст основной страницы) назовем его .righttd (правый столбец). Отличаться этот стиль от преведущего будет только цветом фона в столбце, оставим его белым. Ранее мы уже с Вами упоминали что по умолчанию цвет и так белый, но все же лучше задать цвет фона. Если в браузере пользователя будет включена своя таблица стилей, цвет в этом столбце может оказаться каким угодно, например черным и просто сольется с цветом шрифта. Итак код для этого стиля будет выглядеть так:

Листинг 4.4.

.righttd {
border:1px solid black;
background-color:#ffffff;
}

Сохраняем файл таблицы стилей и переходим в файл index.html . Находим теги td левого иправого столбцов вложенной таблицы и прописываем новые классы.

Рамки можно создавать не только совсех сторон элемента но и с любой стороны например только сверху или снизу , слева или справа. Прописав в стиле следующее свойство border-bottom:1px solid black; мы получим рамку толщиной в 1 пиксель снизу элемента, border-top – сверху, border-left – слева, border-right – справа.

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

Вот что у нас получилось. Согласитесь так смотрится гораздо приятнее. Я надеюсь что Вам все понятно, а для закрепления навыков потренируйтесь самостоятельно с остальными файлами тестового сайта, а именно Ауди , БМВ , Рено , Тойота.

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB