CSS селекторы. А также как подключить файл стилей к HTML файлу

Категория: CSS. Нет комментариев. 15.05.2012.

Здравствуйте, сегодня я расскажу вам вводную статью по CSS в которой будет рассказано как создать файл стилей, подключить его к HTML файлу и применить некоторые функции. Ну не будем долго переливать с пустого в порожнее а приступим непосредственно к теме нашей статьи.

CSS селекторы

Как подключить CSS файл в файл HTML.

Для того чтобы настройки CSS вступили в силу нужно подключить файл с стилями к файлу HTML. Сделать это очень просто, нужно прописать команду для подключения файла. Я покажу этот процесс на примере простого кода который я использовал в статье невидимые теги HTML,HEAD и BODY и теперь мы применим на практике данный код.

<!DOCTYPE html>
<HTML>
<HEAD>
<link rel="stylesheet"href="http://rabota-cms.ru/wp-content/themes/rabota/style.css"type="text/css"/>
</HEAD>
<BODY>
тело сайта
</BODY>
</HTML>

Теперь в нашем коде появилась строчка <link rel="stylesheet"href="http://rabota-cms.ru/wp-content/themes/rabota/style.css"type="text/css"/> и теперь нам нужно разобраться что мы написали в строчке. Начнем с link. Данная команда указывает что мы ссылаемся на внешний файл. Такая команда всегда указывавается в заголовке (между тегами <HEAD></HEAD>). Следующая команда rel="stylesheet" указывает на тип сайта который мы ссылаемся. В данном случае код дает понять браузеру что подгружаемый файл это таблица стилей. В коде href="http://rabota-cms.ru/wp-content/themes/rabota/style.css"

указано путь, где находится файл с стилями. Здесь самое главное это указывать путь относительно HTML файла, поэтому лучше всего размещать эти два файла в одной папке. Благодаря этой записи мы подключили к HTML файлу файл стилей и теперь все команды в файле стилей будут применяться для данных элементов. Надеюсь что вам теперь стало понятно как подключить CSS файл и у вас не возникнет с этим проблем.

CSS селекторы и их применение для шаблона сайта.

Давайте для начала разберемся что собой представляет селектор. Селектор это метка к которой нужно будет применить свойство. Самым простым селектором является название тега. Для того чтобы показать на примере как это выполняется давайте добавим в код простой текст. Мне очень удобно редактировать файлы через программу Adobe Dreamweaver и в между тегами BODY вставим произвольный текст. Я просто добавлю простой текст с википедии. Вот как у меня это выглядит.

CSS селекторы

Я прописал для каждого абзаца тег р который будет разделять наш сплошной текст на два абзаца. Теперь давайте в файле стилей зададим цвет для тега р. В файле пишем p {color:#FF0000}; сохраняем и обновляем наши документы и наши абзацы будут выделены красным цветом.

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

Давайте теперь к каждому абзацу применим разные типы селекторов и увидим на практике их применение. Селекторы нужно прописывать именно в тег абзаца к которому мы хотим применить настройки.

Теперь в файл стилей мы прописываем нужные нам команды и смотрим на результат их работы.
Команды которыми мы задали разный цвет для двух абзацев.

А вот результат применения данных настроек.

Групповые селекторы.

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

Для практического примера давайте мы добавим в наш текст ещё несколько тегов, тегов заголовков. Я выделил один заголовок тегом заголовка а другой выделил жирным шрифтом. Давайте теперь применим к ним один общий параметр цвета. Для этого в файл со стилями необходимо прописать следующую строчку: .color1,#color2,h1,strong{color: #999999};

Вот как документ выглядел до применения набора стилей.

А теперь мы применим стили и наш текст станет полностью серебристого цвета.

Селекторы потомков.

Теперь давайте рассмотрим ситуацию когда нам нужно применить свойство не к целому абзацу а к какой-то определенной его части, выделенной тегом. Для этого в абзаце мы выделим словосочетание тегом strong. А в файл напишем строчку p strong{color:#990000}; которая дает команду браузеру что нужно найти на странице в абзаце тег strong и выделить его нужным цветом. Вот как это выглядит на странице.

Псевдоселекторы ссылок.

Сейчас мы рассмотрим как можно для ссылок на странице задавать разные параметры в зависимости от действий пользователя на странице. Для примера создадим на страничке ссылку.
Теперь мы переходим к редактированию цвета ссылки. По умолчанию все ссылки на странице до активности синего цвета, сменим это на другой цвет, например красный. Вносим в файл изменения a{color:#FF0000}; где а это тег для которого мы применяем настройки а запись в скобках задает цвет для тега.

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

Для того чтобы задать параметры для ссылки до активации нам нужно прописать к ссылке псевдоселектор link и в строчку нужно прописать прописать нужный параметр. Давайте напишем текст для того чтобы ссылка по умолчанию была зеленого цвета.
a:link{color: #00CC00};

Данная команда означает что если пользователь не нажимал на ссылку то ссылка должна быть зеленого цвета.

Противоположным по значению является псевдоселектор :visited который задает для ссылки параметры после того как по ней перешли. Код будет выглядеть так: a:visited{color: #990000}; и теперь все ссылки по которым пользователь переходил будет красного цвета.

Следующим псевдоселектором будет :hover который будет задавать параметры для ссылки в тот момент когда на него будет наводить мышку пользователь. Зададим для ссылки цвет в момент наведения серебристым и для этого впишем в файл стилей строчку: a:hover{color: #CCCCCC}; и теперь при наведении на ссылку мышки она будет отображаться серым цветом.

И последний селектор который мы рассмотрим будет задавать параметры для ссылки в тот момент когда на неё нажал пользователь и выглядит этот код следующим образом: a:active{color: #000099}; и в момент активации ссылки ссылка будет выделятся синим цветом.

Надеюсь что статья про CSS селекторы вам поможет в редактировании собственного сайта а также это будет ещё маленький запас знаний который вам поможет в создании собственного дизайна.

Похожие статьи:

Оставить комментарий