Цвет div html

Цвет div html


Каскадные таблицы стилей (CSS) — язык описания внешнего вида веб-документа.

Чтобы статья не была утомительной, пробегусь тезисами по основным моментам. Итак, стиль страницы можно подгружать как из отдельного файла с помощью тега link

<link type='text/css' rel='stylesheet' href='URL.css' />

так и с помощью тега style (для Blogger — в шаблоне )

<style type='text/css'>   ... ... ... </style>

или атрибута style, которым не рекомендуется злоупотреблять, поскольку это усложняет поиск нужного фрагмента для корректировки и ведёт к повышению времени загрузки страницы в браузере, то есть стили желательно прописывать до

<div style=" ... ... ... "> контент </div>

Стили выполняются в том же порядке, в котором читаются: сверху вниз, слева направо. Например,

<html>   <head>     <title>Как использовать css</title>     <style type="text/css">       div {          color: green;          color: red; /* если бы не был указан атрибут style, то цвет текста был бы красным, а не зелёным */       }     </style>   </head>   <body>     <div style="color: blue;">синиц цвет текста</div>   </body> </html>

При одновременном использовании id и class, приоритет будет отдан id.

<style type="text/css">   #demoID { color: red; }    .demoCLASE { color: green; }  </style>  <div id="demoID" class="demoCLASE"> содержимое </div>

Приоритет отдаётся более узкой записи

<style type="text/css">   #demoID.demoCLASE { color: red; }    #demoID { color: green; }  </style>  <div id="demoID" class="demoCLASE"> содержимое </div>

id в отличии от class нельзя использовать два раза

Не правильно

<style type="text/css">   #demoID { color: red; }  </style>  <div id="demoID"> содержимое </div> <div id="demoID"> содержимое </div>

Правильно

<style type="text/css">   #demoIDRAZ { color: red; }   #demoIDDVA { color: red; }  </style>  <div id="demoIDRAZ"> содержимое </div> <div id="demoIDDVA"> содержимое </div>

Оптимально. Объединяем два элемента через запятую, поскольку они имеют одинаковые стили.

<style type="text/css">   #demoIDRAZ, #demoIDDVA { color: red; } </style>  <div id="demoIDRAZ"> содержимое </div> <div id="demoIDDVA"> содержимое </div>

Может быть и так

<style type="text/css">   #demoIDRAZ, .demoDVA { color: red; } </style>  <div id="demoIDRAZ"> содержимое </div> <div class="demoDVA"> содержимое </div>

И совсем другой результат при отсутствии запятой

<style type="text/css">   #demoIDRAZ .demoDVA { color: red; } </style>  <div id="demoIDRAZ"> содержимое </div> <div class="demoDVA"> содержимое </div> <div id="demoIDRAZ"><div class="demoDVA"> содержимое </div></div> <div class="demoDVA"><div id="demoIDRAZ"> содержимое </div></div>

Контекстные селекторы (второй пример)

div { color: red; } div p { color: red; }

Отличия между ними очевидны. Первой строкой мы задаем красный цвет для всех div, второй — только для содержимого тега p в div.

<div> содержимое </div> <div> содержимое <p> содержимое </p> </div>

Есть ли различия между этими двумя вариантами?

.demo { color: red; } p.demo { color: red; }

Первый ведёт к изменению в любых тегах, помеченных классом demo

<div class="demo"> содержимое </div> <p class="demo"> содержимое </p>

Второй будет применён только к тегу p с class=»demo»

<div class="demo"> содержимое </div> <p class="demo"> содержимое </p>

Каковы различия между

.demo p { color: red; } p.demo { color: red; }

В первом случае только теги p, содержащиеся в контейнере с классом demo, будут иметь красный цвет

<div class="demo">   <p> красная палитра </p>   <span> любого другого цвета </span>   <p> красная палитра </p> </div> 

Во втором для любого тега p с данным классом (см. выше).

Аналогично с псевдоклассом :hover (изменения производятся при наведении мышки).

<style type="text/css"> .demo { color: red; } .demo:hover { color: blue; }  </style>  <div class="demo">   <p> Образец как использовать CSS <span>текст в span</span> и далее. </p> </div>

И второй способ.

<style type="text/css"> .demo { color: red; } .demo:hover span { color: blue; }  </style>  

<div class="demo">   <p> Образец как пользоваться CSS <span>текст в span</span> и далее. </p> </div>

Между ними нет различия.

<style type="text/css"> .demo { background: red; } .raz { color: yellow; } .dva { color: white; } </style>  <div class="demo raz">содержимое</div>  <div class="demo dva">содержимое</div>
<style type="text/css"> .raz { color: yellow; background: red; } .dva { color: white; background: red; } </style>  <div class="raz">содержимое</div>  <div class="dva">содержимое</div>

Стили применяются только для тега с определённым атрибутом.

<style type="text/css"> p[align="center"] { color: red; } </style>  <p> содержимое </p> <p align="center"> содержимое </p>

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

div {    background: #AAA url() no-repeat left top; }

Вот этот вариант не будет функционировать в IE, поскольку нет пробела между url()no-repeat:

div {    background: #AAA url()no-repeat left top; }

Все свойства заканчиваются точкой с запятой (;).

a {   color: #AAA;   outline: none;   text-decoration: underline; }

Комментарии в CSS выглядят иначе, нежели в HTML.

<style>   /* это комментарий */ </style>

В тег <style> нельзя включать другие теги.

Например, у пользователей Blogger встречала такой ошибочный вариант.

<b:skin><![CDATA[   .......   <style type="text/css">     ... ... ...   </style>   ....... ]]></b:skin>

Продолжение на странице про селекторы.

Источник: shpargalkablog.ru


Добавить комментарий