Перейти к содержанию

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, применяемые к элементам текущей страницы. Однако этот метод имеет существенный недостаток: стили, прописанные таким образом, не будут распространяться на другие страницы сайта.

<head>
<style type="text/css"> 
#example {
  width: 100%;
}
.class_example {
  color: white;
  }
</style>
</head>

2) Существует и второй способ подключения CSS — создание отдельного файла, например, mystyles.css, в котором будет размещён весь код стилей для сайта. Такой файл можно создать и редактировать в стандартном текстовом редакторе, например, Блокноте. Однако для удобства рекомендуется использовать специализированные программы, такие как Notepad++, Visual Studio Code и другие.

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

<head>
<link rel="stylesheet" type="text/css" href="mystyles.css"/>
</head>

href="mystyles.css" — это путь к CSS-файлу. Этот метод считается самым предпочтительным, так как стили, описанные в CSS-файле, будут автоматически применяться ко всем страницам сайта, где указанна ссылка на этот файл.

Ключевое преимущество этого подхода — удобство. Если потребуется изменить дизайн сайта, достаточно внести правки только в одном CSS-файле, и эти изменения отобразятся на всех страницах, где он подключён. В случае использования встроенных стилей (как в первом способе) потребуется редактировать каждую страницу отдельно, что значительно увеличивает трудозатраты.

3) Параметры CSS можно задавать непосредственно внутри HTML-кода с помощью атрибута style. Это, так называемый, инлайновый стиль. Делается следующим образом: 

<div style="border: 1px solid blue; padding: 5px;">Текст или другой элемент внутри блока.</div>

После style=" перечисляются необходимые CSS-свойства, применяемые к конкретному элементу. Например, в данном случае у блока (<div>) задаются следующие стили:

  • border: 1px solid blue; — рамка толщиной 1 пиксель, сплошная, синего цвета;
  • padding: 5px; — внутренний отступ внутри блока равен 5 пикселям.

Этот способ удобен для задания уникальных стилей для отдельных элементов, однако его использование не рекомендуется для больших проектов, так как затрудняет управление стилями при масштабировании сайта.

Синтаксис CSS

CSS состоит из трёх ключевых компонентов:

  • Селектор — указывает на элемент HTML, к которому применяются стили.
  • Свойство — задаёт характеристику (например, цвет, размер шрифта и т. д.).
  • Значение — определяет параметры свойства. Пример структуры CSS:
div {
  font-size: 14px;
  color: blue;
}

С помощью CSS можно задавать стили для различных элементов:

  • div — применяется ко всем элементам div на странице.
  • #id_name — задаёт стили для элемента с определённым идентификатором.
  • body — стилизует всю страницу.
  • img — задаёт стили для изображений.

В каждой статье, посвящённой свойствам 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 и можно приступать непосредственно к оформлению страниц. Сначала создаём div в html и присваиваем к нему id: 

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

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

Пример созданного шаблона сайта

Потестировать код на отдельной странице

Заключение

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

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

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

Ссылки

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