Знакомство с 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;
}Знакомство с CSS
Знакомство с CSS
By Alexey Kalyuzhnyi
Знакомство с CSS
- 2,959
