В данной статье изложены основные понятия, структура и принципы работы с CSS, для простого и быстрого понимания сути этого инструмента.
Что такое CSS и его возможности
Стилем, в веб-разработке принято называть каскадные таблицы стилей(Cascading Style Sheets) - CSS. Этот мощнейший инструмент, созданный специально для удобства и простоты оформления веб-страниц, предоставляет вагон и маленькую тележку возможностей для неповторимого и красочного дизайна любого интернет-ресурса.На сегодняшний день существует четыре рабочих версии спецификации - CSS1, CSS2, CSS2.1, CSS3(дополняется) и находящаяся в разработке версия - CSS4.
Самая популярная, среди разработчиков, последняя версия - CSS3, т.к. обладает более широкими возможностями в отношении не только обозначения, оформления и позиционирования элементов страницы, но и допускает некоторые возможности программирования. Именно возможности этой версии позволяют создавать анимации и необычные визуальные эффекты не прибегая к помощи JavaScript, jQuery и др.
Структура каскадных таблиц стилей
Структура таблиц CSS очень проста, она состоит из: селектора - обозначения элемента, к которому можно применить какие-либо свойства с тем или иным значением.В чистом виде запись выглядит следующим образом:
свойство: значение;
свойство: значение;
}
свойство: значение значение значение; /* ваш комментарий */
свойство: значение, значение, значение;
}
Как правильно добавить CSS в HTML-документ
Используя свойства с соответствующими значениями возможно изменить практически любой параметр элемента. Существует несколько способов добавления CSS к элементам страницы - общий, частный и удаленный.Общий или, как говорят: "глобальный", способ подключить CSS означает, что стилевые свойства прописываются в начале HTML-документа и действуют для всего документа (всех страниц и указанных блоков). Код заключается в специальные теги STYLE и располагается до закрывающего тега HEAD
<!DOCTYPE html>
<html>
<head>
...
<style>
body {
color: red;
}
</style>
</head>
<body>
...
</body>
</html>
Частный способ или "локальный", дает возможность добавить необходимые свойства непосредственно к выбранному элементу.<html>
<head>
...
<style>
body {
color: red;
}
</style>
</head>
<body>
...
</body>
</html>
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div style="background: green; color: white;"></div>
</body>
</html>
Также можно подключить таблицу стилей к сайту удаленно, т.е. вынести весь код в отдельный файл, а в коде страницы указать на него ссылку, существует два способа это сделать, используя тег LINK и применяя правило @import<html>
<head>
...
</head>
<body>
<div style="background: green; color: white;"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
...
<linkrel="stylesheet" href="style.css"> <!-- подключения по средствам тега link -->
...
<style>
@import url(style.css); /* использование правила @import*/
</style>
</head>
<body>
<div>...</div>
</body>
</html>
<html>
<head>
...
<link
...
<style>
@import url(style.css); /* использование правила @import*/
</style>
</head>
<body>
<div>...</div>
</body>
</html>
Оптимизация кода
Стилевые правила, воспринимаются браузером очень быстро, однако если их много, на низких скоростях соединения с интернетом (например мобильном или общедоступном Wi-Fi) могут возникать проблемы с быстротой желаемого отображения элементов сайта. Такое часто бывает если документ CSS подключается удаленно. Чтобы избежать такой ситуации, можно оптимизировать законченный код, используя следующие простые рекомендации:1. При написании кода, старайтесь группировать селекторы со одинаковыми значениями свойств. Например: заголовки с однотипными шрифтами, блоки с одинаковым оформлением и т.п.
h1, h2, h3 {
background: lightbue;
font-family: Arial, sans-serif;
font-weight: bold;
text-align: center;
}
h1 {
font-size: 24px;
}
h2, h3 {
font-size: 18px;
}
2. Старайтесь соблюдать иерархию документа, т.е. от основного к мало значимому. Начинайте оформление с основных блоков, далее заголовки, вложенные элементы, дополнительные включения и т.д.background: lightbue;
font-family: Arial, sans-serif;
font-weight: bold;
text-align: center;
}
h1 {
font-size: 24px;
}
h2, h3 {
font-size: 18px;
}
3. Избегайте указывать противоречивые стилевые правила для одних и тех же элементов. Корректно пользуйтесь поиском и указанием элементов в коде по соответствующим селекторам.
4. По окончании написания кода и его проверки, вы можете удалить лишние пробелы или даже записать все в одну строку, это только ускорить обработку кода браузером.
Добавление CSS в шаблоны Blogger
В шаблоны Blogger, как и в любой HTML-документ без труда можно добавить собственные стилевые свойства для элементов шаблона, не смотря на то что сам шаблон написан на XML. Более подробно написано в статье отдельно посвященной этой теме.©http://magentawave.com
Спасибо, Александр!
ОтветитьУдалитьИнтересный пост про css, но все же так и не смог понять, как решить свою проблему.
Это начало, дальше будет еще интереснее. Вашу проблему можно решить двумя способами - или присваивать ссылкам в посту отдельный класс и именно для него указывать свойства, либо удалять ссылки из картинок.
УдалитьИнтересно! Коротко и ясно. Всё самое нужное про CSS.
ОтветитьУдалитьНебольшая ремарка: у вас в самом конце ссылка ведёт в никуда :)
Спасибо, поправил.
УдалитьПривет Александр!
ОтветитьУдалитьСпасибо за пост. Не помешала бы еще статья о классах, id и тп... Как эти все разные элементы различаются и как их использовать.
Для новичков это лес :)
Вам сюда -
Удалитьhttp://www.magentawave.com/2014/01/all-about-css-selectors.html
http://www.magentawave.com/2014/01/css-pseudo-classes-and-elements.html
Спасибо, очень подробно
Удалить