Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

октябрь 2020
Пн Вт Ср Чт Пт Сб Вс
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31


Чувашия-это моя Россия

Внешние таблицы стилей в CSS.

Мощный способ применения CSS - это сбор всех правил в отдельный текстовый документ сайта и создания ссылок на этот документ на всех страницах Вашего бесплатного сайта. Таким образом, Вы можете производить единообразные стилистические изменения всего сайта путем редактирования правил в одном единственном документе сайта с расширением .css .

Документ таблицы стилей - это текстовый документ сайта, который содержит как минимум одно стилевое правило. Он не может содержать тегов HTML страниц сайта. Присутствие тегов в документе сайта может нарушить ход выполнения правил, игнорироваться полностью.

Комментария в CSS выглядят следующим образом: /* Вот здесь между двумя чертами со звездочками находится комментарий.*/

Поддерживаемый метод ссылки на внешнюю таблицу стилей использование элемента link в элементе head документа сайта.

                      < head>
                      < link rel="stylesheet" href="stylesheet.css" type="text/css" />
                      < /head>
                      
                в данном случае все каскадные таблицы стилей упаковываете в файл stylesheet.css
                и с помощью  элемента link и его атрибута href обращаетесь вне странице сайта
                к файлу stylesheet.css, элемент type обозначает, что файл в данном случае всего 
                на всего текстовый.

Атрибут rel в CSS определяет вид связывания документа сайта, на который указывает ссылка, с текущим документом - «stylesheet», то есть подчеркивает, что следующим загружаемым файлом будет stylesheet. В атрибуте href указывается URL документа таблицы стилей, в данном случае URL адреса относительный, значит файл stylesheet.css находится в корневом каталоге сайта. Можно применить и абсолютный адрес файла. Вы можете связывать с документом несколько таблиц стилей, и все они будут применяться к документу сайта .

Импортирование в CSS.

Альтернативой созданию ссылки является импортирование внешней таблицы стилей в документ сайта при помощи функции @import элемента style:

                  < style type="text/css">
                  
                   < /style>

В данном примере указывается абсолютный URL, но можете использовать и относительные. Команды @import должны идти перед всеми остальными элементами (за исключением @charset). Импортирование позволяет применить несколько таблиц стилей к одному документу сайта. Если в элемент style добавляются дополнительные функции @import, то информация из файла, прочитанного последним, имеет преимущество перед предыдущими. Директива @import может также использоваться в самой таблице стилей для ссылки на информацию во внешних CSS-файлах. Если рассматривать с общеобразовательной стороны, то можно сказать данные действия @import применяются для образования модульной структуры стилей и эффективного многоразового использования. Например, часто применяемые стили навигации можно сохрарнить в навигационной таблице стилей; базовое шрифтовое оформление можно сохранить в другой таблице стилей, стили размеров в третьей и т.д. Добавить такие модули стилей к основной таблице возможно благодаря команды @import:


                       @import url("type.css")
                  /*базовое шрифтовое оформление*/
                       
                       @import url("forms.css")
                   /*ввода данных в форму для элементов*/
                        
                       @import url("list-nav.css")
                   /*обращение к навигации*/

Думаю, вряд ли Вы импортированием когда-либо займетесь. А пока при создании страницы в заголовке страницы укажете один раз через элемент link где лежит у Вас файл с каскадными таблицами стилей и все.

Этот файл примерно будет выглядит так:


                        @charset "utf-8";
                        
                        body {
	                         background-color: #CCC;
	                         margin: 0 5px 0 5px;
	                         background-image:  url(../ubi/rsc45120.gif);
	
                            }
			  
                         h2 {
	                            color: #03C;
	                            font-size: 22px;
	                            font-weight: normal;
                               }
   

                        table        
                              { 
                                font-family: Georgia, "Times New Roman", Times, serif;
			                    font-size: 14px;
			                    color: #000;
			                    border-spacing: 2px 2px; 
			                }
			   
			  	 			  
                        ul#nav {
                                list-style-type: none; margin: 10px; padding: 10px;
                                 }
                                 
                        ul#nav li {
                                display: inline; 
                                }
                                
                        div#nav h2 a {
                                padding: 5px 10px; 
                                margin: 0px 2px;
			                    background-color: #999; 
			                    text-decoration: none; 
			                    text-align: center; 
			                  }
			 
                       div#nav h2 a:hover {
                                background-color: #FC9; 
                                color: #F30;
                                }

                       td#tdleft {
	                            width: 18%;
                                font-size: 12px;
	                            color: #000;
	                            text-decoration: none;
	                            background-color: #FFFECC;
	                          }
	
                       td#tdleft p#sos {
	                            font-size: 12px;
                                     }	
                       ...........................................
                       
               здесь приведена  часть реального файла каскадных таблиц стилей.

Применение внешних каскадных таблиц стилей Вас освобождает от пота и нервов. Всего лишь изменили в одном месте, но изменение произошли в сотнях страниц сайта.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно    назад    дальше     продолжение темы

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: