• Авторизация


Красивая рамка с помощью таблици стилей 09-03-2008 08:04 к комментариям - к полной версии - понравилось!


Если вы посмотрите по стронам, то увидете, что все рамки на нашем сайте офрмлены с помощью CSS.

Делается это очень легко!

Расмотрим два способа создание стилей. Эти способы применяются не только для создания красивых рамок, но и для всего (текст, картинки, теги и тд.)

Способ #1

В блоке служебных тегов <head> пишем таблицу стилей, как указано внизу:

<head><br>                                                                   
 <style type="text/css"><br>                                        
        <!--<br>                                                                   
        .mainborder {border: 1px solid #000000;}<br>
        --><br>                                                                     
</style><br>                                                                    
</head>                                                                           

Придумываем название стиля латинскими буквами и пишем через точку .mainborder в круглых скобках перечисляем нужные нам параметры.

Для того, что бы созданный нами созданный стиль отображался на нашей таблице нужно к тегу <table> применить класс с именем которое мы указали в таблице стилей в служебном блоке <head>:

<table width="186"  align="center"  class="border_big_td"><br>
<tr><br>                                                                                                   
<td><p>Таблица в одну строку и одну ячейку.</p></td><br>    
</tr><br>                                                                                                  
</table>                                                                                                    

А теперь давайте расмотрим какие есть атрибуты для рамок.
[201x432]

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

<head><br>                                                                                        
 <style type="text/css"><br>                                                             
        <!--<br>                                                                                        
        .border {<strong>border: 3px double gray;</strong>}<br>
        --><br>                                                                                         
</style><br>                                                                                        
</head>                                                                                                

Расмотрим второй приём применения таблици стилей CSS

Способ #2

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

Но в этом случае мы уже не пишем

<style type="text/css">
<!--                                      
                                            
-->                                       
</style>                              

Прописываем только сами стили, например:

.border { /*Это созданный стиль*/                      
border-top : 1px solid #0099FF; margin:5px;      
border-bottom : 1px solid #0099FF; margin:5px;
border-left : 1px solid #0099FF; margin:5px;       
border-right : 1px solid #0099FF; margin:5px;    
}                                                                                      

p { /*Это переопределение тега p*/                                      
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 13px;                                                                              
margin : 10px;                                                                                
text-align:left;                                                                                 
text-indent:20px;                                                                            
}                                                                                                         

После того как мы создали отдельный файл style.css и прописали все стили, нам нужно его присоединить к html странице на которой указаны классы из этой таблицы стилей.

Делается это очень легко! Всего с помощью одной строчки в блоке служебных тегов <head>

Прописываем вот такую строчку:

<link href="style.css" rel="stylesheet" type="text/css">

Сам файл style.css должен находиться в тойже папке, что и все файлы вашего сайта.

<head><br>                                                                                  
 <link href="style.css" rel="stylesheet" type="text/css"><br>
</head>                                                                                          

Если вы используете Adode Dreamweawer CS-3 постмотрите урок Подцепляем таблицу стилей в программе Adode Dreamweawer CS-3, урок сдесь

ВНИМАНИЕ!

[200x204]
Если Вас интересует более качественное обучение техническим навыкам ведения бизнеса в сети, то Вам наверняка понравится моя новая 36-ти часовая коллекция из 17 видеокурсов в формате flash

"Все Технические Моменты Онлайн Бизнеса в Видеоформате",

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

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

Здесь Вы не найдете туманной информации о том "что делать", Вы найдете только то, что отвечает на вопрос "как делать?".

Кликните Здесь, Чтобы Узнать Все Подробности!

вверх^ к полной версии понравилось! в evernote
Комментарии (5):
Лена я не могу зайти на твою страницу??? И у меня нет твоего коментария??? Хотя на почту пришло уведомление! Напиши мне по адресу maksimgudelov@yandex.ru


Комментарии (5): вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник Красивая рамка с помощью таблици стилей | Максим_Гуделов - Дневниг Стильного WEB-Дизайнера | Лента друзей Максим_Гуделов / Полная версия Добавить в друзья Страницы: раньше»