Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > 2 вопроса по HTML


Автор: Coder 23.3.2005, 06:03
1. как сделать чтобы в одной таблице применялся один стиль CSS, а в другой другой и все это на одной странице?
2. как поменять шрифт формы?

Автор: $дмитрий 23.3.2005, 09:23
1. пишешь отдельные class или id для каждой таблицы,или один общий и отдельный

например
Код


table {border: 34px;color:#cccccc; font-size: 8pt;}   //ко всем тегам table
.table {border: 34px;color:#cccccc; font-size: 8pt;}   //class
#table {color:#cccccc; font-size: 8pt;}                       //id


в теле указываешь <table class="table"> или <table id="table">


2.
Код

 #submit
{
   font-family: verdana;
   font-size: 9px;
   color: white;
   font-weight: bold;
}


в форме указываешь <input id="submit">

Автор: Gold Dragon 23.3.2005, 10:30
Всегда лучше определять свои классы, а не писать общий для конкретного элемента.

например описание классов
Код

.qqq1{
    border : 1px solid Black;
}.qqq2{
    border : 1px dotted Blue;
}.qqq3{
    border : 2px dashed Red;
}.qqq4{
    border : 1px solid Yellow;
}

Пример использования
Код

<p class="qqq1">Пример 1</p>
<p class="qqq2">Пример 2</p>
<p class="qqq3">Пример 3</p>
<p class="qqq4">Пример 4</p>

Автор: Coder 23.3.2005, 10:54
Делаю так:

в test.css
Код

#table_with_color{
A:link{FONT-SIZE: 11px;COLOR: #0000FF;FONT-FAMILY: Tahoma;TEXT-DECORATION: none}
A:active {FONT-SIZE: 11px; COLOR: #0000FF; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
A:visited {FONT-SIZE: 11px; COLOR: #FF0000; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
A:hover {FONT-SIZE: 11px; COLOR: #FF0000; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
}
#table_without_color{
A:link{FONT-SIZE: 11px;COLOR: #000000;FONT-FAMILY: Tahoma;TEXT-DECORATION: none}
A:active {FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
A:visited {FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
A:hover {FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
}
#frm{font-family: tahoma;font-size: 9px;color: blue;font-weight: bold;}


в test.html
Код

<table id="table_with_color">
<tr>
<td>
<a href="eugeni@localhost">Link 1</a>
</td>
</tr>
</table>
<table id="table_without_color">
<tr>
<td>
<a href="eugeni@localhost">Link 2</a>
</td>
</tr>
</table>
<form>
<input id="frm" value="Text1">
</form>


И НИЧЕГО из этого не работает... че я не так сделал?

Автор: Gold Dragon 23.3.2005, 16:12
Ну не знаю smile

я всегда делаю чтоб было понятно... Вот..
Код

<style>
A.menu1:link{FONT-SIZE: 11px;COLOR: #0000FF;FONT-FAMILY: Tahoma;TEXT-DECORATION: none}
A.menu1:active {FONT-SIZE: 11px; COLOR: #0000FF; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
A.menu1:visited {FONT-SIZE: 11px; COLOR: #FF0000; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
A.menu1:hover {FONT-SIZE: 11px; COLOR: #FF0000; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}

A.menu2:link{FONT-SIZE: 11px;COLOR: #000000;FONT-FAMILY: Tahoma;TEXT-DECORATION: none}
A.menu2:active {FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
A.menu2:visited {FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
A.menu2:hover {FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
}
</style>

</head>
<body>
<table>
<tr>
<td>
<a class="menu1" href="eugeni@localhost">Link 1</a>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a class="menu2" href="eugeni@localhost">Link 2</a>
</td>
</tr>
</table>

Автор: GoodBoy 24.3.2005, 13:54
Преренесено из "Веб-дизайна"

Автор: Aliance 24.3.2005, 15:17
Цитата(Coder @ 23.3.2005, 10:54)
И НИЧЕГО из этого не работает... че я не так сделал?

На сколько мне известно нельзя в опредение вкладыать еще одно определение. По крайней мере так, как это сделал ты.

Автор: Ruslan_ 24.3.2005, 21:34
Coder, в данном случае с наименьшим количеством труда я бы сделал так:
Код

#table_with_color tr td a {
color: blue;
font-family: Tahoma, sans-serif;
font-size: 11px;
text-decoration:none;
}

#table_with_color tr td a:visited {
color: red;
}

#table_without_color tr td a{
color: black;
font-family: Tahoma, sans-serif;
font-size: 11px;
text-decoration:none;
}

#frm {
color: blue;
font-family: Tahoma, sans-serif;
font-size: 9px;
font-weight: bold;
}

Все работает.
Кстати, советую, если ты используешь шрифт без засечек, добавлять sans-serif и, если ты используешь шрифт c засечками, - serif.
А то вдруг в данном случае у пользователя не окжется шрифта Tahoma

Автор: Coder 25.3.2005, 01:23
Всем спасибо за советы!

Автор: dm9 26.3.2005, 02:19
Цитата(Red @ 23.3.2005, 10:30)
Всегда лучше определять свои классы, а не писать общий для конкретного элемента.


Ну зачем же так категорично? smile)

Цитата(Coder @ 23.3.2005, 10:54)

A:link{FONT-SIZE: 11px;COLOR: #0000FF;FONT-FAMILY: Tahoma;TEXT-DECORATION: none}
A:active {FONT-SIZE: 11px; COLOR: #0000FF; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
A:visited {FONT-SIZE: 11px; COLOR: #FF0000; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}
A:hover {FONT-SIZE: 11px; COLOR: #FF0000; FONT-FAMILY: Tahoma; TEXT-DECORATION: none}


Вот так не делай никогда smile

FONT-FAMILY задаётся обычно сразу для всего блока, то есть на ссылки он просто унаследуется. FONT-SIZE - так же. А остальное (например, TEXT-DECORATION), можно задать один раз так: A {TEXT-DECORATION: none}
Таким образом, в стилях можно оставить только цвета. Да и там можно подсократить таким образом:
A:link, A:active {COLOR: #0000FF}
A:visited, A:hover {COLOR: #FF0000}
После этого твои стили станет удобно читать и они станут занимать в 2-3 раза меньше траффика...

Автор: Gold Dragon 26.3.2005, 11:20
Цитата(dm9 @ 26.3.2005, 02:19)
Ну зачем же так категорично?

Да так проще и не путаешься smile

Автор: Aliance 26.3.2005, 12:09
dm9
Спасибо. дельное дополнение, пригодится. smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)