Мобильный LiveInternet Без заголовка | Dlja_dnevnika

Авторизация

Дневник Dlja_dnevnika Лента друзей - Дневник - Полная версия Milaja-alja (Dlja_dnevnika)

Без заголовка 02-04-2007 18:52 к комментариям - к полной версии - понравилось!

Красивые таблицы

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

В этой статье я раскажу Вам как это сделать!

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

<HTML_TAG_NAME PARAMETR>

Как Вы наверное уже догадались, вся эта красота настраивается (задаётся) в параметрах.

Итак, встречайте! Новый параметр. Параметр стилей style=""

Разберём этот параметр. Как я наверное упоминал в предыдущих статья, этот параметр задаёт параметр отображения для содержания какого-либо тэга.

Теперь будем рассматривать какие значения могут быть у этого необычного параметра. Значение указывается следующим образом: <html_tag_name style = "znachnie;">. Точка с запятой - ОБЯЗАТЕЛЬНЫ! Я не буду перечислять все значения, так как я их просто все не помню. Отмечу только самые нужные. Кто знает ещё, пишите в комментах. Я их со временем добавлю.

Значение

Назначение и эффект

Пример

color:

Изменяет стандартный цвет текста (черный) на тот, который будет задан.

color:#aaaaaa;

color:white;

background-color:

Изменяет стандартный цвет (зависит от настроек стилей в ОС. Обычно, белый.) на тот, который будет задан.

background-color:#003300;

background-color:green;

border:

Задаёт настройки бардюров (цвет, толщина в пикселях, тип линии) как для обычных тегов форматирования (<p> ),
так и для таблиц. Обычно применяется в таблицах. Так же тэг можно использовать для кнопок. Можно рисовать разные типы линий.
Для отрывистых долно быть значение dashed, для сплошных - solid.

= <input type = "submit" style="color:red;border: 3px dashed #990000;background-color:#ffffff;"> )

border:1px dashed #330000; - рисует отрывистую линию.

border:1px solid #330000; - рисует сплошную линию.

font:

Задаёт настройки отображения текста (размер в пикселях, шрифт).
Шрифты надо писать через запятую без пробелов. Лучше писать несколько шрифтов, т.к. они ищутся на машине
пользователя который видит текст. Например, у него может не быть шрифта Arial, но есть Verdana.

font:12px Verdana,Arial,Comic Sans Serif MS;

background-image:url('image_url');

В таблицах можно использовать как фон какую нибудь картинку. Для этого заменяем image_url на url
картинки и выставляем необходимые параметры, которые будут расмотрены далее
(background-repeat). Для отображения картинки в таблице надо задавать этот параметр в тэге <td>

backgrond-repeat:

background-repeat: имеет 2 значения. no-repeat и repeat. 1 отвечает за то, чтобы картинка, которая находиться в фоне
НЕ повторялась (по умолчанию, она будет повторяться) Второе значение (repeat) точно указывает, что картинка БУДЕТ повторяться.
Как я уже говорил,ведь юзер может иметь свои настройки для браузера. Из этого вытекает, что если вы хотите, чтобы ваша картинка повторялась, пишем всё как долно быть.

background-repeat:no-repeat;

background-repeat:repeat;

width:

Отвечает за длину таблицы (или изображения. Всё завист от того, к какому тэгу применяется). Задаётся либо в пикселях, либо в процентах (в процентах, только для таблиц). Обычно применяется для редактирования какого либо изображения без иго изменения в визуальном редакторе. Пример можно посмотреть здесь Скриншоты на самом деле имеют разрешение 640 X 480, но параметры width и height равны 150 и 115 соответственно

height:

Отвечает за высоту таблицы (или изображения. Всё завист от того, к какому тэгу применяется). Задаётся либо в пикселях, либо в процентах (в процентах, только для таблиц).

cursor:

Отвечает за курсор, который будет у юзера, когда он наведёт на определённый объект курсор. Да да! Курсор тоже можно изменять! Вы наверное заметили, что когда вы наводити на надписи под логотипом, ваш курсор меняется на обычный курсор с вопросиком. Возможны многочисленные вариации изменения вида курсоров, но лично я помню только 2! :( hand и help ;)
hand; - это курсор в виде руки, а help; - это курсор в виде курсора с вопросом.

td style = "cursor:help;color:#000099;background-color:#009900;"

td style = "cursor:hand;color:#990000;background-color:#000099;"
tr>

===================================

© by Накукрыскин

Special for Html_Tag

вверх^ к полной версии понравилось! в evernote