Шпаргалка CSS

Шпаргалка по языку CSS (cheat sheet CSS)

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

Что такое CSS

CSS (Cascading Style Sheets) — каскадные таблицы стилей.

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

Язык CSS создан для того, чтобы вебмастера при создании сайта могли разделять его логическую структуру (HTML-теги) от внешнего вида. С помощью языка HTML создаётся структура (каркас) страницы, а с помощью языка CSS, оформляется внешний вид страницы.

Схема CSS-кода

Схема CSS-кода выглядит следующим образом:

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

Основной частью CSS-кода, являются CSS-свойства, вот некоторые из них:
color: — цвет шрифта,
background-color: — фон элемента,
font-size: — размер шрифта,
text-align: — выравниевание текста,
margin: — внешний отступ и т.д.

Внедрение CSS

Внедрить CSS-код в HTML-документ, можно тремя способами:
1. С помощью тегов <style> </style> (влияет на одну страницу),
2. C помощью атрибута style=" " (влияет на один тег),
3. C помощью тега <link> (тег link ссылается на внешний .css файл, влияет на весь сайт).

Селекторы в CSS

Селектор (селекция) — выборка HTML-тегов страницы.

В качестве селектора могут выступать:
Имя тега: p, h1, a (выборка HTML-тегов по имени),
Имя класса: .имяКласса (выборка HTML-тегов по значению атрибута class="имяКласса"),
Имя уникального идентификатора: #имяУникальногоИдентификатора (выборка HTML-тегов по значению атрибута id="имяУникальногоИдентификатора").

Одному и тому же HTML-тегу, можно назначить несколько имён классов.

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

Универсальный селектор: * (выборка всех HTML-тегов страницы),
Селектор атрибута: [атрибут] { } (выборка HTML-тегов по атрибуту),
Селектор атрибута и значения: [атрибут="значение"] { } (выборка HTML-тегов по атрибуту и значению).

Взаимоотношения селекторов:
Контекстные селекторы: селектор селектор { } (выборка HTML-тегов потомков),
Дочерние селекторы: селектор > селектор { } (выборка дочерних HTML-тегов),
Соседние селекторы: селектор + селектор { } (выборка соседних (братских, сестринских) HTML-тегов).

Напишите, чтобы вы еще хотели видеть в шпаргалке по CSS?

Читать далее: Единицы измерения в CSS

• Category: Разное