Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Фон документа (Читать внимательно!)
Фон документа
Piterski
Сообщений: 387
Репутация: 195

Сообщение # 1 | 05:36:39
По сути дела фон меняется только у самой страницы, ячеек таблицы, ну и у всей таблицы сразу.

Так вот для того чтобы и зменить цвет всей страницы вам нужно найте тег <body>
затем выбрать нужный вам цвет и к тегу body добавить следующее

Code
<body bgcolor="Номер цвета">

Например:

Code
<body bgcolor="#008000">

Если же вы хотите поставить рисунок как фон вам следует опятьже найти тег <body>
затем выбрать подходящий рисунок, загрузить его на сервер, и к тегу <body> добавить следующее

Code
<body background="ссылка к файлу">

Например:

Code
<body background="http://www.ucoz.ru/image/1.jpeg">

При использование в качестве фона рисунок, существует небольшой прием называемый "подложкой" фона (фиксацией)
для того чтобы зафиксировать ваш фон вам следует к тегу <body> добавить следующее

Code
bgproperties="fixed"

Пример:

Code
<body background="http://www.ucoz.ru/image/1.jpeg" bgproperties="fixed">

Теперь таблицы.

В качестве примера возьмем обычную таблицу 3х3.

Code
<table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr>
   <td width="33%">Данные</td>
   <td width="33%">Данные</td>
   <td width="34%">Данные</td>
  </tr>
  <tr>
   <td width="33%">Данные</td>
   <td width="33%">Данные</td>
   <td width="34%">Данные</td>
  </tr>
  <tr>
   <td width="33%">Данные</td>
   <td width="33%">Данные</td>
   <td width="34%">Данные</td>
  </tr>
</table>

Вот она наша табличка, и тут вдруг мы захотели изменить ячейку 2.3 (2-строка, 3-ячейка)
процедура очень проста, мы ищем ячейку 2.3, как мы все знаем строки у нас обозночаються тегами <tr>
а ячейки <td>, так вот в нашей таблице 3-пары <tr></tr> и 9-пар <td><td> и глядя на код мы можем с полной
уверенностью сказать что у нас 3 строки в каждой из которых по 3 ячейки, так а мы меняем 2.3, значит
первую пару <tr></tr> и 3-пары <td><td> мы пропускаем, и переходим сразу ко второй паре <tr></tr> где собственно говоря
и будут происходить все наши действия вот наша вторая пара

Code
 <tr>
   <td width="33%">Данные</td>
   <td width="33%">Данные</td>
   <td width="34%">Данные</td>
  </tr>

тут мы берем 3 ячейку (<td width="34%">Данные</td>) и меняем в ней фон, процедура как в body
значит выбераем цвет, и к нашей ячейке добовляем следующее

Code
bgcolor="#FF0000"

Пример:

Code
<td width="34%" bgcolor="#FF0000">Данные</td>

тоже самое если мы хотим рисунок вместо цвета

Code
<td width="34%" background="ссылка к файлу">Данные</td>

Например:

Code
<td width="34%" background="http://www.ucoz.ru/image/1.jpeg">Данные</td>

Если же мы хотим изменить цвет всей таблицы сразу, а не каждой ячейки то мы делаем следующее
Находим нашу таблицу

Code
<table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr>
   <td width="33%">Данные</td>
   <td width="33%">Данные</td>
   <td width="34%">Данные</td>
  </tr>
  <tr>
   <td width="33%">Данные</td>
   <td width="33%">Данные</td>
   <td width="34%">Данные</td>
  </tr>
  <tr>
   <td width="33%">Данные</td>
   <td width="33%">Данные</td>
   <td width="34%">Данные</td>
  </tr>
</table>

и в тег <table> добовляем

Code
bgcolor="#008000"

Пример:

Code
<table border="1" cellpadding="0" cellspacing="0" width="100%" bgcolor="#008000">

Чтобы поставить в качестве фона рисуно то процедура как и в примерах выше...

