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

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

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

<link type='text/css' rel='stylesheet' href='URL.css' />
так и с помощью тега style (для Blogger - в шаблоне <b:skin>)
<style type='text/css'>
  ... ... ...
</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">
  #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>
Продолжение на странице про селекторы.
в f t
наверх ↑

12 комментариев:

Добронрава
Эх... китайская грамота( Найти бы время во всём разобраться, Наташа, спасибо за всякие нужности и полезности!
NMitra
Единственный способ - желание что-нить сотворить, а там уж и знания подтянуться.

Про упорство промолчу, поскольку не мне говорить об этом качестве автору плюшевых медвежат :)
Александр
Наташа,нужна помощь,заплачу только помогите! минимально "подрихтовать" Блог,или подскажите что можно сделать,только доступно для Юзера

Вот мой блог: http://ok-glworld.blogspot.com/2012/03/blog-post_12.html

Нужно убрать оранжевые полосы с двух сторон банера(появились после вставки банера,банер делал так:забрасывал анимацию на фотохостинг а далее поставил через HTML/Javscript ссылку),мне советовали через Фотошоп,сделать фон,потом как то вставить,но я врядли смогу,т.к. навыков особых владения Фотошоп - нет,мне кажется есть другой вариант исправить ошибку,но какой вот собствено и вопрос.Ещё раз повторюсь,если это сложно,помогите заплачу!
Надеюсь на вразумительный ответ.Мир не без добрых людей!
Заранее спасибо!

С ув.Александр
NMitra
Уберите баннер, я хоть посмотрю что вы хотите добиться в конечном результате. Если я правильно поняла, то он является всему причиной.
Александр
Да именно Наталья,сейчас уберу...
Александр
Убрал,посмотрите как можно его вставить оратно но чтобы без полос
NMitra
Баннер попробуйте добавить сразу над сообщением (оно подвинется вниз) либо сразу после заголовка, но не в поле между ними.
Анонимный
Здрасьте! Не подскажите как с помощью КСС сделать так, чтобы одна ссылка находилась слева строки, а другая справа? Я в коде пытался делать через тег "р" и align, но получается, что обе ссылки находятся на разных строках, а мне ннужно, чтобы они находились на одной строке. 2 ссылки это - название ярлыка и количество комментов под каждым постом на главной странице. Пытался через CSS сделать, но вообще ничего не выходит. Я в КСС еще нуб, поэтому особо не знаю.

В коде шаблона строка, отвечающая за отображения комментов, "post-comment-link". Вставляю туда любой тег, который служит для выравнивания, а они все переносят ссылку на строчку ниже. Уже 2 часа мучаюсь над этим. Делаю методом тыка)). Ведь некрасиво, когда теги слева на одной строке, а комменты справа, но на строчку ниже. Какой-то бред получается.
Анонимный
Все, нашел уже! Есть аж целых 3 способа как это сделать. Могу кинуть ссылку на статью, если кому интересно.
NMitra
Я бы так сделала http://shpargalkablog.ru/2013/07/left-right-css.html
Александр Александрович
Подскажите пожалуйста, как блок этот поднять выше в "белую" область. Заранее спасибо! http://mepic.ru/view/?id=71930a1b92ae036a590b9b920b8d8d07 (http://www.sochinyalka.ru/)
NMitra
Не поняла что и куда нужно поднять. Пробуйте так http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-vertikal

.site-content {
margin: -50px 0 0px;
}