CSS

Материал из Викижурнал
Введение в CSS
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 нужно:

  • Присвоить какому либо элементу на странице (всей странице, картинке, таблице или элементу id или class. Но лучше всего любой элемент страницы обрамлять тэгом <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;}
  1. div - задаём общие параметры ко всем блокам div на сайте.
  2. #id_name - задаём имя конкретному элементу в html, и в скобках у нас обозначены параметры, в данном случапе параметр фона и границ.
  3. body - в этом случае задаём свойства в css всей странице, так как все элементы html находятся внутри тэгов <body></body>.
  4. img - задаём свойства всем картинкам на странице, также можно задать конкретной картинке свойства прописав ей уникальный id, тогда в css значение картинки будет выглядеть например так: #id_name img, т.е. картинка внутри элемента с id #id_name.
  5. table - задаём свойства ко всем таблицам размещённым на сайте.
  6. td, th - задаём свойства к ячейкам таблиц, размещённых на сайте.

Более подробно о том, как придавать конкретные свойства элементу страницы на примере блока div читайте ниже

Основы оформления страниц

Шаблон сайта сделанный полностью на CSS

Язык CSS не такой сложный, чтобы его освоить и далее оформлять страницы сайта без помощи справочной информации. Если вы владеете немного английским языком, то сложностей вообще не возникнет, т.к. много терминов употребляется с английского языка.

И так сайт страница сайта подключена к файлу CSS и можно приступать непосредственно к оформлению страниц. Сначала создаём div в html и присваиваем к нему id: 

<div id="name">Текст, картинка, ссылка или другие элементы страницы</div>

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

Заключение

При помощи CSS можно настроить весь дизайн сайта. Преимуществом данного способа является то, что нет необходимости редактировать каждую страницу по отдельности, необходимо редактировать только один CSS файл и все изменения отразятся на всех страницах сайта.

На основе вышеизложенного материала был сделан шаблон сайта при помощи CSS. Скачать страницу в архиве можно здесь.

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

Настройка элементов при помощи CSS

Ссылки

  1. ↑ История создания CSS
  2. ↑ Подробно о тэге "div"
Источник — https://ru.wikijournal.org/w-wiki/index.php?title=CSS&oldid=12638