Введение в CSS
СБ, 10/02/2010 - 13:29
CSS (Cascading Style Sheets, что с английского переводиться как каскадные таблицы стилей) - это специальный язык, с помощью которого можно задать цвет, шрифт, относительное расположение и другие свойства объектам на странице.
Одной из основных задач CSS является разделение самого HTML кода и свойств отображаемых элементов. Это разделение увеличивает читабельность кода и уменьшает время описания свойств всех элементов страницы, а так же ликвидирует дублирования свойств в структуре самой страницы.
Структура самого файла CSS не сложная и понятна с первых примеров.
В теоретической части она выглядит вот так:
селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
Селекторы являются именами HTML тегов(p,strong,b,table и так далее), классы(начинаются с «.») или идентификаторы(начинаются с «#»). Каждая строка свойства закрывается «;».
Свойствам же присваивается определенное значение.
Примеры CSS:
p {
text-align: left;
font-size: 16px;
font-family: Helvetica, Verdana, Arial, sans-serif;
}
Описание свойство HTML тега <p>...</p>. Мы присвоили ему шрифты (font-family: Helvetica, Verdana, Arial, sans-serif;), указали размер шрифта (font-size: 16px;) и присвоили выравнивание текста по левому краю(text-align: left;).
h2 {
font-size: 120 %;
color: lime;
background: white;
}
Описание свойство HTML тега <h2>...</h2>. Указали размер шрифта (font-size: 120 %;), цвет текста (color: lime;) и цвет фона (background: white;).
.listing {
font-size: 14px;
font-weight: bold;
background-color: #cccccc;
padding-left: 20px;
}
В этом примере мы начали название селектора с точки(«.»), что является обозначением класса. Классы в CSS нужно использовать к множественным объектам. В тексте HTML-документа у тегов необходимо вписывать свойство «class={название класса}» для присвоения ему данный свойств. Например <p class= «listing»>...</p>. Здесь мы описали класс «listing»,который можно использовать для выделения вырезки кода внутри текста. В нем мы описали размер шрифта (font-size: 14px;),сделали шрифт полужирным(font-weight: bold;), фоновый цвет сделали серый (background-color: #cccccc;) и указали отступ от левого края (padding-left: 20px;) для выделения на общем фоне текста.
#head {
background-color: black;
padding-bottom: 10px;
padding-top: 10px;
margin-right: auto;
margin-left: auto;
}
Как вы видите название селектора началось с диеза(«#»). Это означает, что мы описываем идентификатор. В HTML-документе мы указываем на идентификатор свойством тега «id={название идентификатора}».Например <div id= « head»>...</div>. Поведение идентично классам, но идентификаторы лучше использовать для описание одного объекта HTML страницы.
Существует несколько способов включения CSS в HTML страницы:
- Ссылкой на внешний файлы внутри тега <head>...</head> в теле HTML-документа(наиболее предпочитаемый способ).
<link rel="stylesheet" type="text/css" href="style.css">
- Написание CSS в теге <style type="text/css">...</style> непосредственно в теле самого HTML-документа:
<style type="text/css">
body {
background-color: black;
color: white;
padding-bottom: 10px;
padding-top: 10px;
padding-top: 10px;
}
</style>
Все свойства объектов вы можете найти на сайте W3C или в любом справочнике по CSS версии 2.1. Именно эта версия на данный момент поддерживается большинством современных браузеров.
