CSS
Введение в CSS
| |
 Тематические порталы
|
CSS — термин является аббревиатурой с английского языка Cascading Style Sheets и переводится, как "каскадные таблицы стилей".
CSS — базовая технология для определённого отображения тех или иных элементов интернет страниц: текста, картинок, заголовков, списков, таблиц и т.д. Данная технология применяется веб-мастерами для определения элементам интернет сайта цвета, шрифта, а также расположения отдельных блоков и других аспектов внешнего вида веб-страниц сайта.
Все вопросы использования и настройки CSS можно отправить на странице обсуждения данной статьи.
История CSS
В самом начале 1990 года, для того, чтобы отображать веб-страницы, разные браузеры обладали своими собственными стилями. Развитие HTML было очень быстрым и он был способен удовлетворять на тот момент все существовавшие потребности по оформлению информации, именно поэтому тогда и не получил широкого признания CSS.
И лишь Хокон Виум Ли в 1994 году предложил для HTML документов использование концепции «каскадные таблицы стилей». В то далекое время браузеры имели ограничение в функционале. А в 1990 году язык HTML, который создал Тим Бернерс-Ли, полагал сделать не визуальное, а структурное отображение документов. Один из основателей Netscape, Марк Андреесен, в 1994 году 13 октября сообщил, что доступна для тестирования от Netscape Navigator первая версия. И за три дня до проведения тестирования, норвежский программист, Хокон Виум Ли публикует черновой вариант CSS. На сегодняшний день он имеет слишком мало схожего с принятыми современными стандартами, но именно тогда был заложен общий смысл. В визуальном оформлении была возможность использовать не только язык CSS, но и ряд других языков программирования стилей.
В ноябре 1994 года в Чикаго на Веб-конференции, как и планировалось, был предоставлен первый черновик CSS. Дебаты различного политического характера и разрешение некоторых технических вопросов продолжались в течение двух лет, но 1996 года 17 декабря W3C официально зарекомендовал CSS1.[1]
С тех пор выходили в свет следующие версии CSS с расширением функционала и возможностей управления вёрстки интернет страниц:
- CSS1 - 1994 год: Ограниченный функционал, который включал в себя настройку размера шрифта, менять его стиль: обычный, курсив или полужирный, определять рамки, фоны, цвета текста и другие элементы страницы. А также задавать расстояние между словами, междустрочные отступы и интервал между символами, делать выравнивание текста, таблиц, изображений. Имеются свойства внутренних и внешних отступов и рамок, ширины, высоты блоков и позиционированию элементов.
- CSS2 - 1998-2009 год: Сохранились все предыдущие функции и добавился ряд дополнительных, а именно: фиксированное, абсолютное и относительное позиционирование элементов, расширился механизм селекторов и ряд других особенностей при работе с графическими и звуковыми элементами.
- CSS3 - Нынешнее развитие CSS, которое даёт возможности анимации, различные округления рамок, таблиц, а также настройка тени, множественные фоны и другие возможности.
Основы CSS
Каждый начинающий веб-мастер сталкивается с проблемой разработки дизайна сайтов и вёрстки страниц. Делать это нужно правильным образом, чтобы страницы одинаково отображались во всех известных интернет браузерах, таких как Internet Explorer, FireFox, Chrom и другие. Правильная верстка сайта также способствует быстрой загрузке страниц и быстрой индексации сайтов в поисковиках. О том, что такое CSS и как при помощи этого инструмента оформлять страницы, создавать дизайн сайта, можно узнать в этой и серии других статей, посвящённых данной теме. Этот учебный материал о CSS предназначен прежде всего для начинающих, кто ещё не сталкивался с оформлением страниц и верстки интернет сайтов.
Как создать CSS и подключить его к сайту?
Существует три способа, чтобы подключить CSS и начать вёрстку сайта с его помощью:
1) Вставить нижеследующий код в HTML страницы и между тэгами <head> и непосредственно между кодом "<style type="text/css">" и "</style>" вписываются все параметры CSS для элементов размещённых на данной странице. Данный способ имеет недостаток, так как прописанные свойства css не распространяются на другие страницы сайта.
<head>
<style type="text/css">
#example {width: 100%}
</style>
</head>
2) Существует и второй способ - создать отдельный файл, например mystyles.css, в котором непосредственно будет вводится весь код верстки сайта. Этот файл можно непосредственно создать в стандартной программе блокнот и там же редактировать этот файл. Но рекомендуется использовать для удобства специальные программы, например такие, как Notepad++. Если решили создать отдельный файл css, то в HTML коде всех страниц сайта необходимо указать ссылку на файл css при помощи нижеследующего кода
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css"/>
</head>
href="mystyles.css" - это путь к папке с файлом css.
Данный способ самый предпочтительный так как настройки заданные в css распространяют действие на все страницы сайта, не забывая на этих страницах указывать ссылку на данный css файл. Важно отметить, что этот способ очень удобен, так как в случае каких-либо изменений дизайна на сайте придётся редактировать только один CSS файл, после чего изменения элементов дизайна произойдёт автоматический на всех страницах сайта. В первом же случае придётся редактировать каждую страницу, что займёт больше времени.
3) Задавать параметры css можно непосредственно внутри HTML следующим образом:
<div style="border: 1px solid blue; padding: 5px;">Текст или другой элемент внутри блока.</div>
- После "style=" задаются все необходимые параметры css к конкретному элементу.
Синтаксис CSS
В первую очередь нужно знать что код CSS делится на три составляющих:
- Селектор - название html элемента или его имя, к которому применяются настройки. Непосредственно в коде можно группировать несколько селекторов и применять к ним одни и те же свойства.
- Свойство - определённое свойство, присваиваемое данному элементу (фон, цвет и т.д.)
- Значение - значение свойства, применяемое к селектору. При этом можно присвоить большое количество свойств и их значений к html элементам на странице.
Ниже приведён пример, как оформляется CSS команда к элементу и задаётся свойство к элементу:
В каждой статье, посвящённой свойствам CSS, будут селекторы по тому или иному html элменту, а также их возможные свойства.
И так, чтобы оформить страницу через CSS нужно:
- Присвоить какому либо элементу на странице (всей странице, картинке, таблице или элементу div) id. Но лучше всего любой элемент страницы обрамлять тэгом <div> и присвоить ему id, например:
<div id="id_name">Текст, картинка или другой элемент</div>
Тег DIV является, пожалуй, одним из самых часто встречающихся тегов html. В частности, форматирование элементов страницы с помощью стилей, используется совместно с использование блоков, организованных с помощью тегов DIV.
Другими словами Тег DIV – это тег, с помощью которого хотят выделить фрагмент документа с целью изменения его внешнего вида. Другими словами, с помощью тега DIV выделяют блок в html коде, которому придают вид отличный от другого содержимого html кода.[2]
- Далее присвоенному элементу в CSS файле прописываем ему свойства и их значения (параметры)в фигурных скобках {}, например:
div {
font-size: 12px;
font-family: Verdana;
}
#id_name {
background: blue;
border: 1px solid blue;
}
body {
background: gray;
border: 1px solid black;
}
img {border: 1px solid red;}
- div - задаём общие параметры ко всем блокам div на сайте.
- #id_name - задаём имя конкретному элементу в html, и в скобках у нас обозначены параметры, в данном случапе параметр фона и границ.
- body - в этом случае задаём свойства в css всей странице, так как все элементы html находятся внутри тэгов <body></body>.
- img - задаём свойства всем картинкам на странице, также можно задать конкретной картинке свойства прописав ей уникальный id, тогда в css значение картинки будет выглядеть например так: #id_name img, т.е. картинка внутри элемента с id #id_name.
- table - задаём свойства ко всем таблицам размещённым на сайте.
- td, th - задаём свойства к ячейкам таблиц, размещённых на сайте.
Более подробно о том, как придавать конкретные свойства элементу страницы на примере блока div читайте ниже
Основы оформления страниц
Язык CSS не такой сложный, чтобы его освоить и далее оформлять страницы сайта без помощи справочной информации. Если вы владеете немного английским языком, то сложностей вообще не возникнет, т.к. много терминов употребляется с английского языка.
И так сайт страница сайта подключена к файлу CSS и можно приступать непосредственно к оформлению страниц. Сначала создаём div в html и присваиваем к нему id:
<div id="name">Текст, картинка, ссылка или другие элементы страницы</div>
Далее при помощи CSS можно оформлять эту область так, как угодно. Здесь, так сказать, можете включать свою фантазию и задавать ширину, длину, высоту, цвет фона, цвет и тип линий, задавать тип и размер шрифта и другие настройки описанные ниже. Следует знать, что каждому HTML элементу на странице присвоен конкертный селектор, которому можно задать те или иные параметры и свойств.
Заключение
При помощи CSS можно настроить весь дизайн сайта. Преимуществом данного способа является то, что нет необходимости редактировать каждую страницу по отдельности, необходимо редактировать только один CSS файл и все изменения отразятся на всех страницах сайта.
На основе вышеизложенного материала был сделан шаблон сайта при помощи CSS. Скачать страницу в архиве можно здесь.
Если есть какие-либо вопросы по данной статье или возникли трудности по настройке сайта через CSS, то можно спросить на странице обсуждения данной статьи на нашем форуме. Более подробно о настройке тех или иных элементов сайта через CSS смотрите в отдельно созданных статьях, ссылки которых находится в панели навигации ниже.
