Учебник 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 (23)
Июнь 2024 (31)
Май 2024 (30)
Апрель 2024 (44)
Март 2024 (41)
Февраль 2024 (34)
Наш опрос



Наши новости

       
24-03-2016, 17:40
Написание эффективного кода
Рейтинг:
Категория: Учебник CSS
В процессе написания CSS следует придерживаться некоторых принципов, которые позволяют сократить код CSS, сделать его более удобным, наглядным  и читабельным. Читабельность в данном случае означает, что разработчик спустя какое-то время может легко понять и модифицировать стиль или что в коде...
Просмотров: 9 412
Комментариев: 5
24-03-2016, 16:20
Базовый синтаксис CSS
Рейтинг:
Категория: Учебник CSS
Как уже было отмечено ранее, стилевые правила записываются в своём формате, отличном от HTML. Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи...
Просмотров: 13 906
Комментариев: 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 961
Комментариев: 0
Значок в HTML: ⌂ Реализация с помощью background   .home1 { height: 3em ; width: 3em; /* подберите свой размер, например, 16px или 32px */ [/i] background: #2C2C2C; /* подберите свой цвет ...    ...
Просмотров: 3 303
Комментариев: 0
18-03-2016, 14:27
Специальные символы HTML - «Учебник CSS»
Рейтинг:
Категория: Учебник CSS
‘ ’ " ” ❝ ❞ ‹ ......
Просмотров: 1 389
Комментариев: 0
17-03-2016, 18:24
Валидация CSS - «CSS»
Рейтинг:
Валидацией называется проверка CSS-кода на соответствие спецификации CSS2.1 или CSS3. Соответственно, корректный код, не содержащий ошибок, называется валидный, а не удовлетворяющий спецификации — ......
Просмотров: 9 076
Комментариев: 1
17-03-2016, 18:24
Идентификаторы и классы - «CSS»
Рейтинг:
Периодически поднимается спор о целесообразности использования идентификаторов в вёрстке. Основной довод состоит в том, что идентификаторы предназначены для доступа и управления элементами веб-страницы с помощью скриптов, а для изменения стилей элементов должны применяться исключительно классы. В...
Просмотров: 8 802
Комментариев: 1
17-03-2016, 18:24
Каскадирование - «CSS»
Рейтинг:
Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей), где одним из ключевых слов выступает «каскад». Под каскадом в данном случае понимается одновременное применение разных стилевых правил к элементам документа — с помощью подключения нескольких стилевых...
Просмотров: 26 578
Комментариев: 3
17-03-2016, 18:23
Группирование - «CSS»
Рейтинг:
При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся стилевых правил. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода. В примере 17.1 показана обычная запись,...
Просмотров: 8 616
Комментариев: 0
17-03-2016, 18:23
Наследование - «CSS»
Рейтинг:
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются....
Просмотров: 9 152
Комментариев: 3
17-03-2016, 18:13
Псевдоэлементы - «CSS»
Рейтинг:
Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста. Синтаксис использования псевдоэлементов следующий. Селектор:Псевдоэлемент { Описание правил стиля } Вначале следует имя селектора,...
Просмотров: 9 155
Комментариев: 8
17-03-2016, 18:13
Универсальный селектор - «CSS»
Рейтинг:
Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы. Для обозначения универсального селектора применяется символ звёздочки...
Просмотров: 8 494
Комментариев: 2
17-03-2016, 18:13
Псевдоклассы - «CSS»
Рейтинг:
Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на неё курсора мыши. При использовании псевдоклассов браузер...
Просмотров: 9 227
Комментариев: 2
17-03-2016, 18:13
Селекторы атрибутов - «CSS»
Рейтинг:
Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег <input> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type. При этом добавление правил стиля к селектору INPUT...
Просмотров: 9 135
Комментариев: 4
17-03-2016, 18:05
Дочерние селекторы - «CSS»
Рейтинг:
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберём небольшой код (пример 12.1)....
Просмотров: 9 897
Комментариев: 2
17-03-2016, 18:05
Соседние селекторы - «CSS»
Рейтинг:
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов. <p>Lorem ipsum <b>dolor</b> sit amet.</p> В этом примере тег <b> является дочерним по отношению к тегу <p> , поскольку...
Просмотров: 11 159
Комментариев: 2
17-03-2016, 18:05
Контекстные селекторы - «CSS»
Рейтинг:
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определённом контексте. Например, задать стиль для тега <b> только когда он располагается внутри контейнера <p> ....
Просмотров: 9 487
Комментариев: 0
17-03-2016, 18:01
Идентификаторы - «CSS»
Рейтинг:
Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Синтаксис применения идентификатора следующий....
Просмотров: 12 759
Комментариев: 0
16-03-2016, 18:55
Классы - «CSS»
Рейтинг:
Категория: Учебник CSS
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий....
Просмотров: 10 478
Комментариев: 3
16-03-2016, 18:55
Селекторы тегов - «CSS»
Рейтинг:
Категория: Учебник CSS
В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т. д. Правила задаются в следующем виде....
Просмотров: 11 567
Комментариев: 3
16-03-2016, 18:46
Значения стилевых свойств - «CSS»
Рейтинг:
Категория: Учебник CSS
Всё многообразие значений стилевых свойств может быть сведено к определённому типу: строка, число, проценты, размер, цвет, адрес или ключевое слово....
Просмотров: 10 120
Комментариев: 4
16-03-2016, 18:43
Типы носителей - «CSS»
Рейтинг:
Широкое развитие различных платформ и устройств заставляет разработчиков делать под них специальные версии сайтов, что достаточно трудоёмко и проблематично. Вместе с тем, времена и потребности меняются, и создание сайта для различных устройств является неизбежным и необходимым звеном его развития....
Просмотров: 13 510
Комментариев: 5
«Показать больше статей»
1 2