Специфика CSS.
Как браузер читает CSS?
В первую очередь вам необходимо знать, каким образом браузер читает CSS код. Делает он это сверху вниз, проходясь последовательно по каждой строчке:
Правило написанное на строке 10, будет заменено на строке 90. В результате цвет ссылки будет синим. Правила с одинаковыми селекторами, которые находятся ближе к концу файла имеют больший приоритет.
Тот же самый принцип работает при последовательном подключении CSS файлов:
Но всё в корне меняется если вы используете не только
будет ниже чем у:
Всё потому, что мы использовали id (
а не у:
Такой же принцип и у инлайновых стилей, то есть вписывание CSS непосредственно в теге элемента, но всё же, по мере возможности, лучше избегать этого способа. Идея семантического HTML и CSS заключается в разделении структуры и стилей. Помните, всегда храните стили в таблице стилей. Например:
уступит:
из-за использования в структуре html:
После специфики работы с CSS, можно затронуть вопрос о его лишнем весе, всех лишних элементов которые мы добавляем для своего восприятия информации. Браузеру нет никакого дела до пробелов, анотаций и всякого рода украшениям в коде:
Они ему совершенно не нужны и если вы беспокоитесь о лишнем весе, то есть смысл сжать код:
или даже:
Тот же принцип и у HTML:
Сжимаем до:
Это всё актуально для уменьшения веса страницы, но не для читаемости её кода в случае редактирования. Поэтому, если есть возможность, для редактирования использовать отдельный файл стилей со всеми отступами и комментариями, а при подключению к сайту воспользоваться инструментами для сжатия CSS стилей: CSS Compressor или CSS Drive.
При создании стилей пользуйтесь правилами просто и кратко, используйте вместо длинных названий css элементов сокращения, например, до:
После:
Для временных или тестовых свойств можно добавлять дополнительный пробел или лучше аннотацию, по которой в последующем, с помощью поиска, можно будет легко найти эту вставку. Например:
Для временного отключения стиля можно закомментировать элемент с небольшим пояснением:
Используйте
Подключить внешние стили можно двумя способами. Либо с помощью тега <link>:
Либо используя директиву
Если использовать второй способ внутри внешних стилей, браузер не может параллельно загружать этот файл, что может помешать загрузке остальных вложений.
Специфика HTML
Подключить CSS и JavaScript код можно тремя простыми способами:
Третий вариант предпочтительнее для большинства случаев. При внешнем подключении не только улучшается структура сайта, но так же позволяет браузерам кэшировать эти файлы. Особенно это важно, если файлы тяжелые и их много.
Стили и скрипты рекомендуется размещать в блоке
С другой стороны, некоторые скрипты лучше подключать в конце, это позволит потратить время загрузки скриптов на оформление страницы:
Аннотации и отображение вложенности в html коде.
Аннотации в структуре кода сильно облегчают поиск начала и конца редактируемого блока. Вложенность позволяет легко находить места с пропущенными тегами и подобными проблемами в коде странице.
Такой код будет гораздо легче редактировать, да и просто находить необходимые элементы, чем в:
Это конечно идёт в разрез с принципами уменьшения веса страницы, но позволяет привести страницу в порядок.
В аннотации вы можете написать так, как вам будет понятно и удобно. Можно использовать класс элемента
Одно из главных "преступлений" в составлении html структуры проекта, это не закрывание тегов, вставка лишних или добавление материала вне блока, в котором он должен быть размещён.
Так например тег
Пример неправильно составленной:
Закрытие тега.
Главное правило которое нужно запомнить - все теги должны иметь как открывающие, так и закрывающие теги. Возьмем в пример тег для создания ссылок:
Из примера
Так же есть теги не требующие закрывающего тега, такие как:
или:
Каждый тег в html делится на два вида: блочный и инлайновый. Блочные элементы -
Например.
Неправильно:
Правильно:
Как браузер читает CSS?
В первую очередь вам необходимо знать, каким образом браузер читает CSS код. Делает он это сверху вниз, проходясь последовательно по каждой строчке:
Код: Выделить всё
/*Строка 10*/
ul li a {
color: red;
}
/*Строка 90*/
ul li a {
color: blue;
}
Тот же самый принцип работает при последовательном подключении CSS файлов:
Код: Выделить всё
<link href='css/style.css' rel='stylesheet'>
<link href='css/custom.css' rel='stylesheet'>
Но всё в корне меняется если вы используете не только
class
, но и id
. Например, приоритет такого селектора:
Код: Выделить всё
.content {
width: 100px;
}
Код: Выделить всё
#wrap .content {
width: 500px;
}
#wrap
) перед class (.content
), он намного "тяжёлее" по сравнению с классами и элементами (ul
, li
, a
и так далее). Переиграть его можно только таким способом, добавив ключевое слово !important
. Например, здесь приоритет будет уже у:
Код: Выделить всё
.content {
width: 100px !important;
}
Код: Выделить всё
#wrap .content {
width: 500px;
}
Код: Выделить всё
.content {
width: 100px;
}
Код: Выделить всё
<div class="content" style="width: 500px;">
<a href="http://cabinetadmina.ru/">Кабинет Админа</a>
</div>
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 элементов сокращения, например, до:
Код: Выделить всё
#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 код можно тремя простыми способами:
- Inline: Код пишется непосредственно в теге элемента. Для CSS в атрибуте style, а для JavaScript в атрибуте onclick.
- Вложенный: CSS и JavaScript код пишутся в блоках
<style>
и<script>
соответственно. - Внешний: Используя тег
<link>
для CSS файла, или же<script>
с указанием атрибута src для JavaScript.
Третий вариант предпочтительнее для большинства случаев. При внешнем подключении не только улучшается структура сайта, но так же позволяет браузерам кэшировать эти файлы. Особенно это важно, если файлы тяжелые и их много.
Стили и скрипты рекомендуется размещать в блоке
<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="" />
Код: Выделить всё
<hr />
Каждый тег в html делится на два вида: блочный и инлайновый. Блочные элементы -
<div>
, <h1>
, составляют структуру страницы. Инлайновые элементы - <span>
, <a>
, должны находится внутри блочных.Например.
Неправильно:
Код: Выделить всё
<a href="#"><h2>Привет</h2></a>
Код: Выделить всё
<h2><a href="#">Привет</a></h2>
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.
Похожие темы
-
Приветствую!
Можно как то соорудить для phpBB Тег ?
То есть сделать в виде ббкода на подобии комментария HTML тега для сообщений, чтобы в сообщениях...