Приветствую читателей нашего блога. Не знаю, почему я так назвал статью, наверно, потому что в голове крутилось, да и подходит же зараза! Сегодня речь пойдет о CSS (Cascading Style Sheets — каскадные таблицы стилей). Для чего они нужны, и как их использовать, об этом вы узнаете в данной статье. А нужны они будут точно, так как следующая статья будет про верстку дивами (<div>) с использованием CSS.Так что читаем справочник по тегам, тренируем мозг и готовимся к покорению вершин. А пока просто читаем мою новую запись на блоге.
Так для чего же нужны таблицы стилей?
CSS используется создателями web-страниц для задания цветов, шрифтов, расположения элементов страницы и других аспектов представления документа. Основной целью разработки CSS являлось разделение содержимого написанного на HTML и представления документа написанного на CSS. Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Если говорить простым языком, то CSS это инструмент, с помощью которого осуществляется верстка и дизайн сайта. Не буду ходить вокруг да около, а сразу приведу несколько примеров, как подключить таблицы стилей к нашей страничке и поясню некоторые аспекты. Есть несколько способов подключить таблицы стилей.
1.Использовать контейнер <style></style>, который помещается между тегами <head>.
&amp;amp;amp;amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;lt;style&amp;amp;amp;amp;amp;amp;amp;amp;gt;
p { color:#999; text-decoration:underline;}
&amp;amp;amp;amp;amp;amp;amp;amp;lt;/style&amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;lt;title&amp;amp;amp;amp;amp;amp;amp;amp;gt;Css - это хорошо!&amp;amp;amp;amp;amp;amp;amp;amp;lt;/title&amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;lt;/head&amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;lt;body&amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;gt;Привет&amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;lt;/body&amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;lt;/html&amp;amp;amp;amp;amp;amp;amp;amp;gt;
2.Присоединить файл с таблицами стилей в формате «.css» через специальную ссылку на web-странице.
&amp;amp;amp;amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;link href=&amp;amp;amp;amp;amp;amp;amp;amp;quot;style.css&amp;amp;amp;amp;amp;amp;amp;amp;quot; rel=&amp;amp;amp;amp;amp;amp;amp;amp;quot;stylesheet&amp;amp;amp;amp;amp;amp;amp;amp;quot; type=&amp;amp;amp;amp;amp;amp;amp;amp;quot;text/css&amp;amp;amp;amp;amp;amp;amp;amp;quot; /&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;title&amp;amp;amp;amp;amp;amp;amp;amp;gt;Css - это хорошо!&amp;amp;amp;amp;amp;amp;amp;amp;lt;/title&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/head&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;body&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;gt;Привет&amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/body&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/html&amp;amp;amp;amp;amp;amp;amp;amp;gt;
3.И, наконец, локально применять определенный стиль для одного элемента, например для заголовка.
&amp;amp;amp;amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;title&amp;amp;amp;amp;amp;amp;amp;amp;gt;Css - это хорошо!&amp;amp;amp;amp;amp;amp;amp;amp;lt;/title&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/head&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;body&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;h1 style=&amp;amp;amp;amp;amp;amp;amp;amp;quot;font:larger;&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;Привет&amp;amp;amp;amp;amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/body&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/html&amp;amp;amp;amp;amp;amp;amp;amp;gt;
Так как я затронул эту тему, то придется объяснить и принцип действия. CSS представляет собой несложный язык с простой архитектурой. С помощью него мы сможем управлять отображением любого или определенных элементов на нашей странице. Теперь о том, как это делать. Рассмотрим способ подключения CSS как отдельного файла с расширением «.css».
Для данного примера файл web-страницы и css стиля находятся в одной директории.
Вот код простенькой страницы:
&amp;amp;amp;amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;link href=&amp;amp;amp;amp;amp;amp;amp;amp;quot;style.css&amp;amp;amp;amp;amp;amp;amp;amp;quot; rel=&amp;amp;amp;amp;amp;amp;amp;amp;quot;stylesheet&amp;amp;amp;amp;amp;amp;amp;amp;quot; type=&amp;amp;amp;amp;amp;amp;amp;amp;quot;text/css&amp;amp;amp;amp;amp;amp;amp;amp;quot; /&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;title&amp;amp;amp;amp;amp;amp;amp;amp;gt;Css - это хорошо!&amp;amp;amp;amp;amp;amp;amp;amp;lt;/title&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/head&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;body&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;h1&amp;amp;amp;amp;amp;amp;amp;amp;gt;Привет читателям нашего блога.&amp;amp;amp;amp;amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;p id=&amp;amp;amp;amp;amp;amp;amp;amp;quot;about&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;В этой статье речь идет про CSS&amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;P class=&amp;amp;amp;amp;amp;amp;amp;amp;quot;post&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;Так же рекомендую прочитать статью про &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;amp;amp;amp;quot;http://seofin.ru/2010/02/08/noindex-ili-nofollow/&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;Noindex или Nofollow?&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt; от Ильи.&amp;amp;amp;amp;amp;amp;amp;amp;lt;/P&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/body&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/html&amp;amp;amp;amp;amp;amp;amp;amp;gt;
Теперь у нас есть html-страница с подключенным к ней файлом style.css, который содержит наши стили к данной странице. Сейчас смотрим, что содержит style.css.
body { background-color:#FFC; font-family:&amp;amp;amp;amp;amp;amp;amp;amp;quot;Trebuchet MS&amp;amp;amp;amp;amp;amp;amp;amp;quot;, Arial, Helvetica, sans-serif;}
h1 { color:#F00;}
#about { font-size:12px; }
.post { text-align: right;}
.post a { color:#000; font-size:small;}
Немного про синтаксис.
Первым, что мы должны набрать, это наименования элемента, которому хотим задать стиль. После этого ставим две фигурные скоби {…..} и в них начинаем набирать правила отображения для нашего элемента. Так же мы можем задавать стиль только для нужного нам элемента или класса элементов. Для этого используются параметры id=”” и class=””. Если в качестве идентификатора выбираем id, то в CSS прописываем его название после символа «#». Если прописываем class, то перед названием класса в CSS ставим точку.
Порядок действий такой.
-Выбираем элемент html-страницы, который должен быть уникальным.
-Присваиваем ему идентификатор (называем его осмысленно, чтобы не путаться)
-Прописываем ему стиль в CSS
Если есть вопросы и сложности по данной статье, то обязательно комментируем и задаем вопросы. Спасибо за внимание и до новых встреч.
___________
Помните, что здоровый образ жизни — самое важное для всех людей.
Хостинг и доменное имя для вашего будущего сайта - что это такое, как их получить и связать между собой. Смотреть трейлеры к фильмам совершенно бесплатно и без регистрации!
Еще интересные записи:
Не хотите продать свой seofin.ru ?
готов выслушать ваши предложения