1.3 - Способы подключения CSS

Для использования Каскадных Таблиц Стилей (или CSS) на страницах сайта - существуют несколько способов подключения этих стилей. Самый простой способ прописать атрибут style непосредственно в самом теге.

Пример использования стилей

<html>  <head>   <title>Подключение CSS</title>  </head>  <body>    <p style="color:#f00;padding:10px;border:1px solid #faa">    CSS или Cascading Style Sheets - это набор правил     или параметров, с помощью которых CSS придает     страницам сайта внешний вид.   </p>   </body> </html>

Результат подключения Внутренних стилей

Подключение стилей CSS

Строчка style="color:#f00;padding:5px 10px; border:1px dashed #faa" и есть CSS. Еще такой способ называют "Внутренними стилями" - из-за того что эти стили находятся только внутри данного элемента страницы.

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

Второй способ это указать перечень стилей с использованием тега <style></style> (обычно указывают вначале) Такой способ называют "Глобальные стили".

Пример использования Глобальных стилей

<html>  <head>   <title>Подключение CSS</title>   <style type="text/css">     p{      color:#f00;      padding:10px;       border:1px solid #faa;      }   </style>  </head>  <body>   <p>    CSS или Cascading Style Sheets - это набор правил     или параметров, с помощью которых CSS придает     страницам сайта внешний вид.   </p>  </body> </html>

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

Третий вариант - это "Связанные стили". Для этого нужно вынести стили в отдельный файл и подключать этот файл к страницам сайта.

Пример использования связанных стилей

<html>  <head>   <title>Подключение CSS</title>   <link  rel="stylesheet" href="/style.css">  </head>  <body>   <p>    CSS или Cascading Style Sheets - это набор правил     или параметров, с помощью которых CSS придает     страницам сайта внешний вид.   </p>  </body> </html>

В этом случае в код html добавляется строчка

<link  rel="stylesheet" href="/style.css">

В этой строчке указывается:
rel="stylesheet" - подключаемый файл это таблица стилей
href="/style.css" - путь к файлу стилей.
А в файле style.css указываются сами стили

p{     color:#f00;     padding:10px;      border:1px solid #faa;  }

Этот способ самый удобный потому, что подключив файл к нужным страницам, при редактировании нужно править только один файл, а не все страницы.

Список уроков