CSS

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

Бесплатные уроки css для полного изучения с нуля

Что такое CSS

CSS (Cascading Style Sheets в переводе — каскадные таблицы стилей) — это набор параметров форматирования, который применяется к элементам веб-страницы для изменения ее внешнего вида.

Что такое CSS и для чего он нужен при создании веб-страниц и сайтов
Пример CSS кода

HTML и CSS неразрывно связаны между собой. Каждый язык отвечает за свои задачи. HTML вводит на веб-страницу набор различных элементов (картинки, таблицы, абзацы или заголовки). Он создает своего рода структуру документа (скелет).

А каскадные таблицы стилей изменяют внешний вид этих элементов и их положение. То есть создают обертку страницы.

Например, задаем начертание шрифтов, размеры, рамки, цвета и так далее. Таким образом, появляется много возможностей по редактированию веб-дизайна и верстки страницы.

Основы CSS

Давайте разберем основы CSS. Здесь я объясню принцип работы такой веб-технологии. Также затронем синтаксис и правила написания кода.

Разбираем все основы CSS при создании сайтов и веб-страниц

Принцип работы

Допустим, мы создали простую HTML страницу (А) с различными тегами. Здесь конечно же не все. Но предположим, что это полная страница (А). Это наш фундамент.

Теперь задача — подключить к данной странице (А) свои стили css (Б). Делается это очень просто.

В области head (между тегом <head> и </head>) пропишем специальный тег и укажем, что хотим подключить файл style.css (строчка 1). То есть это и будет таблица стилей (Б). Такая таблица имеет расширение css. Имя у нее может быть любое.

Принцип работы технологии каскадных таблиц стилей

Так вот, мы в области head прописываем данный параметр (1). Когда браузер доходит до этой строки (1), то начинает искать файл с указанным именем (style.css). Ищет он по тому пути, который мы ему указали.

Когда он находит этот файл (Б), то подключает его к документу (А). Файл (Б) содержит определенное количество стилей (2).

Стили — это указания браузеру, как отображать тот или иной элемент в документе. Поэтому условимся на том, что данный файл содержит N-ое количество стилей.

Для браузера это означает, что когда он доходит до тега body (3), все то, что находится внутри этого элемента (строки 4, 5 и нижний текст), он будет отображать ориентируясь на стили (2).

Например, в таблицах стилей можно прописать так, чтобы все заголовки (строка 4) были красного цвета. Браузер соответственно сразу отобразит его красным цветом.

В стилях могут прописаны css команды, чтобы все картинки (строка 5) должны выравниваться по правому краю. То есть дойдя до картинки (5), браузер автоматически выровняет ее по правому краю. Это дополнительная инструкция для его — как именно нужно отображать элементы.

Если говорить простыми словами, то в документе (А) мы создаем как должно быть. Какие элементы будут выводиться. А в документе (Б), мы указываем, как именно это должно отображаться.

Еще один пример можно привести.

Представьте себя художником. К вам приходит заказчик и говорит, что он хочет, чтобы вы нарисовали для него картину.

На ней должно быть отражено следующее. Поле, посреди которого стоит дом. Рядом с домом озеро. И рядом с озером стая уток.

Это он вам сказал, что хочет видеть на этой картине.

А дальше он говорит, что дом должен быть с красной крышей и желтыми стенами. Озеро должно быть размером 50 на 20. А утки должны быть крупные. То есть, здесь он уже вам говорит, как это должно выглядеть.

Вот тоже самое и при создании сайта и веб-страницы.

HTML-страницы мы создаем как каркас (что хотим видеть). А уже в css-файле мы указываем браузеру, как должно все это выглядеть.

Наглядный пример

Сейчас я хочу предоставить вам очень интересный сайт, который покажет всю мощь CSS кода. Проект называется csszengarden.com.

В чем здесь изюминка?

Подборка вариантов веб-дизайна для одной страницы csszengarden
Примеры веб-дизайна одной и той же страницы

Автор взял каркас HTML и к нему предложил любому желающему присылать свои таблицы стилей. Что из этого вышло, можно посмотреть на страничке «View All Designs».

Тут ему прислали огромное количество каскадных стилей для его каркаса. Лучшие он начал выкладывать в данном списке.

Просмотрев примеры этих стилей, вы убедитесь, что при одном каркасе HTML можно получить совершенно разные сайты. Веб-дизайн значительно изменяется.

Синтаксис CSS

Теперь давайте разберем синтаксис CSS или правила написания каскадных таблиц стилей.

Правила синтаксиса CSS при написании кода
Правило CSS

Селекторы

Вся каскадная таблица стилей состоит из селекторов. Это своего рода система наведения. С ее помощью мы указываем браузеру, к какому элементу страницы будем применять стили.

body {
  color: #353535;
}

Из примера видно, что к тегу body (селектор) нужно задать цвет шрифта (применить свойство со значением). Селекторы бывают многих видов. Мы их потом рассмотрим в отдельном уроке, когда вплотную будем изучать css. Но сначала разбираем только синтаксис.

Как видите, сначала прописываем селектор. То есть указываем, какой элемент страницы нужно стилизовать. Далее открываем фигурную кавычку и сразу же ее закрываем.

А уже внутри фигурных кавычек пишем css правила.

Сначала указываем название свойства. Затем сразу за названием ставим двоеточие и прописываем значение свойства. Каждое свойство заканчивается точкой с запятой.

селектор {
   свойство: значение;
   свойство: значение;
   свойство: значение;
}

Свойства CSS

