X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

6 страниц V   1 2 3 4 5 6 >
Открыть тему
Тема закрыта
> как вынести CSS в отдельный файл?
dhfj1985
dhfj1985
Topic Starter сообщение 1.6.2010, 11:15; Ответить: dhfj1985
Сообщение #1


создал файл стилей для кнопки сохранил его как "knopka.css"
<style>
a{
display:block;
background-image:url(images_1.gif);
width:190px;
height:30px;
}
a:hover{
background-image:url(images_2.gif);
}
a:active{
background-image:url(images_3.gif);
}
</style>
<p><a href="#"></a></p>

дальше мне надо вставить эти стили в таблицу .html кода,но чтоб самих стилей в таблице не было а была толька ссылка на этот файл стилей
<HTML>
<HEAD>
<TITLE>шаблон</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<center>
<TABLE WIDTH=1000 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD WIDTH=190 HEIGHT=30>
<link href="knopka.css" rel="stylesheet" type="text/css">
</TD>
<TD WIDTH=13 HEIGHT=30 background="images/images_06.jpg">
</TD>
<TD WIDTH=190 HEIGHT=30>
</TD>
<TD WIDTH=12 HEIGHT=30 background="images/images_07.jpg">
</TD>
<TD WIDTH=190 HEIGHT=30>
</TD>
</TR>
</TABLE>
</center>
</BODY>
</HTML>

правильно я зделал ссылку на документ файл стилей?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WHITE_DRAGON
WHITE_DRAGON
сообщение 1.6.2010, 12:05; Ответить: WHITE_DRAGON
Сообщение #2


почти да!!! только файл "knopka.css" должен быть:
[COLOR=black]a{[/COLOR]
[COLOR=black]display: block;[/COLOR]
[COLOR=black]background-image: url(images_1.gif);[/COLOR]
[COLOR=black]width: 190px;[/COLOR]
[COLOR=black]height: 30px;[/COLOR]
[COLOR=black]}[/COLOR]

[COLOR=black]a:hover[/COLOR]
[COLOR=black]{[/COLOR]
[COLOR=black]background-image: url(images_2.gif);[/COLOR]
[COLOR=black]}[/COLOR]
[COLOR=black]a:active[/COLOR]
[COLOR=black]{[/COLOR]
[COLOR=black]background-image: url(images_3.gif);[/COLOR]
[COLOR=black]}[/COLOR]


а ссылка на стиль в хтмл коде толжна быть над тэгом боди в тэге хэд...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
сообщение 1.6.2010, 13:21; Ответить: ZhukV
Сообщение #3


<head>
<link rel="stylesheet" type="text/css" href="knopka.css">
</head>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dhfj1985
dhfj1985
Topic Starter сообщение 1.6.2010, 14:23; Ответить: dhfj1985
Сообщение #4


возникла следующая проблема при CSS,как сделать для CSS разные картинки,всмысле чтоб один CSS отображал только одну кнопку с ее изображениями,а другой другую.При вставки двух стилей отображается картинка последнего стиля сразу на двух кнопках,как их разделить?
<HTML>
<HEAD>
<TITLE>шаблон</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="menu/bt.css">
<link rel="stylesheet" type="text/css" href="menu/games.css">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<center>

<TABLE WIDTH=1000 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="images/sayt_01.jpg" WIDTH=190 HEIGHT=151 ALT="">
</TD>
<TD width=620 height=151 COLSPAN=7 background="images/images_02.jpg" >
</TD>
<TD WIDTH=190 HEIGHT=151 background="images/images_03.jpg" >
</TD>
</TR>
<TR>
<TD WIDTH=1000 HEIGHT=5 COLSPAN=9>
</TD>
</TR>
<TR>
<TD WIDTH=190 HEIGHT=30>
</TD>
<TD WIDTH=13 HEIGHT=30 background="images/images_06.jpg">
</TD>
<TD WIDTH=190 HEIGHT=30>
<href="menu/bt.css">
<p><a href="index.html"></a></p>
</TD>
<TD WIDTH=12 HEIGHT=30 background="images/images_07.jpg">
</TD>
<TD WIDTH=190 HEIGHT=30>
<href="menu/games.css">
<p><a href="index.html"></a></p>
</TD>
<TD WIDTH=12 HEIGHT=30 background="images/images_07.jpg">
</TD>
</TR>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
сообщение 1.6.2010, 17:57; Ответить: ZhukV
Сообщение #5


(dhfj1985 @ 1.6.2010, 17:23) *
При вставки двух стилей отображается картинка последнего стиля сразу на двух кнопках,как их разделить?

Это определено мировыми веб правилами.
Делай два стиля. Подключай их. И для какждой кнопки прописывай опередленный класс или ид, и по нему присойденяй стиль.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dhfj1985
dhfj1985
Topic Starter сообщение 1.6.2010, 19:12; Ответить: dhfj1985
Сообщение #6


(ZhukV @ 1.6.2010, 20:57) *
Это определено мировыми веб правилами.
Делай два стиля. Подключай их. И для какждой кнопки прописывай опередленный класс или ид, и по нему присойденяй стиль.

это будет выглядкть типа так
<link rel="stylesheet" type="text/css" id="1" href="menu/bt.css">

тогда при сохранении стилей будет так?
a{
display:block;
background-image:url( bt_1.gif);
width:190px;
height:30px;
}
a:hover{
background-image:url( bt_2.gif);
}
a:active{
background-image:url(bt_3.gif);
}
id="1"

