Веб-мастерская Ларисы ВоронинойЧто такое CSS?
WEB-мастерская Ларисы Ворониной logo

Что такое CSS? Окт 28 2016


CSS (Cascading Style Sheets — каскадные таблицы стилей) – это формальный язык, с помощью которого описывается внешний вид HTML – документа.

Как вы уже поняли, с помощью HTML мы делаем разметку элементов, которые будут  у нас на сайте.

А с помощью CSS мы описываем стили тех элементов, разметку которых мы сделали с помощью HTML. Простыми словами, Cascading Style Sheets позволяет нам сделать нашу разметку красивой и именно такой, какой мы хотим её видеть.

Подключение файла стилей.

Описывание всех стилей в одном файле, который, как правило, имеет название style.css, является хорошим тоном. Если мы будем описывать стили непосредственно в файле HTML, то у нас возникнет путаница.

Файл стилей подключается в HTML-документе между тегами <head></head>:

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

Помещается файл стилей в ту же директорию, куда и index.html. Если файлов стилей больше одного, то они помещаются в отдельную папку.

Синтаксис CSS.

Логика языка очень проста: мы определяем селектор, для которого описываем его свойства.
css

В данном примере h1 является селектором, и мы описали его свойство «цвет». Что это означает? Это означает, что все заголовки h1 будут красного цвета.

Таким образом, в качестве селектора могут выступать любые теги HTML.

Если мы хотим всем элементам страницы задать какое-нибудь одно единое свойство, в качестве селектора мы используем «*».

*{
     font-family: Verdana;
}

В этом примере мы применили шрифт Verdana ко всем элементам HTML – документа.

А что делать, если мы хотим применить стиль только к одному единственному элементу?

Делается это очень просто с помощью селекторов идентификаторов.

В HTML-документе элементу присваиваем «id» с уникальным именем , (span id= “word”) и в файле стилей имя этого “id” используем в качестве селектора (#word).

Чтобы было понятней, создадим два файла: index.html и style.css.

index.html

<!DOCTYPE html>
<html>
     <head>
          <meta charset= "utf-8">
          <link rel= "stylesheet" type= "text/css" href= "style.css" />
          <title>Cascading Style Sheets</title>
     </head>
     <body>
          <p>Первый <span id= "word">абзац</span> контента</p>
     </body>
</html>

style.css

*{
     font-family: Verdana;
}
#word {
     color: red;
}

Как мы видим, в index.html элементу span мы присвоили id с именем word. А в style.css мы для него прописали стили (цвет). Обратите внимание, что в CSS для селектора id впереди ставится символ решётки (#).

Результат выглядит так:

Чаще чем селекторы  идентификаторов,  используются селекторы классов. Отличаются они от идентификаторов тем, что их можно использовать в коде не однократно.

index2.html

<!DOCTYPE html>
<html>
     <head>
          <meta charset= "utf-8">
          <link rel= "stylesheet" type= "text/css" href= "style2.css" />
          <title>Cascading Style Sheets</title>
     </head>
     <body>
          <div class"top">
               <h1>Заголовок</h1>
          </div>
     </body>
</html>

style2.css

.top {
background-color: blue;
width: 200px;
}

В данном примере элементу  “div” мы присвоили класс с именем “top”и его свойства прописали в файле стилей (цвет фона и ширину).

В браузере выглядит вот так:
css

Существуют также селекторы псевдоклассов  и  псевдоэлементов, но с этим мы познакомимся позже в процессе.


Рейтинг@Mail.ru