CSS 3 - основи на езика в примери

Научете за какво се използват CSS стиловете и как да ги прилагате правилно. Запознайте се със структурата им, начините за тяхното свързване с уеб страниците, задаването на приоритети, както и използването на селектори и коментари.

За да усъвършенствате работата си с езика, книгата включва подробно описание на над 180 свойства, подредени по азбучен ред. Включено е предназначението на всяко свойство, описание на стойностите, които може да приема и пример за това как се прилага.

Книгата включва и ценен справочник на свойствата по следните групи:

• преобразуване и оформление на текст, таблици и списъци;
• манипулиране на блокове, колони и Flexbox елементи;
• използване на анимация, трансформации и преходи;
• прилагане на сянка и рамки;
• управление на фона;
• видимост и обхващане на елементи;
• отрязване на съдържание.

Асеневци трейд ЕООД
София, 1618
р-н Витоша, Еровете № 13, ет. 2
store@asenevtsi.com

Въведение
Запознаване със CSS

• Въведение в CSS
• Свързване на стилове
• Формат на стила. Селектори
• Малко практика
• Неявно свързване на стил
• Явно обвързване на стил
• Комбинирани стилове
• Вградени стилове
• Приоритет и връзка между стиловете. Специфичност
• Специфичност
• Приоритет
• Наследяване
• Каскадност. Разрешаване на конфликти на стилове
• Селектори на атрибути
• Коментари в CSS
• Добри практики
• По образ и подобие
• CSS редактори
• Инструменти за програмисти

Основи на визуалното маркиране

• Блоково маркиране
• Основни елементи за маркиране
• Външно отстояване
• Вградено маркиране
• Модул за оформление на CSS Flexbox
• Какво е CSS Flexbox?
• Дефиниране на контейнер
• Промяна на посоката
• Управление на обхващането
• Свойството flex-flow
• Подравняване на съдържанието
• Вертикално подравняване
• CSS Grid мрежа от елементи
• Какво е CSS Grid?
• Редове и колони
• Грид-линии
• Свойството grid-template-columns
• Определяне на височината на реда
• Подравняване на съдържанието
• Свойството grid-column
• Свойството grid-row

Стойности в CSS таблиците

• Ключови думи
• Стойности на цветовете
• Проценти
• Стойности за дължина
• URL
• Ъгли
• Време
• Честоти
• Символни низове

Селектори

• Универсален селектор
• Селектор на елемент
• Селектор на клас
• Селектор на идентификатор
• Селектор на наследник
• Дъщерен селектор
• Селектор на наследници
• Селектор на атрибути
• Селектор на псевдоклас
• Селектор на структурен псевдоклас
• Селектор на тип структурен псевдоклас
• Селектор на псевдоелементи

Справочник на свойствата по азбучен ред

• A
• align-content
• align-items
• align-self
• all
• animation - запис на анимация
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation0iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• B
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• border
• border-bottom, border-top, border-left, border-right
• Свойството border-color
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-radius
• border-style
• border-width
• bottom
• box-shadow
• box-sizing
• C
• caption-side
• caret-color
• clear
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• columns
• column-span
• column-width
• content
• counter-increment
• counter-reset
• cursor
• D
• direction
• display
• E
• empty-cells
• F
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-feature-settings
• font-kerning
• font-size-adjust
• font-style
• font-synthesis
• font-variant
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-weight
• G
• gap
• grid
• grid-area
• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-column
• grid-column-end
• grid-column-gap
• grid-column-start
• grid-row
• grid-row-end
• grid-row-gap
• grid-row-start
• grid-template
• grid-template-areas
• grid-template-columns
• grid-template-rows
• H
• height
• hyphens
• J
• jutify-content
• L
• left
• letter-spacing
• line-break
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• M
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• max-height
• max-width
• min-height
• min-width
• O
• object-fit
• object-position
• opacity
• order
• outline
• outline-color
• outline-style
• outline-wigth
• outline-offset
• overflow
• overflow-x
• overflow-y
• overflow-wrap
• P
• padding
• padding-bottom
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-nside
• perspective
• perspective-origin
• position
• Q
• quotes
• R
• resize
• right
• T
• table-layout
• tab-size
• text-align
• text-align-all
• text-align-last
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-indent
• text-overflow
• text-shadow
• text-transform
• text-underline-position
• U
• unicode-bidi
• V
• vertical-align
• visibility
• W
• white-space
• width
• word-break
• word-spacing
• word-wrap
• writing-mode
• Z
• z-index

Справочник на свойствата по групи

• Преобразуване и подравняване на текст
• Оформление на текст
• Работа с шрифтове
• Таблици
• Списъци
• Управление на блокове
• Колони
• Flexbox елементи
• Анимация
• Трансформации
• Преходи
• Сянка
• Рамки
• Генерирано съдържание
• Управление на фона
• Видимост на елемента
• Отрязване
• Обхващане на елементи

Стандартни цветове
Кавички в HTML