и как его тогда назвать,щяс он у меня просто bt.css,а чтоб открывался по id и не смешивались вдвоем что будет так чтоли 1bt.css ???:sarcastic:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
DelphinPRO
DelphinPRO
сообщение 2.6.2010, 0:24; Ответить: DelphinPRO
Сообщение #7


(dhfj1985 @ 1.6.2010, 17:23) *
возникла следующая проблема при CSS,как сделать для CSS разные картинки,всмысле чтоб один CSS отображал только одну кнопку с ее изображениями,а другой другую.При вставки двух стилей отображается картинка последнего стиля сразу на двух кнопках,как их разделить?


Пусть у Вас будет 1 файл стилей для кнопок. Для того чтобы сделать их разными присваивайте разные классы
<a class="button_style_1" ... >
...
<a class="button_style_2" ... >


в css файле так

a.button_style_1 {здесь стили для первой кнопки}
a.button_style_2 {здесь стили для второй кнопки}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dhfj1985
dhfj1985
Topic Starter сообщение 2.6.2010, 0:56; Ответить: dhfj1985
Сообщение #8


один файл CSS название допустим 1.CSS,далее в нем три стиля например:
<a class="button_style_1"
a{
display:block;
background-image:url(1.gif);
width:190px;
height:30px;
}
a:hover{
background-image:url(2.gif);
}
a:active{
background-image:url(3.gif);
}
>


<a class="button_style_2"
a{
display:block;
background-image:url(bt_1.gif);
width:190px;
height:30px;
}
a:hover{
background-image:url(bt_2.gif);
}
a:active{
background-image:url(bt_3.gif);
}
>


<a class="button_style_3"
a{
display:block;
background-image:url(img.gif);
width:190px;
height:30px;
}
a:hover{
background-image:url(img.gif);
}
a:active{
background-image:url(img.gif);
}
>

между тегами ссылка будет выглядеть так
<HEAD>
<link rel="stylesheet" type="text/css" href="menu/1.css">
</HEAD>

а между тегами таблиц так чтоли?
<TD>
<href="button_style_1">
<p><a href="index.html"></a></p>
</TD>
<TD>
<href="button_style_2">
<p><a href="index.html"></a></p>
</TD>
<TD>
<href="button_style_3">
<p><a href="index.html"></a></p>
</TD>

я правильно понял?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WHITE_DRAGON
WHITE_DRAGON
сообщение 2.6.2010, 10:29; Ответить: WHITE_DRAGON
Сообщение #9


dhfj1985, примерно вот так:
a.button_style_1 {
display: block;
background-image: url(1.gif);
width: 190px;
height: 30px;
}
a.button_style_1: hover {
background-image: url(2.gif);
}
a.button_style_1: active {
background-image: url(3.gif);
}
a.button_style_2 {
display: block;
background-image: url(bt_1.gif);
width:190px;
height:30px;
}
a.button_style_2: hover {
background-image: url(bt_2.gif);
}
a.button_style_2: active{
background-image: url(bt_3.gif);
}

+ в файле CSS тэги не пишутся... незабывай про пробелы точки и тд, отсутствие или лишняя могут привести к не работающем коде или с ошибками...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dhfj1985
dhfj1985
Topic Starter сообщение 2.6.2010, 13:57; Ответить: dhfj1985
Сообщение #10


не фига не получается с вашим CSS сделал один файл стилей назвал его button.css вот он с нутри
a.button_style_1 {
display:block;
background-image:url(kn_1.gif);
width:196px;
height:30px;
}
a.button_style_1:hover {
background-image:url(kn_2.gif);
}
a.button_style_1:active {
background-image:url(kn_3.gif);
}

a.button_style_2 {
display:block;
background-image:url(mb_1.gif);
width:196px;
height:30px;
}
a.button_style_2:hover {
background-image:url(mb_2.gif);
}
a.button_style_2:active{
background-image:url(mb_3.gif);
}

дальше в самом .html коде,между тегами поставил ссылку на файл "button.css" вот так
<head>
<link rel="stylesheet" type="text/css" href="menu/button.css">
</head>

а между тегами таблиц поставил класс стилей
<td>
<a class="button_style_1">
<p><a href="index.html"></a></p>
</td>
<td>
<a class="button_style_2">
<p><a href="index.html"></a></p>
</td>
и в итоге у меня появились две разные кнопки но они полностью мертвые,на действия пользователя не отвечают как было задумано в таблице стилей + ко всему этому еще снизу кнопок появилось пространство на 30px под каждой кнопкой.
ГДЕ ВЗЯТЬ КОНКРЕТНЫЙ ПРИМЕР этих стилей как с ними боротся,уже неделю с этими кнопками вожусь.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
6 страниц V   1 2 3 4 5 6 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Как вы отдыхаете от работы за компом
 151 adw-kupon.ru 19823 Вчера, 13:52
автор: Vmir
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
 20 uahomka 3450 Вчера, 11:54
автор: Skyworker
Открытая тема (нет новых ответов) Как в пушсетках покупают по 100-200 тысяч кликов за день?
 1 Boymaster 521 Вчера, 11:45
автор: Skyworker
Горячая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
 30 freeax 5017 20.4.2024, 16:49
автор: Liudmila
Открытая тема (нет новых ответов) Арбитражники, как ведете учет расходов и доходов?
 13 Boymaster 2022 20.4.2024, 15:06
автор: Boymaster


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 24.4.2024, 5:56

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet