2019-02-17

Textual description of firstImageUrl

Что такое стили CSS?

css в Blogspot
Сегодня расскажу что такое CSS3, с чем его едят, где его искать, как правильно его прописывать. Предупреждаю, буду рассказывать от себя, упрощенно для широкой публики, как я это вижу + примеры. Итак, начнем издалека.
CSS – это стили, в которых прописываются свойства объекта. Значит, они есть во всех существующих движках, если вы их не можете найти, значит либо не там смотрите, либо их действительно нет (кривой сайт). Где же они обычно найти? Обычно это корень сайта, название файла style.css, хотя, в принципе, название не так важно, как расширение .css, если файл с таким расширением – это файл стилей.
Смотрите также уроки по основам CSS на моём блоге.

Где их искать? 


Путь к файлу приписывают в шаблоне между <head></head>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
В Blogspot немного по другому, там стили прописаны сразу в коде, до тега между
<b:skin>тут стили</b:skin>

Как выглядят стили? 


разберем на примере:
<head>
#header {
 background: #fff;
 font-size: 13px;
 line-height: 1.5;
 font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif;
 color: #333;
}
.contacts {
 position: absolute;
 top: 20px;
 right: 10px;
}
</head>
<body>
<div id='header'>шапка сайта</div>
<div class='contacts'>контакты автора сайта сайта</div>
</body>
Вы можете просмотреть стили на любом сайте, достаточно лишь просмотреть html-код сайта в браузере. Теперь вы без труда их узнаете, прочитав как они выглядят в этой статье.
Как видно, стили по разному прописываются. Стилям, которые начинаются на знак решетки соответствует определенный id блока в html, стилям с точкой определенный класс блока. По другому никак, не будут стили работать. Названия вы можете придумать какие хотите, главное чтоб они соответствовали написанным id и class в html. Свойства стиля обязательно обрамляются в скобки, после него ставится двоеточие (смотрим на пример выше), пишется параметр и закрывается точкой с запятой. Допускается что в последнем свойстве в конце можно точку с запятой не ставить, достаточно закрывающей скобки.
Бывает что CSS прописывают сразу в блоке, не выводя его в отдельный файл:
<div style='background: #fff;font-size: 13px;line-height: 1.5;font-family: Georgia,"Times New Roman","Bitstream Charter",Times,serif;color: #333;'>шапка сайта</div>

CSS на Blogspot

В Blogger стили могут прописываться по другому, объясню позже из-за чего. Открыв код можем видеть такое (просмотрите стили внимательно, и вы увидите знакомые блоггеровские теги, задающие стили):
<b:skin><![CDATA[
  <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Font" type="font"
         default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 40px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>
     <Variable name="header.text.color" description="Title Color" type="color" default="#3399bb"  value="#000000"/>
   </Group>
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
border-right: 1px solid #666666;
float: left;
padding: 0 15px 0 0;
}
]]></b:skin>
Как видим, свойство стиля .Header h1 прописано отдельно выше. Как понять и найти свойство? очень просто, у font есть параметр header.font, вот его то мы и ищем. Находим его в группе свойств “Blog Title” для стиля “.header h1″, внутри 2 свойства “header.font” и “header.text.color”. Вот их мы и меняем. Это сделано для быстроты чтения стилей браузером, так он меньше делает запросов. Ведь свойство header.text.color может где-то еще повторяться. Ниже еще есть header.shadow.offset.left и другие, смысл в них тот же, повторять не буду.
Когда говорят искать в css (или стилях), значит ищем в blogspot’е между тегами
<b:skin></b:skin>
и обычно до тега
</body>
если конечно они не прописаны прямо в html (пример выше, стили в блоках). В других cms обычно все вынесено в отдельный файл с расширением .css

Комментариев нет :

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности