Основы css - руководство для самых маленьких

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

В начале 90-х годов, HTML был довольно слабым языком.

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

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

Чуть позже, файлы уже содержали не только тексты, но и рисунки.

Также появились специальные цветные фрагменты текста и изображения.

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

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

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

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

На тот момент HTML не мог такое осуществить.

После этого, в языке начали появляться элементы разметки (теги big и em).

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

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

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

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

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

Структурированная страница выглядела тогда не очень красиво.

Но авторы сайтов в дальнейшем ни за что бы не отказались от языка HTML.

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

CSS 1

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

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

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

Дополнительные элементы оформления и многие другие интересные эффекты.

CSS 2

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

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

CSS 3

В CSS 3 появилось много возможностей.

Стала упрощенная работа с фоном. К примеру, можно сразу задавать несколько фонов.

Раньше чтобы сделать два фона у блока, нужно создавать 2 блока (внешний и внутренний).

Улучшена работа с градиентами.

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

В третьей версии сделано все намного проще.

Также стало лучше работать с тенями.

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

В CSS 3 появилась анимация.

Многие скрипты для анимации теперь можно заменить на обычный CSS код.

То есть вам даже не нужно будет дополнительно подключать JQuery.

В ранних версия стилей была проблема с закругленными рамками.

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

В третьей версии все это можно реализовать одной строкой.

Еще в третьей версии появились функции трансформирования.

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

Часть 2. CSS свойства

Я думаю нет смысла перечислять все CSS свойства, так как их очень много и практичней обратиться к справочнику всех CSS свойств. Я рекомендую изучить CSS свойства в справочнике на HTMLBook.

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


color	960 раз	Цвет текста элемента:
background-color	755 раз	Цвет фона элемента:
font-size	524 раза	Размер шрифта:
opacity	435 раз	Уровень прозрачности элемента:
padding	372 раза	Размер полей внутри элемента:
width	356 раз	Ширина блочного элемента, не включая размеры границ и полей:
margin	311 раз	Внешние отступы элемента:
height	305 раз	Высота блочного элемента, не включая размеры границ и полей:
font-weight	280 раз	Насыщенность шрифта:
text-align	245 раз	Горизонтальное выравнивание текста:

Что делать дальше, освоив HTML и CSS?

Когда вы изучите язык разметки и таблицы стилей, советую учить JavaScript. Это язык программирования, который позволяет создавать различные интерактивные элементы на странице, а также использовать технологию AJAX. С ее помощью можно обновлять части страниц без перезагрузки, что значительно ускоряет взаимодействие с сайтом. Пример реализации AJAX – бесконечная загрузка новой информации в ленте новостей.

Зная разметку и JavaScript, вы сможете стать начинающим Frontend-разработчиком и получить высокооплачиваемую работу в веб-студии или выполнять заказы на фрилансе.

Как быстро освоить JavaScript, мы постараемся рассказать в следующих статьях.

Как и сколько можно заработать на верстке сайтов?
Как зарабатывают на создании сайтов в интернете?
Как стать JavaScript программистом?

Самоучители по CSS

Видеоуроки CSS от Евгения Попова (2014) — 664 MB

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

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

CSS: обучающие видео уроки. (2012) — 344 MB

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

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

CSS. Рецепты программирования, 3-е издание. (2011) — 23.3 MB

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

Книга поможет изучить основы CSS, организованна как справочник по CSS, версий 2.1 и CSS3, удобна в использовании

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

CSS: 100 и 1 совет, 3-е издание (2010) — 5.8 MB

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

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

CSS — каскадные таблицы стилей. Подробное руководство, 3-е издание (2008) — 6.8 MB

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

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

Заинтересованному кругу лиц и друзьям:

На каких сайтах можно освоить HTML и CSS?

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

Адрес сайта	Описание сайта
Курс «Старт в программировании» в Нетологии	Онлайн-курс, который позволяет попробовать себя в роли программиста и сделать первый личный проект. Здесь можно познакомиться с популярными языками: JavaScript, HTML, CSS, ECMAScript. Формат обучения: лекции в записи, а также живые вебинары по вечерам. Идет две недели.
	Позиционируется, как самый современный справочник по HTML и CSS. На сайте собрано описание всех тегов и атрибутов, свойств таблиц стилей, а также примеров кода и результатов их выполнения (что будет выводиться в браузере).
	На сайте собрана теория и практика по использованию CSS, трюки, хитрости и готовые решения. Сайт можно рекомендовать как новичкам, так и верстальщикам с опытом.
	На сайте находятся бесплатные уроки по HTML5 и CSS, а также справочник CSS. Уроки хорошо структурированы и сопровождаются множеством примеров.
	На сайте есть справочник тегов, а также бесплатные уроки по верстке страниц. Имеется демо-редактор, в котором можно добавлять различные команды и смотреть, как браузер их воспринимает и что поменяется на странице пользователя.
	Один из самых популярных справочников по HTML и CSS. На сайте есть Самоучитель, а также Практикум, которые помогают ускорить обучение и сделать его проще.
	Здесь собрана коллекция статей, уроков и примеров по верстке. Также есть уроки по Bootstrap.
	Простой и понятный самоучитель, который подойдет для самостоятельного изучения HTML 5 и CSS с нуля.
	Бесплатный онлайн-справочник. Будет полезен новичкам, которые хотят изучить основы верстки.
	Онлайн-учебник по HTML и CSS. Много примеров. Подходит новичкам.
	На курсе изучаются основные теги. Помогает получить представление о верстке и значительно упрощает обучение HTML на старте. Проходит онлайн, можно записываться из любого города.
	Помогают проверить свои знания по верстке и выявить пробелы. На сайте есть руководства и справочники по HTML и CSS для самостоятельного изучения.
	На сайте собрано множество материалов для сайтостроителей и верстальщиков. Можно найти интересные решения для создания разных эффектов, готовые скрипты и многое другое.
	Сайт консорциума W3C, на котором можно посмотреть актуальные стандарты языка разметки, а также проверить валидность своего кода в специальном Валидаторе.

Step 1: writing the HTML

For this tutorial, I suggest you use only the very simplest of
tools. E.g., Notepad (under Windows), TextEdit (on the Mac) or
KEdit (under KDE) will do fine. Once you understand the principles,
you may want to switch to more advanced tools, or even to
commercial programs, such as Style Master, Dreamweaver or GoLive.
But for your very first CSS style sheet, it is good not to be
distracted by too many advanced features.

Don’t use a wordprocessor, such as Microsoft Word or OpenOffice.
They typically make files that a Web browser cannot read. For HTML
and CSS, we want simple, plain text files.

Step 1 is to open your text editor (Notepad, TextEdit, KEdit, or
whatever is your favorite), start with an empty window and type the
following:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

In fact, you don’t have to type it: you can copy and paste it
from this Web page into the editor.

(If you are using TextEdit on the Mac, don’t forget to tell
TextEdit that the text is really plain text, by going to the Format
menu and selecting “Make plain text”.)

The
first line of the HTML file above tells the browser which type of
HTML this is (DOCTYPE means DOCument TYPE). In this case, it is
HTML version 4.01.

Words within < and > are called tags and, as
you can see, the document is contained within the <html> and
</html> tags. Between <head> and </head> there
is room for various kinds of information that is not shown on
screen. So far it contains the title of the document, but later we
will add the CSS style sheet there, too.

The <body> is where the actual text of the document goes.
In principle, everything in there will be displayed, except for
the the text inside <!— and —>, which serves as a comment
to ourselves. The browser will ignore it.

Of the tags in the example, <ul> introduces an “Unordered
List”, i.e., a list in which the items are not numbered. The
<li> is the start of a “List Item.” The <p> is a
“Paragraph.” And the <a> is an “Anchor,” which is what
creates a hyperlink.

The KEdit editor showing the HTML source.

If you
want to know what the names in <…> mean, one good place to
start is Getting started with HTML. But just a few words
about the structure of our example HTML page.

The “ul” is a list with one hyperlink per item. This will
serve as our “site navigation menu,” linking to the other pages
of our (hypothetical) Web site. Presumably, all pages on our site
have a similar menu.
The “h1” and “p” elements form the unique content of this
page, while the signature at the bottom (“address”) will again be
similar on all pages of the site.

Note that I didn’t close the “li” and “p” elements. In HTML
(but not in XHTML), it is allowed to omit the </li> and
</p> tags, which I did here, to make the text a little
easier to read. But you may add them, if you prefer.

Let’s assume that this is going to be one page of a Web site
with several similar pages. As is common for current Web pages,
this one has a menu that links to other pages on the hypothetical
site, some unique content and a signature.

Now select “Save As…” from the File menu, navigate to a
directory/folder where you want to put it (the Desktop is fine) and
save the file as “mypage.html”. Don’t close the editor yet, we will
need it again.

(If you are using TextEdit on Mac OS X before version 10.4, you
will see an option Don’t append the .txt extension in the Save as
dialog. Select that option, because the name “mypage.html” already
includes an extension. Newer versions of TextEdit will notice the
.html extension automatically.)

Next, open the file in a browser. You can do that as follows:
find the file with your file manager (Windows Explorer, Finder or
Konqueror) and click or double click the “mypage.html” file. It
should open in your default Web browser. (If it does not, open your
browser and drag the file to it.)

CSS Учебник

CSS ГлавнаяCSS ВведениеCSS СинтаксисCSS СелекторыCSS ПодключениеCSS КомментарииCSS Цвет
Цвет
RGB
HEX
HSL

CSS Фон
Фон цвет
Фон изображение
Фон повторение
Фон вложеный
Фон стенография

CSS Границы
Границы
Ширина границ
Цвет границ
Стороны границ
Границы стенография
Закругленные границы

CSS Поля
Отступ cнаружи
Разрушить поля

CSS Отступы внутриCSS Высота и ширинаCSS Бокс модельCSS Контур
Контур
Ширина контура
Цвет контура
Контур стенография
Смещение контура

CSS Текст
Форматирование текста
Выравнивание текста
Оформление текста
Преобразование текста
Интервал текста
Тень текста

CSS Шрифты
Семейство шрифтов
Безопасные шрифты
Резервные шрифты
Стиль шрифтов
Размер шрифтов
Google шрифты
Сочетание шрифтов
Стенография шрифтов

CSS ИконкиCSS СсылкиCSS СпискиCSS Таблицы
Границы таблицы
Размер таблицы
Выравнивание таблицы
Стиль таблицы
Отзывчивая таблица

CSS ДисплейCSS Макс. ширинаCSS ПозиционированиеCSS ПерекрытиеCSS ПереполнениеCSS Поплавок
Поплавок
Очистить
Примеры float

CSS Линейный блокCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS ПрозрачностьCSS Навигация сайта
Панель навигации
Вертикальная
Горизонтальная

CSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Атрибуты селекторовCSS ФормыCSS СчетчикиCSS Макет сайтаCSS Еденицы измеренийCSS ОсобенностиCSS !importantCSS Математ. функции

Как быстро выучить HTML и CSS с нуля?

Больше практики. Изучили новые теги – сразу попробуйте сверстать текст с ними. Это поможет вам освоить материал быстрее. Для верстки страниц не нужно скачивать специальные программы или редакторы. Достаточно сохранить страницу из браузера на компьютере и менять у нее код, просматривая, что вы получили после добавления новых тегов.
Быстро выучить язык HTML и CSS самостоятельно помогают бесплатные онлайн-задачники. В них собраны различные задачи по верстке разного уровня сложности. Выполняйте практику и быстрее осваивайте новые теги. Примеры задачников: Практика на WebReference (позволяет решать задачи онлайн и сразу проверять результаты), Практикум на Htmlbook.
Пройдите курсы. Под руководством опытных наставников быстрее и легче учиться. Есть, кому задать вопросы и получить помощь. Например, на курсе по веб-верстке в Skillbox вы освоите HTML, CSS, Flexbox, фреймворк Bootstrap, научитесь работать с Git и выполните дипломный проект.
Не сдавайтесь, если что-то кажется вам сложным. Ищите информацию в разных источниках. Бывает, что на одном сайте что-то написано непонятно, а на другом – все ясно и просто.
Не переживайте, если что-то не получается. Главное – не бросать начатое, тогда все обязательно получится.

Часть 3. Медиа-запросы

Медиа-запросы в CSS — это база для создания отзывчивой верстки, позволяющая стилизовать элементы в зависимости от размера экрана или устройства, на котором отображается веб-сайт. Технически Медиа-запрос — это простое логическое выражение, которое может быть или истинным или ложным. Условиями для такого выражения являются либо параметры устройства, на котором отображается веб-страница, либо размер экрана в пикселах.

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

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

Преимущества CSS

Как упоминалось ранее, CSS является одним из наиболее широко используемых языков стилей в Интернете. Я собираюсь перечислить некоторые из них здесь:

CSS экономит время. Вы можете написать CSS один раз, а затем повторно использовать один и тот же лист на нескольких HTML-страницах. Вы можете определить стиль для каждого элемента HTML и применить его к любому количеству веб-страниц.
Страницы загружаются быстрее. Если вы используете CSS, вам не нужно каждый раз прописывать атрибуты HTML-тегов. Просто напишите одно правило CSS для тега и примените его ко всем вхождениям этого тега. Таким образом, меньше кода означает более быстрое время загрузки.
Простота обслуживания. Чтобы внести глобальные изменения, просто измените стиль, и все элементы на всех веб-страницах будут обновлены автоматически.
Превосходящие стили по сравнению с HTML – CSS имеет гораздо более широкий набор атрибутов, чем HTML, поэтому вы можете придать своей HTML-странице гораздо лучший вид по сравнению с атрибутами HTML.
Совместимость с несколькими устройствами. Таблицы стилей позволяют оптимизировать содержимое для более чем одного типа устройств. Используя один и тот же HTML-документ, разные версии веб-сайта могут быть представлены для портативных устройств, таких как КПК и сотовые телефоны, или для печати.
Глобальные веб-стандарты. Теперь атрибуты HTML устарели, и рекомендуется использовать CSS. Поэтому было бы неплохо начать использовать CSS во всех HTML-страницах, чтобы сделать их совместимыми с будущими браузерами.

Как выучить CSS с нуля?

Осваивать CSS рекомендуется после того, как вы изучили основы языка HTML. Вот что нужно узнать о каскадных таблицах стилей:

Основы синтаксиса: основные селекторы, их свойства и значения. На словах кажется сложно, но на деле – просто. Например, в CSS вы можете задать оформление заголовка, указав, какой у него должен быть шрифт, размер шрифта, отступы от других элементов на странице, цвет и другие параметры. Чтобы знать CSS, вам нужно изучить, какие параметры вы можете задавать у разных элементов на страницах.
Изучить, как при помощи CSS задавать позиционирование разных элементов на странице.
Узнать, что такое псевдоклассы и комбинаторы.
Изучить адаптивную верстку, когда макет страницы подстраивается под размеры экрана пользователя.

Дополнительно рекомендуется выучить:

Препроцессоры.
Фреймворки, особенно Bootstrap. Фреймворк – это готовое решение, на базе которого можно быстро создать верстку нового сайта.
Управление преобразованием, переходами и анимацией.
Как правильно создавать структуру кода, чтобы его можно было поддерживать.

С какой книги стоит начать изучать html5 и css3?

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

1)Идешь на htmlacademy.ru и проходишь все бесплатные курсы. 2) На этом пункте,невольно задаешься вопросом,как тебе использовать эти знания. Смотришь как верстать простейший макет https://www.youtube.com/watch?v=vFjRVugE030 на float. 3)Проходишь все платные курсы. 4) Читаешь https://www.ozon.ru/context/detail/id/22435909/ эту книгу. Можешь найти на просторах в инете. 5) Берешь самостоятельно простенький макет и верстаешь его на флексах и адаптивно( на этом пункте будешь знать что это. 6) Читаешь https://www.ozon.ru/context/detail/id/137213400/ . 7) На этом этапе ты знаешь что существуют предпроцессоры,и хочешь изучить,советую https://www.youtube.com/watch?v=H4cG4tbc-xQ для знакомства. читаешь такое и присматриваешь что учить дальше: 1) glivera-team.github.io/how-to/2016/05/02/how-to-st. 2)https://coggle.it/diagram/52e97f8c5a143de239005d1b. 3)https://github.com/zualex/devmap 4)blog.flppv.me/all/frontend 5)https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%. 6)krekotun.ru/ui-developer-skills.html 7)Как быстро подтянуть свой уровень веб-разработчика, чтобы соотвествовать требованиям работодателей? 8)webmasters.teamdev.com/#html

9) Дальше думаю сам разберешься,Удачи!

если знаешь английский то начинай с этих двух:John Duckett: HTML + CSS и JavaScript + jQuery

обе можно легко найти в гугле в формате пдф: filetype:pdf john ducket (jQuery javascript OR css html)

Зачем изучать CSS?

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

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

Создание потрясающего веб-сайта – CSS обрабатывает внешний вид веб-страницы. Используя CSS, вы можете управлять цветом текста, стилем шрифтов, расстоянием между абзацами, размером и расположением столбцов, используемыми фоновыми изображениями или цветами, дизайном макета, вариантами отображения для разных устройств и размеров экрана. а также множество других эффектов.
Станьте веб-дизайнером. Если вы хотите начать карьеру профессионального веб-дизайнера, проектирование HTML и CSS является обязательным навыком.
Веб-управление – CSS прост в освоении и понимании, но он обеспечивает мощный контроль над представлением HTML-документа. Чаще всего CSS сочетается с языками разметки HTML или XHTML.
Изучайте другие языки. Как только вы поймете основы HTML и CSS, вам станет легче понять другие связанные технологии, такие как JavaScript, PHP или Angular.