Специфика и оптимизация CSS и HTML

Кладовая теории, в которой собран опыт многих администраторов которые добились успехов в продвижении форумов.
Оптимизация phpbb3 | В каких цветах оформить форум? | Бесплатная раскрутка форума | Поисковая оптимизация (SEO)
Аватара пользователя
CabinetAdmin

Специфика и оптимизация CSS и HTML

CabinetAdmin 10 май 2013, 13:05 Сообщение

Специфика CSS.

Как браузер читает CSS?

В первую очередь вам необходимо знать, каким образом браузер читает CSS код. Делает он это сверху вниз, проходясь последовательно по каждой строчке:

Код: Выделить всё

/*Строка 10*/ ul li a { color: red; } /*Строка 90*/ ul li a { color: blue; }


Правило написанное на строке 10, будет заменено на строке 90. В результате цвет ссылки будет синим. Правила с одинаковыми селекторами, которые находятся ближе к концу файла имеют больший приоритет.

Тот же самый принцип работает при последовательном подключении CSS файлов:

Код: Выделить всё

<link href='css/style.css' rel='stylesheet'> <link href='css/custom.css' rel='stylesheet'>



Но всё в корне меняется если вы используете не только class, но и id. Например, приоритет такого селектора:

Код: Выделить всё

.content { width: 100px; }


будет ниже чем у:

Код: Выделить всё

#wrap .content { width: 500px; }


