Знакомство с 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

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

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

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

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

<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;
}

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

  1. Стили браузера по умолчанию

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

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

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

где 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 {
    ...
}

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

  1. инлайновый стиль имеет приоритет 1000
  2. id имеет специфичностью 0100
  3. класс, а также псевдокласс и псевдоэлемент имеют специфичность 0010
  4. тег имеет специфичность 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;    
}

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

By Alexey Kalyuzhnyi

Made with Slides.com

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

  • 2,870

More from Alexey Kalyuzhnyi