background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
-----------------
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-left
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-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
caption-side
clear
clip
color
column-gap
column-rule
column-width
content
counter-increment
cursor
direction
display
empty-cells
height
quotes
float
font
font-family
font-size
font-stretch
font-style
font-variant
font-weight
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
position
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
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-transform
top
transform
transform-origin
transition
transition-delay
transition-duration
transition-property
transition-timing-function
resize
right
unicode-bidi
vertical-align
visibility
z-index
Interner Explorer
-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-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
Помогли мы вам |
Валидацией называется проверка 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 для проверки
- © Британцы дали имя каждой точке Земли: можно проверить свой дом - «Интернет и связь»
- © Спецификации w3.org - «Интернет»
- © Новая уязвимость в PHP раскрывает двери спамерам. - «Интернет»
- © Яндекс.Вебмастер запустил валидатор XML-фидов - «Интернет»
- © Ошибки в Google Sitemap теперь можно будет проверить заранее - «Интернет»
- © Новый инструмент проверки доступности страниц для робота РСЯ - «Интернет»
- © Новая версия Яндекс.Вебмастера стала доступна для всех - «Интернет»
- © Валидность документа не влияет на результаты ранжирования в Google - «Интернет»
- © Универсальный селектор - «CSS»
|
|
- Новости мира Интернет
- Афоризмы
- Видео уроки
- Справочник CSS
Смартфоны Samsung Galaxy A6 и A6+ предстали на рендерах - «Новости сети»
Volvo S90 Ambience Concept: атмосфера роскоши нового уровня в автомобиле - «Новости сети»
LG готовит к анонсу бюджетный смартфон Stylo 4 - «Новости сети»
Кронштейны Arctic для монитора позволят значительно повысить эффективность работы пользователя - «Новости сети»
Philips Momentum 436M6VBPAB: огромный монитор формата 4K - «Новости сети»
Ноутбук Primebook использует процессор Rockchip и ОС на базе Android - «Новости сети»
Антропоморфный робот Фёдор осваивает трюки в виртуальной реальности - «Новости сети»
De8auer «снял скальп» с нового CPU Ryzen 5 2600 - «Новости сети»
Эван Бласс опубликовал рендер LG G7 ThinQ во всех ракурсах - «Новости сети»
Неанонсированный смартфон Xiaomi Redmi S2 прошёл сертификацию в Китае - «Новости сети»
Дата выхода, характеристики и другие подробности о OnePlus 6 - «Новости сети»
Секретный проект Amazon: домашние роботы - «Новости сети»

Что такое Custom Template и как создать свой персональный шаблон для страницы? - «Видео уроки - CSS»

Как создать свой Widget для WordPress? - «Видео уроки - CSS»

Новый Директ. Обзор новинок Яндекса на апрель 2018 г. - «Видео уроки - CSS»

Верстка в прямом эфире # 2 | Интернет магазин Aware #6 | 2018 - «Видео уроки - CSS»

ИНДИЯ #4 Гоа/Анджуна/Бунгало/Дома на деревьях/Транс музыка/День Победы/Индуизм/Водопад/Дудхсагар - «Видео уроки - CSS»

Роскомнадзор vs Telegram, ИИ от Google, Новый Gmail - «Видео уроки - CSS»

Виджеты и Сайдбары в WordPress. Создаем свой сайдбар. - «Видео уроки - CSS»

Блокировка Telegram — Суровый веб #162 - «Видео уроки - CSS»

Как работать программистом в Германии? - «Видео уроки - CSS»

HTML Сниппеты #4. Адаптивная верстка вертикального таймлайна - «Видео уроки - CSS»

Что такое Taxonomy. Функция register_taxonomy() - «Видео уроки - CSS»

Что такое Custom Post Type. Функция register_post_type() - «Видео уроки - CSS»
! | |||
B | border-left-color | border-top | |
C | column-count | columns
|
counter-reset
|
D | E
|
H
|
Q
|
F
|
L
|
M
|
O |
P
|
W
|
T
|
text-shadow |
R | U
|
V | Z
|
Firefox | Opera | Safari и Chrome | |
-moz-border-bottom-colors
|
-moz-orient
|
-o-linear-gradient
|
-webkit-linear-gradient
|
@-правила | |||
@font-face | @media |
Селекторы и их комбинации | |||
A
|
A B
|
[attr]
|
[attr~='value']
|
Псевдоклассы | |||
:active
|
:enabled
|
:hover | :not
|
:only-child
|
:read-only | :target
|
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.