Code
<table border="1" cellpadding="0" cellspacing="0" width="100%" background="http://www.ucoz.ru/image/1.jpeg">

Фон документа с использованием языка КСС

Andre
Сообщений: 342
Репутация: 140

Сообщение # 2 | 08:29:51
Quote (Piterski)
<td width="34%">Данные</td>
Вопрос: а так ли обязательно указывать ширину последней ячейки?
Kron
Сообщений: 2340
Репутация: 674

Сообщение # 3 | 13:14:00
Quote (Andre)
Вопрос: а так ли обязательно указывать ширину последней ячейки?

необязательно. размеры любой из ячеек можно не указывать если для всех других размеры указана.
Piterski
Сообщений: 387
Репутация: 195

Сообщение # 4 | 13:14:10
Теперь с CSS

И так для задания цвета фона документа, выбераем элемент body и свойства background-color ну и соответсвующее значение цвета.

Code
body {background-color: #999;}

Цвет и фон элемента
При помощи языка цсс можно задвать цвет и фон для отдельного элемента. Просто необходимо выбрать элемент и создать правило.

например элемент h1

Code
body {background-color: #999;}
h1 {background-color: #ccc;}

или еще а и р элементы

Quote
body {background-color: #999;}
h1 {background-color: #ccc;}
p {background-color: #fff;}
a {background-color: #ccc;}

Также можно использовать картинку в роле фона

Code
body {background-image: url(ucoz.jpg);}

Внедрение вобственных селекторов

До сих пор мы использовали селекторы элементов, которые непосредственно относяться к определенному элементу языка HTML, такие как: H1 p a.

Теперь возьмем селекторы класса.
Селектор класса - это пользовательские селекторы, название для которых вы вибираете сами; перед этим названием ставиться точка, например - .ucoz

Классы применяються к языку HTML при помощи атрибута class , например

Code
tr class="ucoz">...</tr>

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

Горизонтальная ось или ось х посволяет заполнить фон только по горизонтали.

Code
body {background-image: url(test.jpg); background-repeat: repeat-x;}

Соответственно вертикаль, ось у

Code
body {background-image: url(test.jpg); background-repeat: repeat-y;}
Сообщение отредактировал Piterski - Четверг, 26 Окт 2006, 02:27:34
rusak
Сообщений: 101
Репутация: 121

Сообщение # 5 | 13:14:20
еще забыл про то, что можно чтобы фон вообще "не размножался" и что можно его зафиксировать, чтобы не было прокрутки

Всё, что вы знаете обо мне — ложь и клевета. Вся правда в твиттере и на сайте.
Piterski
Сообщений: 387
Репутация: 195

Сообщение # 6 | 13:14:30
Quote (rusak)
еще забыл про то, что можно чтобы фон вообще "не размножался" и что можно его зафиксировать, чтобы не было прокрутки

Не все сразу я много непомню, и могу не знать, я написал основное. Вопросов про прокрутку я еще не увидел.
Есть еще такая вещь как position , так вот таблицу я вообще не помню, там значений столько.
Сообщение отредактировал Piterski - Среда, 05 Июл 2006, 00:44:47
frozen
Сообщений: 2
Репутация: 33

Сообщение # 7 | 13:15:00
А как подключить эти CSS к страницам?
Piterski
Сообщений: 387
Репутация: 195

Сообщение # 8 | 13:15:10
frozen, Что то сомнения у меня возникают по поводу вашего не знания как это сделать, ну до ладно.

Все обьявления CSS вставляються в html тегами <style></style>
Пример:

Code
<html>
<head>
<title></title>

<style>
body {background-color: #999;} 
h1 {background-color: #ccc;} 
p {background-color: #fff;} 
.ucoz {background-color: #ccc;}
</style>

</head>

<body>

<table>
<tr class="ucoz">...</tr>
</table>

</body>

</html>

Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Фон документа (Читать внимательно!)
Страница 1 из 11
Поиск: