Разработка лидирующих и эксклюзивных WEB-приложений на чистом коде(HTML,CSS,JS,PHP). Гарантия высокого качества!

» Статьи» Классы и индентификаторы css

Классы и индентификаторы css

Поздравляю Вас, теперь Вы уже в некой маленькой степени "гуру" в сайтостроении на html. Теперь будем учиться украшать свои чёрно-белые сайты, чтобы посетителю и Вам веселее было на них смотреть.

Начну эту статью из теории. CSS проще говоря состоит функций, которые предают стили и для подключения функций нужно использовать классы (class) и индентификаторы (id) css. Class и id мы можем подключать к любому объекту в html-странице. Давайте сделаем это:

<!DOCTYPE html>
<html>
<head>
<title>Моя первая html-страница</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />

</head>
<body>
  <p class="name">Имя 1</p>
  <p class="name">Имя 2</p>
  <p id="avtor">Василий Кулик</p>
</body>
</html>

Название классов и индентификаторов можно предавать любые, но лучше придумывать осмысленные. Как Вы видите я предал 2 класса "name" и один индентификатор "avtor". Обратите внимание, в названии можно использовать только буквы, цифры, тире, нижнее подчеркивание, не должно содержать пробелов. Классы можно предавать более одного раза, а интентификатор только один раз на странице! Запомните это!

class и id можно предавать абсолютно всем элементам на странице. Теперь рассмотрим, как писать стили. Для этого создайте файл со стилями, подключите его. Название файла произвольное, это может быть так: "style.css". Теперь подключите файл, указав путь к нему такой строкой: <link rel="stylesheet" href="styles.css" />. Если файл у Вас лежит в папке, например, css - то указываем к нему путь таким образом: <link rel="stylesheet" href="/css/styles.css" />. Вставьте эту строку в тег head, в самый низ, чтобы не путаться и будем подключать стили:

.name{/*Здесь стили, которые относятся этому классу*/}
#avtor{/*Здесь стили, которые относятся этому id*/}

Все, что между /* */ - это комментарии и они пропускаются браузером, поэтому здесь можно писать свою документацию, что за что отвечает. На примере мы видим, как подключаются классы и индентификаторы. класс (class) - через точку, а индентификатор (id) - через решетку. На практике, в следующих статьях будем изучать уже сами стили и потом предавать любым элементам стили, подключая их через классы и индетнификаторы css.