Вынос таблиц css стилей в отдельный файл с помощью Link
Последний способ интеграции стилевого кода в веб документ называется методом связывания. Проще всего будет проиллюстрировать этот метод:
Основное отличие его от рассмотренных чуть выше способов (вложения и встраивания) заключается в том, что при использовании метода связывания все правила языка CSS выносятся в отдельный внешний файл. Он будет опять же текстовым (как и любой Html документ) и ему обычно присваивают расширения .css, чтобы для его открытия на локальном компьютере под управлением Windows можно было бы назначить специальную программу (я советую использовать для этого лучший Html редактор Notepad++).
При использовании внешнего CSS файла используется специальных тег Link, который прописывается опять же между открывающим и закрывающим элементами Head в шапке вебстраницы. Link относится к разряду служебных гиперссылок не видимых в браузере.
Браузер в этом случае найдет указанный файл таблиц стилей (относительный или абсолютный путь до него указан в атрибуте Href тега Link), загрузит его и применит указанные в нем правила языка CSS для внешнего оформления текущего Html документа.
Вообще, связывание очень похоже на описанное чуть раньше использование тега Style, но оно позволяет очень существенно ускорить загрузку страниц сайта и снизить нагрузку на коммуникационное оборудование интернета.
При использовании элемента Style (метод встраивания) браузер должен будет каждый раз подгружать вместе с ХТМЛ кодом документа и зашитые в нем CSS правила и селекторы, а в случае использования внешнего файла таблиц стилей, браузеру достаточно лишь один раз загрузить Style.css и уже потом брать его из собственного кеша (области на жестком диске компьютера пользователя) при оформления других страниц вашего сайта.
Атрибут type=”text/css” тега Link означает, что данный медиа контент будет ничем иным, как языком стилевой разметки. Но так же при связывании файла CSS и Html документа используется атрибут Rel со значением Stylesheet. Дело в том, что Link (служебная гиперссылка) может использоваться для абсолютно разных целей.
CSS атрибуты и значения, определяющие свойства таблиц
CSS таблица и пример оформления ее границы:
<title>CSS рамка таблицы</title> <style type="text/css"> table.t_example { background-color: #cccccc; width: 400px } .t_example tr { background-color: #ffffff; height: 100px } </style> </head> <body> <table border="0" cellspacing="1" align="center" class="t_example"> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> </table> |
Отметьте, что рамка таблицы определена не значением атрибута border, а значением атрибута background-color: и значением атрибута cellspacing="", при этом ее толщина равна значению атрибута cellspacing="", которое указано в пикселях.
Пустые ячейки содержат символ пробела, так надо.
Очередной пример по оформлению таблиц:
<title>Таблица CSS и ее граница</title> <style type="text/css"> table.t_example { background-color: #999999; width: 600px } .t_example tr { background-color: #ffeeee; height: 150px } </style> </head> <body> <table border="0" cellspacing="3" align="center" class="t_example"> <tr> <td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td> </tr></table> |