Site icon Vavik96

Как использовать CSS

Как использовать CSS

Как использовать CSS

Каскадные таблицы стилей (CSS) – язык описания внешнего вида веб-документа. CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS).

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

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

так и с помощью тега style (для Blogger – в шаблоне <b:skin>)

<style type='text/css'>
&nbsp;&nbsp;... ... ...
</style>

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

<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">
&nbsp;&nbsp;#demoID { color: red; } 
&nbsp;&nbsp;.demoCLASE { color: green; } 
</style>

<div id="demoID" class="demoCLASE"> содержимое </div>

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

<style type="text/css">
&nbsp;&nbsp;#demoID.demoCLASE { color: red; } 
&nbsp;&nbsp;#demoID { color: green; } 
</style>

<div id="demoID" class="demoCLASE"> содержимое </div>

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

Не правильно

<style type="text/css">
&nbsp;&nbsp;#demoID { color: red; } 
</style>

<div id="demoID"> содержимое </div>
<div id="demoID"> содержимое </div>

Правильно

<style type="text/css">
&nbsp;&nbsp;#demoIDRAZ { color: red; }
&nbsp;&nbsp;#demoIDDVA { color: red; } 
</style>

<div id="demoIDRAZ"> содержимое </div>
<div id="demoIDDVA"> содержимое </div>

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

<style type="text/css">
&nbsp;&nbsp;#demoIDRAZ, #demoIDDVA { color: red; }
</style>

<div id="demoIDRAZ"> содержимое </div>
<div id="demoIDDVA"> содержимое </div>

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

<style type="text/css">
&nbsp;&nbsp;#demoIDRAZ, .demoDVA { color: red; }
</style>

<div id="demoIDRAZ"> содержимое </div>
<div class="demoDVA"> содержимое </div>

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

<style type="text/css">
&nbsp;&nbsp;#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">
&nbsp;&nbsp;<p> красная палитра </p>
&nbsp;&nbsp;<span> любого другого цвета </span>
&nbsp;&nbsp;<p> красная палитра </p>
</div>
Во втором для любого тега p с данным классом (см. выше).

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

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

<span class="demo"><div class="demo">
&nbsp;&nbsp;<p> Образец как использовать CSS <span>текст в span</span> и далее. </p>
</div></span>
И второй способ.
<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"><span class="demo2 raz">содержимое</span></div>

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

 

<style type="text/css">
.raz { color: yellow; background: red; }
.dva { color: white; background: red; }
</style>

<div class="raz"><span class="raz1">содержимое</span></div>

<div class="dva"><span class="dva1">содержимое</span></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>
&nbsp;&nbsp;/* это комментарий */
</style>

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

Например, у пользователей Blogger встречала такой ошибочный вариант.
<b:skin><![CDATA[
&nbsp;&nbsp;.......
&nbsp;&nbsp;<style type="text/css">
&nbsp;&nbsp;&nbsp;&nbsp;... ... ...
&nbsp;&nbsp;</style>
&nbsp;&nbsp;.......
]]></b:skin>
Exit mobile version