Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

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

Автор: Андрей Краснокутский

Дата: 2009-03-06

Тег 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" class="main_border">

Сохраняем файл 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 для футера сайта (нижнего графического элемента).

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

 

Читаете так же:

Вставляем заголовки на HTML страницу.

Правила написания тегов (читай кода).

Как Загрузить файлы на сервер по FTP

Этот таинственный файл .htaccess Разбираемся в тонкостях

Как сделать скриншот. Скачать бесплатно Hyper Snap.

 

Просмотров: 22644


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Сергей Анатольевич
Дата: 2011-11-25

Спасибо! очень доступно и понятно, если у кого-то не получается - с копируйте уроки и делайте пошагово в notepad++, затем индекс+ F5 и сразу видно, что получается.

Комментарии добавил(а): Эмиль
Дата: 2012-04-04

И чачем это нам надо я все сам знаю

Комментарии добавил(а): kitteanka
Дата: 2012-12-09

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

Комментарии добавил(а): Елена
Дата: 2016-05-17

Только что взывала к вам о помощи. А потом прочла урок и воспользовалась Листинг 4.2. Спасибо! Все получилось!!! Ура! Сделала закладку - буду изучать материал по вашим рекомендациям. Всех благ!

Комментарии добавил(а): Елена
Дата: 2016-05-17

Помогите! Сообщите эл.адрес, чтобы я могла выслать свой HTML-код и CSS на ваш суд - рамка не обрамляет весь документ. Никак! Я начинающий спец. lena-krym@mail.ru

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT