Пятница, 01 Марта 2013 10:03

Наследование CSS

Written by 
Оцени эту запись
(3 Голоса)

Применяя CSS стили к некоторому HTML элементу, можно заметить, что эти стили влияют и на его потомков. Это правило называется наследованием. Дочерние элементы наследуют CSS свойства своего родителя. В данной статье мы на примерах разберем принцип наследования CSS, на какие элементы наследование может не подействовать и почему, а также какие именно стили наследуются. 

 

Наследование CSS

Примеры наследования

 

Для того, чтобы задать размер, шрифт и цвет текста на HTML странице, достаточно задать эти свойства элементу body:

 

body {

font-family: Arial;

font-size: 12px;

color: lightblue;

}

 

В таком случаем, у всех элементов на странице текст будет подчиняться этим стилям и вам не нужно прописывать их для каждого элемента страницы.

 

 

Блог Kate-Land

На блоге Kate-Land мы изучаем:

  • HTML
  • CSS
  • JavaScript

 

Если же в каком-то элементе текст должен выглядеть иначе, то ему отдельно нужно прописать необходимые свойства:

 

.green {

font-size: 16px;

color: green;

}

 

Пример:

 

Блог Kate-Land

На блоге Kate-Land мы изучаем:

  • HTML
  • CSS
  • JavaScript

 

На какие элементы может не действовать наследование

 

Некоторым элементам стили задают браузеры. Это сделано для того, чтобы даже при отсутствии ваших стилей элементы на странице отличались. Пользователь может вообще отменить CSS, но ему нужно различать заголовки, ссылки, списки, таблицы и т.д.

 

Если вы прописали CSS стили родителям таких элементов, то это не сможет перебить стили браузера. Таким элементам нужно задавать стили отдельно.

 

Если мы вернемся к предыдущему примеру, где для body задавали шрифт, размер и цвет текста, то заметим, что это стили подействуют не на все элементы страницы. Если на странице есть ссылка (куда же без нее), то она не унаследует цвет шрифта от body. А если же на странице есть заголовок h1-h6 (без него тоже никуда), то он не унаследует размер шрифта. 

 

 

 

<div>
<h3>Блог Kate-Land</h3>
<p>На блоге Kate-Land мы изучаем:</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li><a href="http://kate-land.net/js-jquery">JavaScript</a></li>
</ul>
</div>

Блог Kate-Land

На блоге Kate-Land мы изучаем:

 

 

Как видим, размер заголовка больше, чем у другого текста и цвет ссылки отличается. А все потому, что у браузера эти стили для этих элементов уже заданы(Стандартные стили WebKit). Посмотрим, что на этот счет скажет браузер Chrome:

 

h1 {

font-size: 2em; /*размер шрифта больше обычного*/

}

 

a:-webkit-any-link {

color: -webkit-link; /*обычно у браузеров это синий цвет*/

}

 

Мы видим, что у наших элементов уже есть стили. Но это не страшно, мы просто должны их переопределить отдельно:

 

Пример:

 

h1 {

font-size: 20px;

}

a {

color: red;

}

 

 

Блог Kate-Land

На блоге Kate-Land мы изучаем:

 

Если вы видите, что на какие-то элементы наследование не подействовало, вам нужно задать им стили отдельно. Причем, каким элементам, как ссылки, стили нужно задавать глобально:

 

Нужно

a {

color: red;

}

А не

.green a, .black a, .blue a {

color: red;

}

 

Какие стили наследуются

 

Наследуются не все CSS стили и это очень хорошо. Далее я приведу список стилей, которые наследуются, а пока рассмотрим наглядный пример. Для примера возьмем блок с текстом и внутренними элементами span:

 

 

<div>

Kate-land - блог верстальщика и для верстальщика - <span>HTML</span>, <span>CSS</span>, <span>Javascript</span>. Создание html страницы с таблицами стилей и скриптами. Полезная информация, работающие примеры, решение конкретных задач.

</div>

 

И зададим этому элементу такие стили:

 

div {

color: blue;

font-size: 13px;

line-height: 20px;

border: 2px solid blueviolet;

padding: 10px;

}

 

Смотрим результат:

 

 

Kate-land - блог верстальщика и для верстальщика - HTML, CSS, Javascript. Создание html страницы с таблицами стилей и скриптами. Полезная информация, работающие примеры, решение конкретных задач.

 

Как видим, цвет и размер текста, у элементов span такие же, как и у родительского div. Но у них не появились рамочки и внутренние отступы. А это значит, что не все CSS свойства наследуются дочерними элементами.

 

Стили, которые наследуются

 

Для текста:

  • font-family
  • font-size
  • font-style
  • font-weight
  • font-variant
  • font
  • color
  • letter-spacing
  • word-spacing
  • white-space
  • line-height
  • text-align
  • text-indent
  • text-transforn

 

 

Для списков:

  • list-style-image
  • list-style-position
  • list-style-type
  • list-style

 

 

Другие:

  • border-collapse
  • border-spacing
  • caption-side
  • cursor
  • direction
  • empty-cells
  • orphans
  • quotes
  • visibility
  • widows

 

 

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов