Css для чайников: Учебник CSS для начинающих

Содержание

CSS селекторы, свойства, значения

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

У каждого селектора есть «свойства«, определяемые внутри фигурных скобок. Свойства – это ключевые слова, такие как color, font-weight или background-color, которым присвоены определенные значения. Значения свойств присваиваются при помощи двоеточия и разделяются точкой с запятой:


body {
   font-size: 0.8em;
   color: navy;
}

В данном примере создается css селектор body, в котором определяется два свойства – font-size и color, которым присваиваются соответствующие значения. Таким образом, если этот стиль подключить к HTML документу, то текст внутри элемента <body> (что на самом деле весь контент в основном окне браузера) будет отображаться шрифтом размером 0.8em и темно-синим цветом.

Единицы измерения

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

em (например, font-size: 2em) используется для определения размера шрифта. Так «2em» означает, что заданный шрифт будет в два раза больше шрифта по умолчанию.
px (например, font-size: 12px) единица измерения — пиксели.
pt (например, font-size: 12pt) единица измерения – пункты.
% (например, font-size: 80%) единица измерения – проценты.

Другие единицы измерения – pc (пики), cm (сантиметры), mm (миллиметры) и in (дюймы).

Если значение равно нулю, то нет необходимости указывать единицы измерения. Например, если вы хотите полностью убрать рамку вкруг элемента, то можно задать «border: 0«.

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

В связи с этим считается, что гораздо более правильно использовать «em» или «%» в качестве единиц измерения размеров шрифтов (и может быть даже высоты и ширины, о которых вы узнаете в следующих разделах этого учебника), чем «px«, которые означают неизменяемый размер текста в большинстве браузеров и должны использоваться достаточно редко (например, для определения размера рамок элементов).

Кроме HTML селекторов в CSS также можно определять селекторы классов и идентификаторов, о которых вы узнаете несколько позже.

Как использовать цвета Вверх Подключение CSS

Валидация CSS | htmlbook.ru

Валидацией называется проверка CSS-кода на соответствие спецификации CSS2.1 или CSS3. Соответственно, корректный код, не содержащий ошибок, называется валидный, а не удовлетворяющий спецификации — невалидный. Наиболее удобно делать проверку кода через сайт http://jigsaw.w3.org/css-validator/, с помощью этого сервиса можно указать адрес документа, загрузить файл или проверить набранный текст. Большим плюсом сервиса является поддержка русского и украинского языка.

Проверить URI

Эта вкладка позволяет указывать адрес страницы размещенной в Интернете. Протокол http:// можно не писать, он будет добавлен автоматически (рис. 20.1).

Рис. 20.1. Проверка документа по адресу

После ввода адреса нажмите на кнопку «Проверить» и появится одна из двух надписей: «Поздравляем! Ошибок не обнаружено» в случае успеха или «К сожалению, мы обнаружили следующие ошибки» при невалидном коде. Сообщения об ошибках или предупреждениях содержат номер строки, селектор и описание ошибки.

Проверить загруженный файл

Эта вкладка позволяет загрузить HTML или CSS-файл и проверить его на наличие ошибок (рис. 20.2).

Рис. 20.2. Проверка файла при его загрузке

Сервис автоматически распознает тип файла и если указан HTML-документ, вычленяет из него стиль для валидации.

Проверить набранный текст

Последняя вкладка предназначена для непосредственного ввода HTML или CSS-кода, при этом проверке будет подвергнут только стиль (рис. 20.3).

Рис. 20.3. Проверка введённого кода

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

Выбор версии CSS

В CSS3 добавлено много новых стилевых свойств по сравнению с предыдущей версией, поэтому проводить проверку кода следует с учётом версии. По умолчанию в сервисе указан CSS3, так что если вы хотите проверить код на соответствие CSS2.1, это следует указать явно. Для этого щелкните по тексту «Дополнительные возможности» и в открывшемся блоке из списка «Профиль» выберите CSS2.1 (рис. 20.4).

Рис. 20.4. Указание версии CSS для проверки

Базовый синтаксис CSS | htmlbook.ru

Как уже было отмечено ранее, стилевые правила записываются в своём формате, отличном от HTML. Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид.

Вначале пишется имя селектора, например, TABLE, это означает, что все стилевые параметры будут применяться к тегу <table>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить.

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

Пример 5.1. Использование стилей

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Заголовки</title>
  <style> 
   h2 { color: #a6780a; font-weight: normal; } 
   h3 { 
    color: olive; 
    border-bottom: 2px solid black; 
   }
  </style>
 </head>
 <body>
  
  <h2>Заголовок 1</h2>
  <h3>Заголовок 2</h3>
  
 </body>
</html>

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

Правила применения стилей

Далее приведены некоторые правила, которые необходимо знать при описании стиля.

Форма записи

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

Пример 5.2. Расширенная форма записи

td { background: olive; }
td { color: white; }
td { border: 1px solid black; }

Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому пишите все свойства для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид (пример 5.3).

Пример 5.3. Компактная форма записи

td {
  background: olive;
  color: white;
  border: 1px solid black;
}

Эта форма записи более наглядная и удобная в использовании.

Имеет приоритет значение, указанное в коде ниже

Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже (пример 5.4).

Пример 5.4. Разные значения у одного свойства

p { color: green; }
p { color: red; }

В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту.

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

Значения

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

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

Чтобы пометить, что текст является комментарием, применяют следующую конструкцию (пример 5.5).

Пример 5.5. Комментарии в CSS-файле

/* 
  Стиль для сайта htmlbook.ru
  Сделан для ознакомительных целей
*/
  
div {
  width: 200px; /* Ширина блока */
  margin: 10px; /* Поля  вокруг элемента */
  float: left; /* Обтекание по правому краю */
}

Как следует из данного примера, комментарии можно добавлять в любое место CSS-документа, а также писать текст комментария в несколько строк. Вложенные комментарии недопустимы.

Вопросы для проверки

1. Люба подключила к HTML-документу одновременно два стилевых файла — style1.css и style2.css. Причём в файле style2.css первой строкой импортируется еще один файл с именем style3.css. В файле style1.css цвет текста задается красным, в style2.css — синим, а в style3.css — зелёным. Какой цвет текста будет на странице?

красный.
синий.
зелёный.
чёрный.
установленный в браузере по умолчанию.

2. В какой строке кода содержится ошибка?

p { text-align: center; color: #000000 }
div { color: red; font-size: 11pt; }
title { color: #fc0; margin: 10px; }
p { color: green; color; }
html {
float: left; }

3. Какая ошибка содержится в следующем коде?

/* ———————————
div {
color: #fc0; /* Цвет теска */
margin: 10px; /* Поля вокруг элемента */
float: left /* Обтекание по правому краю */
}
——————————— */

Опечатка в тексте комментария.
Вложенные комментарии.
Нет точки с запятой.
Недопустимые значения у стилевых свойств.
Лишние переносы в коде.

4. В какой строке содержится корректный синтаксис?

body:color=black
body{color:black}
{body;color:black}
{body:color=black}
body{color=black}

5. Как правильно вставить комментарий в CSS-файл?

‘ комментарий
// комментарий
// комментарий //
/* комментарий */
<!— комментарий —>

Ответы

1. синий.

2. p { color: green; color; }

3. Вложенные комментарии.

4. body{color:black}

5. /* комментарий */

Селекторы тегов | htmlbook.ru

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

Тег { свойство1: значение; свойство2:
значение; … }

Вначале указывается имя тега, оформление которого будет переопределено, заглавными
или строчными символами не имеет значения. Внутри фигурных скобок пишется стилевое свойство, а после двоеточия — его значение. Набор свойств разделяется
между собой точкой с запятой и может располагаться как в одну строку, так и
в несколько (пример 7.1).

Пример 7.1. Изменение стиля тега абзаца

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы тегов</title>
  <style>
   P { 
    text-align: justify; /* Выравнивание по ширине */
    color: green; /* Зеленый цвет текста */
   }
  </style>
 </head> 
 <body>

  <p>Более эффективным способом ловли льва в пустыне
  является метод золотого сечения. При его использовании пустыня делится
  на две неравные части, размер которых подчиняется правилу золотого
  сечения.</p>

 </body>
</html>

В данном примере изменяется цвет и выравнивание текста
абзаца. Стиль будет применяться только к тексту, который
располагается внутри контейнера <p>.

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

Вопросы для проверки

1. В какой строке содержится ошибка?

h2 { margin-left: 20px; }
p { margin-left: 20px; padding-left: 20px; }
h3 { margin-right: 20px; }
head { color: #rob; }
body { font-size: 11pt; color: #aaa; }

2. Таня для фона веб-страницы и цвета текста выбрала цвета #ffe9f2 и #6e143b и в стилях использовала следующий код, однако нужные цвета не проявились. В чем причина?

body {
background-color: #ffe9f2
color: #6e143b
}

body написан строчными буквами.
Свойство background-color неверное, следует писать background.
Значения цветов указаны неправильно.
В качестве селектора применять body некорректно.
Не хватает точки с запятой.

3. Какая строка написана правильно?

<P> { color: #333; }
P { color: #333; }
P: { color: #333;}
P { color: 333; }
P { color: #3333; }

4. К какому селектору следует применить свойство margin, чтобы изменить отступы на веб-странице?

!DOCTYPE
A
HEAD
TITLE
BODY

5. Как добавить фоновый цвет ко всем элементам <h2>?

h2 { background-color: white }
h2.all { background-color: white }
h2:all { background-color: white }
h2[all] { background-color: white }
h2#all { background-color: white }

Ответы

1. head { color: #rob; }

2. Не хватает точки с запятой.

3. P { color: #333; }

4. BODY

5. h2 { background-color: white }

Современный учебник CSS: ваш онлайн-самоучитель

Учимся создавать веб-страницы, отвечающие современным требованиям.

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

Немного о таблицах стилей

Веб-страница создается и структурируется с помощью стандартного языка разметки — HTML. Раньше, в середине 90-х годов, этот язык использовался и для стилевого оформления документа, но сейчас всё, что касается дизайна страниц, решается с помощью каскадных таблиц стилей (Cascading Style Sheets — англ.). У CSS есть множество достоинств и возможностей, о которых вы узнаете по ходу чтения книги.

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

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

Для кого эта книга

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

Желаем вам успехов в обучении!

СОДЕРЖАНИЕ

Часть I. Азы CSS

Подготовка почвы: поговорим об HTML
Синтаксис CSS. Подключение внешних таблиц. Создаем первый стиль
Изучение селекторов:
1. Селекторы CSS. Теги, классы, ID, группы
2. Селекторы потомков. Псевдоклассы и псевдоэлементы CSS
3. Дочерние селекторы CSS. Дополнительные псевдоклассы
4. Соседние и родственные селекторы
5. Селекторы атрибутов
6. Урок: тренируемся применять селекторы
Наследование в CSS: что это и как работает
Каскадность CSS. Приоритеты стилей

Часть II. Использование CSS

Работа с текстом:
1. Подключение шрифтов CSS. Работа с веб-шрифтами. Google Fonts
2. Установка цвета для текста в CSS. Способы представления цветов
3. Размер шрифта в CSS. Единицы измерения px, %, em
4. Жирный шрифт и курсив CSS
5. Прописные и строчные буквы в CSS: свойство text-transform
6. Подчеркивание, зачеркивание текста в CSS: свойство text-decoration
7. Тень для текста: свойство CSS text-shadow
8. Межсимвольный, межстрочный интервал CSS. Расстояние между словами
9. Выравнивание текста в CSS: свойство text-align
10. CSS для списков: свойство list-style и его производные
Работа с блоками:
1. Вступление. Блоки
2. Поля и отступы CSS: отличия свойств margin и padding
3. Блочные и строчные элементы
4. Свойство border: границы для блоков
5. Border-radius: закругленные углы в CSS
6. Box-shadow: тень для элемента
7. Width и height: определяем размеры элемента
8. Box-sizing: управляем вычислением ширины и высоты
9. Overflow: управление переполненными элементами
10. Max-width, max-height, min-width, min-height: максимальные и минимальные размеры элемента
11. Поток документа. Свойства float и clear
12. Практика: делаем адаптивную посадочную страницу
Работа с графикой:
1. CSS для тега img
2. Background-image: установка фонового изображения
3. Относительный и абсолютный путь к файлу
4. Background-repeat: повторение фоновой картинки
5. Background-position: позиционирование фона
6. Background-attachment: фиксация фона
7. Свойства CSS3 background-origin и background-clip
8. Background-size: масштабирование фонового рисунка
9. Свойство background: все настройки фона в одном месте
10. Несколько фоновых рисунков для одного элемента
11. Linear-gradient(): линейный градиент в фоне
12. Repeating-linear-gradient(): градиент с повторением
13. Radial-gradient(): радиальный градиент
14. Repeating-radial-gradient(): повторяющийся радиальный градиент
15. Практика: создаем фотогалерею на CSS
16. Практика: работаем с фоновыми рисунками
Ссылки и навигация:
1. Состояния ссылок в CSS. Псевдоклассы
2. Варианты стилизации ссылок в CSS
3. Навигационные панели с помощью CSS
4. Стили для особых ссылок
5. CSS-спрайты
Трансформирование и анимация:
1. Свойство transform: трансформация элементов
  1. Функция rotate()
  2. Функция scale()
  3. Функция skew()
  4. Функция translate()
  5. Несколько значений свойства transform
  6. 3D-трансформации в CSS
2. CSS3 transition: плавные переходы
  1. Свойство transition-property
  2. Свойство transition-duration
  3. Свойство transition-timing-function
  4. Свойство transition-delay
  5. Сокращенная запись transition
3. CSS3-анимация
  1. Правило @keyframes
  2. Запуск анимации: аnimation-name и animation-duration
  3. Свойства animation-timing-function и animation-delay
  4. Свойство animation-iteration-count
  5. Свойство animation-direction
  6. Свойство animation-fill-mode
  7. Свойство animation-play-state
  8. Сокращенная запись animation
4. Практика: создание CSS-анимации
Таблицы и формы:
1. Стилизация таблиц с помощью CSS
2. CSS-стили для форм

Часть III. Разметка CSS

Ширина веб-страницы
Блочная верстка
Создание разметки: основные правила
Разметка с помощью float
1. Проблемы float и их решения
Верстка адаптивных веб-страниц
1. Медиа-запросы CSS
2. Гибкие сетки в CSS
3. Адаптивные изображения и видео
Знакомство с Flexbox
1. CSS-свойства для flex-контейнера
2. CSS-свойства для flex-элементов
Позиционирование CSS. Свойство position
1. Свойства top, left, bottom, right
2. Z-index: наслаивание элементов
3. Скрытие элементов средствами CSS
Кратко о CSS Grid Layout
1. CSS-свойства для grid-контейнера
2. CSS-свойства для grid-элементов

Заключение. Рекомендации по CSS

история, преимущества и недостатки в 2021 году

Что такое CSS?

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

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

Типичный код СSS может выглядеть так:

#columns-3 {

text-align: justify;

-moz-column-count: 3;

-moz-column-gap: 12px;

-moz-column-rule: 1px solid #c4c8cc;

-webkit-column-count: 3;

-webkit-column-gap: 12px;

-webkit-column-rule: 1px solid #c4c8cc;}

История создания и развития CSS

В 1990-х возникла необходимость стандартизировать web-инструменты, создать общие правила, с помощью которых программисты и web-дизайнеры могли бы создавать сайты. Как результат этой необходимости, появились языки HTML 4.01 и XHTML, а также стандарт CSS.

Первое упоминание о CSS было в 1994 году, когда Хоком Виум Ли предложил использовать CSS (Каскадные таблицы стилей) для стилистического оформления web-страниц. У него не сразу получилось продвинуть свою технологию, — только через пару лет ему удалось привлечь внимание к CSS. Итак, 17 декабря 1996 года опубликована первая спецификация (CSS1) и она была рекомендована к использованию Консорциумом Всемирной паутины (W3C).

После небольшого успеха положение дел у технологии CSS пошли куда лучше и 12 мая 1998 года (через 2 года) была принята рекомендация W3C для CSS2. Следующим этапом была CSS 2.1 — версия W3C от 8 сентября 2009 года, она была построена на базе CSS2, и была работой над исправлением существующих ошибок.

Сегодня актуальна версия CSS3, которая максимально расширена по сравнению с предыдущими версиями. CSS3 включают эффекты теней, а также скругленные углы у блоков. В CSS3 появилась возможность устанавливать изображения в качестве фона и использовать их как границы. Намного проще и удобнее стала работа с анимацией – теперь для ее создания достаточно возможностей самой CSS3, стало не нужно работать с языком Java Script.

Плюсы и минусы использования CSS

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

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

Простота самого языка CSS вместе с принципом отделения оформления от содержания дает возможность сократить время на разработку и поддержку сайта.
Имеется несколько вариантов дизайнов страницы для просмотра на разных устройствах. Например, дизайн на экране компьютера рассчитан на одну ширину, и будет полностью выводиться на экран, а на мобильных устройствах он будет подстраиваться к размерам экрана и некоторые элементы будут исключены от показа, также и при печати, будет печататься нужный текст, без лишнего (например, без шапки меню).
Уменьшается время загрузки страниц web-сайта за счет переноса правил представления данных в отдельный CSS-файл. Благодаря этому браузер загружает только структуру документа, а также данные, хранимые на странице, а представление этих данных загружается браузером только один раз и может бать закеширован, — благодаря этому уменьшается трафик, время загрузки, а также нагрузка на сервер.
Простота изменения дизайна. Один CSS управляет отображением множества HTML-страниц. Когда возникает необходимость изменить дизайн сайта, то незачем править каждую страницу. Для последующего изменения дизайна всего лишь нужно изменить CSS-файл, и как результат, изменение дизайна делается быстрее.
CSS предоставляет дополнительные возможности форматирования, о которых при использовании только самих атрибутов даже и не приходилось мечтать.
Повышение совместимости с разными платформами за счет использования web-стандартов.

Недостатки CSS:

Различное отображение вёрстки в разных браузерах. Если браузеры устаревшие, то возможно, что одни и те же данные CSS по-разному ими интерпретируются.
Необходимость исправлять не только один CSS-файл, но и теги HTML. Часто встречается на практике необходимость исправлять не только один CSS-файл, но и теги HTML, которые связаны с селекторами CSS. Иногда это значительно увеличивает время редактирования, а также и тестирования.

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

Учебник по основам CSS, для начинающих

Видеокурс по CSS для начинающих верстальщиков от компании WebForMySelf.

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

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

СSS свойств достаточно много и еще больше у них значений. Но особенностью данного курса является то, что мы не будем в нем рассматривать детально все css свойства. Поверьте, мне за почти 10-летний опыт разработки некоторые из них приходилось использовать всего несколько раз, а некоторые в реальных проектах вообще ни разу. Поэтому я не вижу смысла подробно рассматривать все свойства со всеми значениями, некоторые из которых вы, возможно, никогда не примените.

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

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

Все уроки курса:

Количество уроков: 10

Продолжительность курса: 01:31:17

Автор: Андрей Бернацкий

Один из создателей проекта «Основы Самостоятельного Сайтостроения». Адрес в сети — www.WebForMyself.com. Свободно владеет такими техниками как: HTML, CSS, JavaScript, jQuery, AJAX, PHP&MySQL.

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

Категории премиум

Изучите CSS за 5 минут

Краткое руководство по языку веб-дизайна.

Хотите пройти наш бесплатный курс CSS? Кликните сюда!

CSS (каскадные таблицы стилей) — это то, что делает веб-страницы красивыми и презентабельными. Это неотъемлемая часть современной веб-разработки и обязательный навык для любого веб-дизайнера и разработчика.

В этой статье я дам вам краткое введение, которое поможет вам начать работу с CSS.

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

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

Начало работы

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

1. Встроенный CSS

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

   Привет, мир!

Здесь мы даем ему свойство color и устанавливаем значение blue , что приводит к следующему:

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

Вот почему был представлен второй метод включения CSS.

`2. Внутренний CSS`

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

  <заголовок>
    <стиль>
        h2 {
            цвет синий;
        }

В элементе стиля мы можем придать стиль нашим элементам HTML, выбрав элемент (ы) и предоставив атрибуты стиля. Точно так же, как мы применили свойство color к элементу h2 выше.

3. Внешний CSS

Третий и наиболее рекомендуемый способ включения CSS — использование внешней таблицы стилей. Мы создаем таблицу стилей с расширением .css и включаем ее ссылку в HTML-документ, например:

В приведенный выше код мы включили ссылку на файл style.css , используя элемент link . Затем мы пишем весь наш CSS в отдельной таблице стилей под названием style.css , так что им легко управлять.

  h2 {
   цвет синий;
}

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

Селекторы CSS

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

1. Элемент

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

  h2 {
    размер шрифта: 20 пикселей;
}
п {
    цвет: зеленый;
}
div {
    маржа: 10 пикселей;
}

Пример выше не требует пояснений. Мы выбираем разные элементы, такие как h2 , p , div , и присваиваем им разные атрибуты стиля. font-size контролирует размер текста, color устанавливает цвет текста, а margin добавляет интервал вокруг элемента.

2. Класс

Другой способ выбора элементов HTML — использование атрибута class. В HTML мы можем назначать нашим элементам разные классы. Каждый элемент может иметь несколько классов, и каждый класс также может применяться к нескольким элементам.

Давайте посмотрим на это в действии:

  
     Это заголовок

 
.container {
    маржа: 10 пикселей;
}

В приведенном выше коде мы присвоили класс контейнера элементу div.В таблице стилей мы выбираем наш класс, используя формат .className и задавая ему поле 10px .

3. ID

Подобно классам, мы также можем использовать идентификаторы для выбора элементов HTML и применения к ним стиля. Единственное различие между классом и идентификатором заключается в том, что один идентификатор может быть назначен только одному элементу HTML.

  
     Это абзац

 
# para1 {
    цвет: зеленый;
    размер шрифта: 16 пикселей;
}

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

Шрифты и цвета

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

1. Общее семейство: группа семейств шрифтов с похожим внешним видом (например, «Засечки» или «Моноширинный»)

2. Семейство шрифтов: конкретное семейство шрифтов (например, Times New Roman или Arial)

Для цветов мы можем использовать предопределенные названия цветов или значения RGB, HEX, HSL, RGBA, HSLA.

  
    
        CSS - это Coooooool !!!!

  .container {
    ширина: 500 пикселей;
    высота: 100 пикселей;
    цвет фона: светло-голубой;
    выравнивание текста: центр;
}

.heading1 {
    семейство шрифтов: 'Courier New';
    цвет: помидор;
}

Как вы можете видеть в приведенном выше примере, у нас есть элемент div с классом , контейнер . Внутри этого div есть тег h2 с некоторым текстом внутри него.

В таблице стилей мы выбираем класс контейнера и устанавливаем его ширину , высоту , цвет фона и выравнивание текста .

Наконец, мы выбираем класс .heading1 , который применяется к тегу h2 , и присваиваем ему атрибуты семейства шрифтов и цвет .

`Заключение`

Вы можете быть немного ошеломлены всей этой информацией, но не волнуйтесь.

Просто ознакомьтесь с нашим бесплатным вводным курсом по CSS на Scrimba, и вы станете ниндзя веб-дизайна менее чем за час.

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba - самого простого способа научиться программировать. Вам следует посетить наш учебный курс по адаптивному веб-дизайну, если вы хотите научиться создавать современный веб-сайт на профессиональном уровне.

Щелкните здесь, чтобы перейти на курс для повышения квалификации.

`index-of.es/`

 Название Размер
 Android / -
 Галерея искусств/                  -
 Атаки / -
 Переполнение буфера / -
 C ++ / -
 CSS / -
 Компьютер / -
 Конференции / -
 Растрескивание / -
 Криптография / -
 Базы данных / -
 Глубокая сеть / -
 Отказ в обслуживании/            -
 Электронные книги / -
 Перечисление / -
 Эксплойт / -
 Техники неудачной атаки / -
 Судебная экспертиза / -
 Галерея / -
 HTML / -
 Взломать / -
 Взлом-веб-сервер / -
 Взлом беспроводных сетей / -
 Взлом / -
 Генератор хешей / -
 JS / -
 Ява/                         -
 Linux / -
 Отмыкание/                  -
 Журналы / -
 Вредоносное ПО / -
 Метасплоит / -
 Разное / -
 Разное / -
 Протоколы сетевой безопасности / -
 Сеть / -
 ОПЕРАЦИОННЫЕ СИСТЕМЫ/                           -
 Другое / -
 PHP / -
 Perl / -
 Программирование / -
 Python / -
 RSS / -
 Rdbms / -
 Разобрать механизм с целью понять, как это работает/          -
 Рубин/                         -
 Сканирование сетей / -
 Безопасность/                     -
 Захват сеанса / -
 Снифферы / -
 Социальная инженерия/           -
 Поддерживает / -
 Системный взлом / -
 Инструменты/                        -
 Учебники / -
 UTF8 / -
 Unix / -
 Вариос-2 / -
 Варианты / -
 Видео/                       -
 Вирусы / -
 Окна / -
 Беспроводная связь / -
 Xml / -
 z0ro-Репозиторий-2 / -
 z0ro-Репозиторий-3 / -

Индекс

`оф.es /`

 Название Размер
 Android / -
 Галерея искусств/                  -
 Атаки / -
 Переполнение буфера / -
 C ++ / -
 CSS / -
 Компьютер / -
 Конференции / -
 Растрескивание / -
 Криптография / -
 Базы данных / -
 Глубокая сеть / -
 Отказ в обслуживании/            -
 Электронные книги / -
 Перечисление / -
 Эксплойт / -
 Техники неудачной атаки / -
 Судебная экспертиза / -
 Галерея / -
 HTML / -
 Взломать / -
 Взлом-веб-сервер / -
 Взлом беспроводных сетей / -
 Взлом / -
 Генератор хешей / -
 JS / -
 Ява/                         -
 Linux / -
 Отмыкание/                  -
 Журналы / -
 Вредоносное ПО / -
 Метасплоит / -
 Разное / -
 Разное / -
 Протоколы сетевой безопасности / -
 Сеть / -
 ОПЕРАЦИОННЫЕ СИСТЕМЫ/                           -
 Другое / -
 PHP / -
 Perl / -
 Программирование / -
 Python / -
 RSS / -
 Rdbms / -
 Разобрать механизм с целью понять, как это работает/          -
 Рубин/                         -
 Сканирование сетей / -
 Безопасность/                     -
 Захват сеанса / -
 Снифферы / -
 Социальная инженерия/           -
 Поддерживает / -
 Системный взлом / -
 Инструменты/                        -
 Учебники / -
 UTF8 / -
 Unix / -
 Вариос-2 / -
 Варианты / -
 Видео/                       -
 Вирусы / -
 Окна / -
 Беспроводная связь / -
 Xml / -
 z0ro-Репозиторий-2 / -
 z0ro-Репозиторий-3 / -

`CSS Для чайников`

`Основы`

CSS родился по необходимости.Необходимость отделить контент от презентации . Идея заключалась в том, чтобы оставить за собой такие вещи, как , и работать над более многоуровневым подходом. Элементы DOM получат классы CSS (подробнее об этом позже), а в нашем CSS мы определим правила стиля, такие как background-color или font-size .

Предыдущий пример будет переопределен как:

  
    <стиль>
    тело {
      цвет фона: черный;
    }

CSS содержится в блоке