Каскадные таблицы стилей (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>Продолжение на странице про селекторы.
12 комментариев:
Про упорство промолчу, поскольку не мне говорить об этом качестве автору плюшевых медвежат :)
Вот мой блог: http://ok-glworld.blogspot.com/2012/03/blog-post_12.html
Нужно убрать оранжевые полосы с двух сторон банера(появились после вставки банера,банер делал так:забрасывал анимацию на фотохостинг а далее поставил через HTML/Javscript ссылку),мне советовали через Фотошоп,сделать фон,потом как то вставить,но я врядли смогу,т.к. навыков особых владения Фотошоп - нет,мне кажется есть другой вариант исправить ошибку,но какой вот собствено и вопрос.Ещё раз повторюсь,если это сложно,помогите заплачу!
Надеюсь на вразумительный ответ.Мир не без добрых людей!
Заранее спасибо!
С ув.Александр
В коде шаблона строка, отвечающая за отображения комментов, "post-comment-link". Вставляю туда любой тег, который служит для выравнивания, а они все переносят ссылку на строчку ниже. Уже 2 часа мучаюсь над этим. Делаю методом тыка)). Ведь некрасиво, когда теги слева на одной строке, а комменты справа, но на строчку ниже. Какой-то бред получается.
.site-content {
margin: -50px 0 0px;
}