Свойств CSS и их значений очень много. Из примера выше видно, что к тегу body мы применяем свойство цвет и к нему задаем код вывода конкретного цвета.

body {
  color: #353535;
}

Давайте к селектору дополнительно напишем свойство шрифта.

body { 
  color: #353535; 
  font: normal 1em Arial, Tahoma, sans-serif;
}

Значения

Для каждого селектора можно создавать бесконечное количество свойств. Также для каждого свойства можно задавать несколько css значений. Их количество не ограничено.

Обратите внимание, что все значения, которые идут в одном свойстве, разделяются пробелами. Если рассматривать пример свойства font: normal 1em Arial, Tahoma, sans-serif;, то получается 3 значения:

  • 1-ое — normal (нормальный шрифт)
  • 2-ое — 1em (размер шрифта)
  • 3-е — Arial, Tahoma, sans-serif (виды подключаемых шрифтов)

[ads_custom_box title=»Обратите внимание» color_border=»#e87e04″]Третье значение имеет несколько вариантов. Оно считается полноценным потому что варианты значений разделены запятыми.[/ads_custom_box]

CSS примеры

Стоит сказать, что синтаксис CSS не чувствителен к регистру символов, пробелам и переносам строк. Вот пример 1:

body { 
  color: #353535; 
  font: normal 1em Arial, Tahoma, sans-serif; 
}

CSS пример 2:

body { color: #353535; font: normal 1em Arial, Tahoma, sans-serif; }

Для браузера это не имеет значение.

Однако нам будет намного удобнее работать с первым вариантом, где идет четкое разделение свойств. Это очень помогает при редактировании кода. Вам так проще будет найти нужное свойство и отредактировать его.

История языка CSS

В начале 90-х годов, HTML был довольно слабым языком. Он состоял из обычных элементов для описания списков, заголовков, различных абзацев или гиперссылок.

HTML изначально предназначался как обычный структурный язык разметки для описания некоторых частей документа. Он был лишь небольшой схемой разметки и не затрагивал описание внешнего вида файла.

Чуть позже, файлы уже содержали не только тексты, но и рисунки. Также появились специальные цветные фрагменты текста и изображения. С их помощью (при щелчке мыши) можно было перемещаться между самими файлами.

Это дало толчок к появлению многих сайтов.

Что такое язык html и как он появился в интернете

С появлением большого количества сайтов, возникала потребность в усовершенствовании языка. Многим авторам ресурсов нужны были средства для выделения самого текста полужирным шрифтом или курсивом.

На тот момент HTML не мог такое осуществить. После этого, в языке начали появляться элементы разметки (теги <FONT> и <BIG>).

Прошло некоторое время и начали появляться более свежие версии с новыми элементами. А сами страницы стали более структурированными. Все это значительно улучшило индексацию поисковыми системами.

Сама структурированная разметка упростила обслуживание сайта, позволила очистить код и упростить поиск. Однако, не смотря на многие плюсы такой разметки, у нее был главный недостаток.

Это внешний вид.

Структурированная страница выглядела тогда не очень красиво. Но авторы сайтов в дальнейшем ни за что бы не отказались от языка HTML. Поэтому стала потребность в методе, который смог бы позволить использовать сочетание структурированной разметки с красивым внешним видом страниц без отказа от HTML.

CSS 1

В качестве такого метода послужил стандарт CSS 1. В 1996-ом году он был введен консорциумом W3C (World Wide Web Consortium).

Язык CSS версия 1

Механизм обеспечил очень богатое представление документов.

Можно было создавать любые красивые цветовые элементы. Красивый и привлекательный текст. Дополнительные элементы оформления и многие другие интересные эффекты.

CSS 2

12 мая 1998-ого года на основе первой версии была принята CSS2. Но уже с добавленной функциональностью.

7 июня 2011 года была принята CSS2.1 со многими исправлениями. Позже вышла разрабатываемая версия CSS3.

CSS 3

В CSS 3 появилось много возможностей. Стала упрощенная работа с фоном. К примеру, можно сразу задавать несколько фонов. Раньше чтобы сделать два фона у блока, нужно создавать 2 блока (внешний и внутренний).

Некоторые возможности языка CSS3 при создании сайтов

Улучшена работа с градиентами. Раньше нужно было вырезать какой-то кусок изображения и затем через свойство background вставлять и делать repeat по x или y. В третьей версии сделано все намного проще.

Также стало лучше работать с тенями. Появилось больше возможностей по заданию цвета. Впервые появилась возможность указать прозрачность.

В CSS 3 появилась анимация. Многие скрипты для анимации теперь можно заменить на обычный CSS код. То есть вам даже не нужно будет дополнительно подключать JQuery.

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

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

Уроки CSS

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

Бесплатные и подробные уроки CSS для начинающих и не только

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

Ниже предлагаю вам подробные уроки по CSS для бесплатного изучения. В каждой статье более подробно раскрываются отдельные темы. Поэтому для «чайников» никаких проблем в освоении не будет.

Но прежде чем начать обучение, рекомендую сначала изучить язык HTML. Без него вы не сможете работать со стилями. Только после того, как выучили язык разметки, переходите к стилям из этого самоучителя.

Сказать спасибо кнопками ниже:

Синие стрелки вниз

Как привязать CSS к HTML

Как лучше всего привязать CSS стили к HTML документу

В этом уроке рассказываю, как привязать css к html странице сайта в интернете. Для этого разберем несколько способов с примерами. Также обсудим асинхронную загрузку и подключение стилей для разных браузеров.

Adblock detector