Знакомство с CSS

CSS ( Cascading Style Sheets )

CSS расшифровывается как «каскадные таблицы стилей».

Этот язык отвечает за внешний вид HTML-страницы.

body{
    background: #e3e3e3;
    font-family: sans-serif;
}

Синтаксис CSS

body{ font-size: 16px; }

body - это селектор

font-size - это свойство

16px - это значение

body{
    background: #e3e3e3;
    font-family: sans-serif;
}

CSS правило

Способы подключения стилей

Есть три способа подключения CSS

Внешние стили
Внутренние стили
"Инлайн" стили

Внешние стили

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

Внутренние стили

<head>
    <style>
        body{
	    background: #e3e3e3;
            font-family: sans-serif;
        }
        h1{
	    color: #C74451;
        }
    </style>
</head>

"Инлайн" стили

<p style="color:sienna; font-size:16px;">
    Welcome to my website! 
</p>

Внутри HTML элемента (тега)

Каскадность

p {
  background: orange;
  background: green;
}

p {
  color:#fff;
  font-size:16px;
}

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

Стили браузера по умолчанию
Внешние стили
Внутренние стили
"Инлайн" стили

где 4-й имеет наивысший приоритет

Например

Во внешних стилях прописаны следующие стили для заголовка 3-го уровня

h3{
    color:red;
    text-align:left;
    font-size:24px;
}

Во внутренних стилях прописаны следующие свойства

<head>
    <style>
        h3{
            text-align:right;
            font-size:34px;
        }
    </style>
</head>

Объединяем учитывая каскадность

<head>
    <style>
        h3{
            text-align:right;
            font-size:34px;
        }
    </style>
</head>

h3{
    color:red;
    text-align:left;
    font-size:24px;
}

color:red;
text-align:right;
font-size:34px;

В результате к заголовку будут применены следующие стили

Специфичность

span{
    ...
}
div .cat-in-box	{
    ...
}
#floor .cat-in-box {
    ...
}
div span {
    ...
}
.cat-in-box {
    ...
}
#floor span {
    ...
}

Специфичность

инлайновый стиль имеет приоритет 1000
id имеет специфичностью 0100
класс, а также псевдокласс и псевдоэлемент имеют специфичность 0010
тег имеет специфичность 0001

Специфичность

Селектор	a, b, c, d	Число
span	0, 0, 0, 1	1
div .cat-in-box	0, 0, 1, 1	11
#floor .cat-in-box	0, 1, 1, 0	110
div span	0, 0, 0, 2	2
.cat-in-box	0, 0, 1, 0	10
#floor span	0, 1, 0, 1	101

Остюда сразу видно, что в нашем примере самым приоритетным является селектор #floor .cat-in-box.

!important;

p{ 
    color: green !important;    
}
p#text{ 
    color: red;    
}