О том что НЕ связано, и что СВЯЗАНО с бизнесом в интернете.

Изучаем и применяем CSS

16 Янв 2013

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

CSS или  (от Cascading Style Sheets), это специальный язык, используемый для описания внешнего вида и форматирования документа на языке разметки. CSS обычно используется для описания стилей HTML или XHTML страниц, однако этот язык можно применять для любых XML-документов.

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

До появления CSS почти все визуальные атрибуты HTML-документов содержались в HTML-разметке. Все цвета шрифтов, стили фонов, выравнивания элементов, границы и размеры должны были быть явно описаны в HTML, причём эти описания могли повторяться. CSS позволяет переместить большинство этой информации в отдельную таблицу стилей, что значительно упрощает HTML-код.

Заголовки первого (h1), второго (h2), третьего (h3) и других уровней определяются структурно в HTML. Внешний вид документа на печати и на экране зависит от выбора шрифта, размера, цвета и графического выделения.

До появления CSS для применения таких визуальных стилей, скажем, ко всем заголовкам второго уровня, необходимо было использовать тэг <font> и другие средства HTML для каждого такого заголовка. Такая разметка значительно усложняла внутреннюю структуру документа и работу с ним.

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

CSS также определяет не визуальные стили, например скорость и выразительность, с которой текст должен читаться программами, воспроизводящими речь. По мнению W3C (Консорциум Всемирной паутины), CSS имеет преимущества перед другими способами описания внешнего вида документов. Описание внешнего вида средствами HTML сейчас считается устаревшим.

Все каскадные таблицы стилей находятся в корневой папке или в папке темы вашего сайта, в папке CSS. В которой и находятся файлы с таблицами стилей , а главный файл этой папки, является файл template.css. И если открыть его в простом блокноте, то он имеет вот такой вид:

html {

  height: 100%;

  margin-bottom: 0px;

}

 form {margin: 0;

padding: 0;

}

 img,table { border: none;

}

img.ots { margin-left : 3px;

}

img.ots1 { margin-right : 1px;

}

 body { font-family:Tahoma;

                line-height: 1.3em;

                margin: 0;

                padding: 0;

                font-size: 12px;

                color: #333;

                background: #f8f8f8;

}

  body.contentpane { background: #f8f8f8;

}

 a:link, a:visited { text-decoration: underline;

                font-weight: normal;

                color: #1D6B20;

}

a:hover { text-decoration: underline;

                font-weight: normal;

                color: #333;

}

 input.button, .validate  { color: #333;

                font-size: 10px;

                border: 1px solid #555;

}

 .search input.button { text-align: right;

}

 input.button:hover, .validate:hover  {

}

 p { margin-top: 0;

                margin-bottom: 5px;

                text-align: justify;

}

 .inputbox { border: 1px solid #555;

                color: #333;

                padding: 2px;

}

.inputbox:hover {

 }

#search { height:45px;

                width:200px;

                float:right;

                padding: 6px 0 0 0;

                margin-right:30px;

                margin-top:10px;

                background:url(../images/search_ico.jpg) left top no-repeat;

}

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

Ваш отзыв

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.