Всё потому, что мы использовали id (#wrap) перед class (.content), он намного "тяжёлее" по сравнению с классами и элементами (ul, li, a и так далее). Переиграть его можно только таким способом, добавив ключевое слово !important. Например, здесь приоритет будет уже у:

Код: Выделить всё

.content { width: 100px !important; }


а не у:

Код: Выделить всё

#wrap .content { width: 500px; }


Такой же принцип и у инлайновых стилей, то есть вписывание CSS непосредственно в теге элемента, но всё же, по мере возможности, лучше избегать этого способа. Идея семантического HTML и CSS заключается в разделении структуры и стилей. Помните, всегда храните стили в таблице стилей. Например:

Код: Выделить всё

.content { width: 100px; }


уступит:

Код: Выделить всё

<div class="content" style="width: 500px;"> <a href="http://cabinetadmina.ru/">Кабинет Админа</a> </div>


из-за использования в структуре html: style="width: 500px;".


После специфики работы с CSS, можно затронуть вопрос о его лишнем весе, всех лишних элементов которые мы добавляем для своего восприятия информации. Браузеру нет никакого дела до пробелов, анотаций и всякого рода украшениям в коде:

Код: Выделить всё

/*Строка 10*/ ul li a { color: red; } /*Строка 90*/ ul li a { color: blue; }


Они ему совершенно не нужны и если вы беспокоитесь о лишнем весе, то есть смысл сжать код:

Код: Выделить всё

ul li a { color: red; } ul li a { color: blue; }


или даже:

Код: Выделить всё

ul li a { color: red; } ul li a { color: blue; }



Тот же принцип и у HTML:

Код: Выделить всё

<div class="content"> <!-- Navigation --> <ul> <li><a href="http://cabinetadmina.ru/">Кабинет Админа</a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div><!-- End content -->


Сжимаем до:

Код: Выделить всё

<div class="content"><ul><li><a href="http://cabinetadmina.ru/">Кабинет Админа</a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul></div>


Это всё актуально для уменьшения веса страницы, но не для читаемости её кода в случае редактирования. Поэтому, если есть возможность, для редактирования использовать отдельный файл стилей со всеми отступами и комментариями, а при подключению к сайту воспользоваться инструментами для сжатия CSS стилей: CSS Compressor или CSS Drive.


При создании стилей пользуйтесь правилами просто и кратко, используйте вместо длинных названий css элементов сокращения, например, до:

Код: Выделить всё

#rightsidebar { background-color: #fff; background-image: (image/bg.png); background-position: 0 0; background-repeat: repeat-x; border-width: 1px; border-style: solid; border-color: #ffff00; font-family: Georgia, serif; font-size: 1.33em; line-height: 1.33em; font-weight: normal; margin: 10px 20px 10px 20px; padding: 1em; }


После:

Код: Выделить всё

#r_sidebar { background: url(image/bg.png) repeat-x 0 0 #fff; border: 1px solid #ff0; font: normal 1.33em/1.33 Georgia, serif; margin: 10px 20px; padding: 1em; }


Для временных или тестовых свойств можно добавлять дополнительный пробел или лучше аннотацию, по которой в последующем, с помощью поиска, можно будет легко найти эту вставку. Например:

Код: Выделить всё

body { font-family: Verdana, Helvetica, Arial, sans-serif; color: #828282; background-color: #FFFFFF; font-size: 10px; margin: 0; padding: 12px 0; border: 1px solid #000; /* Test */ }


Для временного отключения стиля можно закомментировать элемент с небольшим пояснением:

Код: Выделить всё

body { font-family: Verdana, Helvetica, Arial, sans-serif; color: #828282; background-color: #FFFFFF; /*font-size: 62.5%; This sets the default font size to be equivalent to 10px */ font-size: 10px; margin: 0; padding: 12px 0; }



Используйте <link> вместо @import.
Подключить внешние стили можно двумя способами. Либо с помощью тега <link>:

Код: Выделить всё

<link rel="stylesheet" href="style.css" />


Либо используя директиву @import (внутри внешних стилей или вложенных тегах <style>):

Код: Выделить всё

@import url('style.css');


Если использовать второй способ внутри внешних стилей, браузер не может параллельно загружать этот файл, что может помешать загрузке остальных вложений.


Специфика HTML

Подключить CSS и JavaScript код можно тремя простыми способами:
  1. Inline: Код пишется непосредственно в теге элемента. Для CSS в атрибуте style, а для JavaScript в атрибуте onclick.
  2. Вложенный: CSS и JavaScript код пишутся в блоках <style> и <script> соответственно.
  3. Внешний: Используя тег <link> для CSS файла, или же <script> с указанием атрибута src для JavaScript.

Старайтесь не включать CSS/JS в середине HTML файла. (Используйте инструменты для автоматизации этого процесса)

Третий вариант предпочтительнее для большинства случаев. При внешнем подключении не только улучшается структура сайта, но так же позволяет браузерам кэшировать эти файлы. Особенно это важно, если файлы тяжелые и их много.

Стили и скрипты рекомендуется размещать в блоке <head>, это позволяет странице оформляться по мере загрузки:

Код: Выделить всё

<html> <head> <meta charset="UTF-8"> <title>Главная страница</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen, projection" /> <script src="script.js"></script> </head> <body> <p><a href="http://cabinetadmina.ru/">Кабинет Админа</a></p> </body> </html>


С другой стороны, некоторые скрипты лучше подключать в конце, это позволит потратить время загрузки скриптов на оформление страницы:

Код: Выделить всё

<html> <head> <meta charset="UTF-8"> <title>Главная страница</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen, projection" /> </head> <body> <p><a href="http://cabinetadmina.ru/">Кабинет Админа</a></p> <script src="script.js"></script> </body> </html>



Аннотации и отображение вложенности в html коде.
Аннотации в структуре кода сильно облегчают поиск начала и конца редактируемого блока. Вложенность позволяет легко находить места с пропущенными тегами и подобными проблемами в коде странице.

Код: Выделить всё

<div id="wrap"> <div id="page-header"> <div class="headerbar"> <div id="site-description"> <a href="#"><img src="/image/site_logo.gif" alt="" title="" /></a> </div> </div> </div><!-- /page-header --> <div id="page-body"> <div class="content"> <p>Хотите создать форум? Тогда сервис форумов http://luckbb.ru то, что вам нужно!</p> </div> </div><!-- /page-body --> <div id="page-footer"> <div class="copyright"><a href="http://cabinetadmina.ru/">Кабинет Админа</a></div> </div><!-- /page-footer --> </div><!-- /wrap -->


Такой код будет гораздо легче редактировать, да и просто находить необходимые элементы, чем в:

Код: Выделить всё

<div id="wrap"> <div id="page-header"> <div class="headerbar"> <div id="site-description"> <a href="#"><img src="/image/site_logo.gif" alt="" title="" /></a> </div> </div> </div> <div id="page-body"> <div class="content"> <p>Хотите создать форум? Тогда сервис форумов http://luckbb.ru то, что вам нужно!</p> </div> </div> <div id="page-footer"> <div class="copyright"><a href="http://cabinetadmina.ru/">Кабинет Админа</a></div> </div> </div>


Это конечно идёт в разрез с принципами уменьшения веса страницы, но позволяет привести страницу в порядок.

В аннотации вы можете написать так, как вам будет понятно и удобно. Можно использовать класс элемента <!-- #id или .class -->, слово end говорящее, что это закрывающий тег <!-- /end #id или /end .class --> или просто косая линия <!-- /#id or /.class name -->.


Одно из главных "преступлений" в составлении html структуры проекта, это не закрывание тегов, вставка лишних или добавление материала вне блока, в котором он должен быть размещён.

Так например тег <link> должен быть всегда размещён внутри контейнера <head>, а материал отображаемый на странице браузера в <body>. Пример правильно составленной страницы:

Код: Выделить всё

<html> <head> <meta charset="UTF-8"> <title>Главная страница</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen, projection" /> </head> <body> <p><a href="http://cabinetadmina.ru/">Кабинет Админа</a></p> <script src="script.js"></script> </body> </html>


Пример неправильно составленной:

Код: Выделить всё

<html> <meta charset="UTF-8"> <head> <title>Главная страница</title> <p><a href="http://cabinetadmina.ru/">Кабинет Админа</a></p> </head> <link href="style.css" rel="stylesheet" type="text/css" media="screen, projection" /> <body> <script src="script.js"></script> </body> </html> <p><a href="http://cabinetadmina.ru/">Кабинет Админа</a></p>



Закрытие тега.
Главное правило которое нужно запомнить - все теги должны иметь как открывающие, так и закрывающие теги. Возьмем в пример тег для создания ссылок:

Код: Выделить всё

<a href="URL">...</a>


Из примера <a href="URL"> - это открытие тега, а </a> - закрытие. Между ними может быть текст или картинка. Ссылка, адрес документа, на который следует перейти, задаётся в атрибуте href.

Так же есть теги не требующие закрывающего тега, такие как:

Код: Выделить всё

<img src="URL" alt="" />

или:



Каждый тег в html делится на два вида: блочный и инлайновый. Блочные элементы - <div>, <h1>, составляют структуру страницы. Инлайновые элементы - <span>, <a>, должны находится внутри блочных.

Например.
Неправильно:

Код: Выделить всё

<a href="#"><h2>Привет</h2></a>


Правильно:

Код: Выделить всё

<h2><a href="#">Привет</a></h2>
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект


Похожие темы

Вернуться в «Статьи / советы / инструкции.»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость