Учебник CSS
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

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

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


  B
background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
-----------------
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-left
-----------------
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
---------------
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
---------------
 C
caption-side
clear
clip
color
---------------
column-count
column-gap
column-rule
column-width
---------------
columns
content
counter-increment

---------------
counter-reset
cursor

---------------
 D
direction
display
---------------
 E
empty-cells

---------------
 H
height

---------------
 Q
quotes

---------------
 F
float
font
font-family
font-size
font-stretch
font-style
font-variant
font-weight

---------------
 L
left
letter-spacing
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
opacity
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
---------------
 P
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
position

---------------
 W
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode

---------------
 T
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-overflow

---------------
text-shadow
text-transform
top
transform
transform-origin
transition
transition-delay
transition-duration
transition-property
transition-timing-function
---------------
 R
resize
right
---------------
 U
unicode-bidi

---------------
 V
vertical-align
visibility
---------------
 Z
z-index

---------------

Interner Explorer

-ms-interpolation-mode

-ms-radial-gradient
background-position-x
background-position-y

---------------
filter

hasLayout
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color

scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
zoom
---------------
Firefox

-moz-border-bottom-colors
-moz-border-left-colors
-moz-border-right-colors
-moz-border-top-colors
-moz-linear-gradient
-moz-orient
-moz-radial-gradient
-moz-user-select
:-moz-placeholder
::-moz-selection
image-rendering
---------------
Opera

-o-linear-gradient
-o-object-fit
-o-radial-gradient
---------------
Safari и Chrome

-webkit-linear-gradient
-webkit-radial-gradient
-webkit-user-select
---------------
@-правила

@charset
@font-face
@import
@media
@page
---------------
Селекторы и их комбинации

A
#id
.class
.class1.class2
*
A   B
A > B
A + B
A ~ B
[attr]
[attr='value']
[attr^='value']
[attr$='value']
[attr*='value']
[attr~='value']
[attr|='value']
---------------
Псевдоклассы

:active
:checked
:default
:disabled
:empty
:enabled
:first-child
:first-letter
:first-line
:first-of-type
:focus
:hover
:indeterminate
:invalid
:lang
:last-child
:last-of-type
:link
:not
:nth-child
:nth-last-child
:nth-last-of-type
:nth-of-type
:only-child
:only-of-type
:optional
:read-only
:read-write
:required
:root
:target
:valid
:visited
---------------
Псевдоэлементы

::after (:after)
::before (:before)
::first-letter
::first-line
::selection

---------------
Функции

attr()
calc()
---------------
Значения свойств

Строки
Числа
Проценты
Размер
Адрес

Цвет
Угол
Медиа-запросы
inherit
initial

Видео уроки
Календарь
Архив новостей
Апрель 2024 (36)
Март 2024 (41)
Февраль 2024 (34)
Январь 2024 (33)
Декабрь 2023 (30)
Ноябрь 2023 (49)
Наш опрос



Наши новости

       
24-03-2016, 17:40
Написание эффективного кода
Рейтинг:
Категория: Учебник CSS
В процессе написания CSS следует придерживаться некоторых принципов, которые позволяют сократить код CSS, сделать его более удобным, наглядным  и читабельным. Читабельность в данном случае означает, что разработчик спустя какое-то время может легко понять и модифицировать стиль или что в коде...
Просмотров: 9 165
Комментариев: 5
24-03-2016, 16:20
Базовый синтаксис CSS
Рейтинг:
Категория: Учебник CSS
Как уже было отмечено ранее, стилевые правила записываются в своём формате, отличном от HTML. Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи...
Просмотров: 13 453
Комментариев: 2
    .loading1 { width: 0; padding: 12px; background-image: radial-gradient(circle at 0% 0%, transparent 40%, rgb(0,255,0) 40%, rgb(0,255,0) 70%, transparent 70%), radial-gradient(circle at 100% 0%......
Просмотров: 2 899
Комментариев: 0
Значок в HTML: ⌂ Реализация с помощью background   .home1 { height: 3em ; width: 3em; /* подберите свой размер, например, 16px или 32px */ [/i] background: #2C2C2C; /* подберите свой цвет ...    ...
Просмотров: 3 246
Комментариев: 0
18-03-2016, 14:27
Специальные символы HTML - «Учебник CSS»
Рейтинг:
Категория: Учебник CSS
‘ ’ " ” ❝ ❞ ‹ ......
Просмотров: 1 346
Комментариев: 0
17-03-2016, 18:24
Валидация CSS - «CSS»
Рейтинг:
Валидацией называется проверка CSS-кода на соответствие спецификации CSS2.1 или CSS3. Соответственно, корректный код, не содержащий ошибок, называется валидный, а не удовлетворяющий спецификации — ......
Просмотров: 8 833
Комментариев: 1
17-03-2016, 18:24
Идентификаторы и классы - «CSS»
Рейтинг:
Периодически поднимается спор о целесообразности использования идентификаторов в вёрстке. Основной довод состоит в том, что идентификаторы предназначены для доступа и управления элементами веб-страницы с помощью скриптов, а для изменения стилей элементов должны применяться исключительно классы. В...
Просмотров: 8 537
Комментариев: 1
17-03-2016, 18:24
Каскадирование - «CSS»
Рейтинг:
Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей), где одним из ключевых слов выступает «каскад». Под каскадом в данном случае понимается одновременное применение разных стилевых правил к элементам документа — с помощью подключения нескольких стилевых...
Просмотров: 22 170
Комментариев: 3
17-03-2016, 18:23
Группирование - «CSS»
Рейтинг:
При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся стилевых правил. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода. В примере 17.1 показана обычная запись,...
Просмотров: 8 381
Комментариев: 0
17-03-2016, 18:23
Наследование - «CSS»
Рейтинг:
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются....
Просмотров: 8 967
Комментариев: 3
17-03-2016, 18:13
Псевдоэлементы - «CSS»
Рейтинг:
Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста. Синтаксис использования псевдоэлементов следующий. Селектор:Псевдоэлемент { Описание правил стиля } Вначале следует имя селектора,...
Просмотров: 8 893
Комментариев: 8
17-03-2016, 18:13
Универсальный селектор - «CSS»
Рейтинг:
Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы. Для обозначения универсального селектора применяется символ звёздочки...
Просмотров: 8 280
Комментариев: 2
17-03-2016, 18:13
Псевдоклассы - «CSS»
Рейтинг:
Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на неё курсора мыши. При использовании псевдоклассов браузер...
Просмотров: 9 039
Комментариев: 2
17-03-2016, 18:13
Селекторы атрибутов - «CSS»
Рейтинг:
Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег <input> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type. При этом добавление правил стиля к селектору INPUT...
Просмотров: 8 926
Комментариев: 4
17-03-2016, 18:05
Дочерние селекторы - «CSS»
Рейтинг:
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберём небольшой код (пример 12.1)....
Просмотров: 9 656
Комментариев: 2
17-03-2016, 18:05
Соседние селекторы - «CSS»
Рейтинг:
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов. <p>Lorem ipsum <b>dolor</b> sit amet.</p> В этом примере тег <b> является дочерним по отношению к тегу <p> , поскольку...
Просмотров: 10 933
Комментариев: 2
17-03-2016, 18:05
Контекстные селекторы - «CSS»
Рейтинг:
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определённом контексте. Например, задать стиль для тега <b> только когда он располагается внутри контейнера <p> ....
Просмотров: 9 270
Комментариев: 0
17-03-2016, 18:01
Идентификаторы - «CSS»
Рейтинг:
Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Синтаксис применения идентификатора следующий....
Просмотров: 12 539
Комментариев: 0
16-03-2016, 18:55
Классы - «CSS»
Рейтинг:
Категория: Учебник CSS
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий....
Просмотров: 10 300
Комментариев: 3
16-03-2016, 18:55
Селекторы тегов - «CSS»
Рейтинг:
Категория: Учебник CSS
В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т. д. Правила задаются в следующем виде....
Просмотров: 11 378
Комментариев: 3
16-03-2016, 18:46
Значения стилевых свойств - «CSS»
Рейтинг:
Категория: Учебник CSS
Всё многообразие значений стилевых свойств может быть сведено к определённому типу: строка, число, проценты, размер, цвет, адрес или ключевое слово....
Просмотров: 9 909
Комментариев: 4
16-03-2016, 18:43
Типы носителей - «CSS»
Рейтинг:
Широкое развитие различных платформ и устройств заставляет разработчиков делать под них специальные версии сайтов, что достаточно трудоёмко и проблематично. Вместе с тем, времена и потребности меняются, и создание сайта для различных устройств является неизбежным и необходимым звеном его развития....
Просмотров: 13 288
Комментариев: 5
«Показать больше статей»
1 2