Форматирование псевдоклассов и псевдоэлементов
Псевдоклассы это - ссылки, first-child и lang:
a: link - свойства обычной ссылки; a: active - свойства активной ссылки;a: visited - свойства посещенной ссылки; a: hover - свойства ссылки при наведении на неё мыши; a: focus - свойство ссылки при фокусе
first-child - выделяет первый элемент среди последующих.
lang - форматирование элементов в зависимости от применения языков на странице.
В каскадных листах стилей при форматировании ссылок применяются те же значения, что и к обычному тексту. При описании других псевдоклассов в CSS перед их значениями указывается символ ">".
К псевдоэлементам в стилях относятся свойства: first-letter - форматирует первый символ для первой строки; first-line - назначается отдельное форматирование первой строки блока текста; after - назначает месторасположения объекта после текущего элемента; before - назначает месторасположения объекта до текущего элемента.
Единицы измерения в CSS
В CSS используeтcя несколько способов для задания размеров: относительный размер в про-центах (%), относительный размер при помощи словесного описания (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large), абсолютный размер в типографских единицах - размер может задаваться в пунктах (pt), пиках (pc), пикселях (px), средней ши-риной буквы "m" (em), средней шириной буквы "x" (eх) , абсолютный размер в стандартных единицах длины - размер может задаваться в сантиметрах (cm), миллиметрах (mm), дюймах (in), абсолютный в пикселях (px)
Цвет может быть определен одним из трех способов: при помощи названия цвета: yellow, red, green, grey,.. ; шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,..; десятичным заданием составляющих цвета в формате rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),..
Приведем несколько примеров описания таблицы стилей:
.epigraph {
font-size: 12pt;
font-style: italic;
text-align: right;
color: rgb(127,127,0);
}
p.big {
font-size: 16px;
font-weight: bold;
color: #ff0000;
}
.menu {
font-weight: bold;
font-size: 9pt;
font-family: arial, helvetica, sans-serif;
}
a:hover {
color: #b63a3a;
text-decoration: none;
}
Новое в CSS3
border-radius, box-shadow, text-shadow, opacity, border-image, rgba(x,y,z,a), backgroun-size, background:url(), url(), column-count, transition, transform, @font-face, background-clip, animation, @animation-keyframes.
Закруление углов: .radius_border { border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
Тень от блока:box_shadow { box-shadow: 5px 5px 2px #000;
-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
}
Тень от текста: TEXT.text_shadow { text-shadow: 2px 2px 2px #000;
-moz-text-shadow: 2px 2px 2px #000;
-webkit-text-shadow: 2px 2px 2px #000;
}
Transition: .pic { margin-left: 80%;
-webkit-transform: rotate(-30deg) scale(1.5);
-webkit-transition: all 2s ease-in;
}
Валидация CSS
Валидацией называется проверка CSS-кода на соответствие спецификации CSS. Соответственно, корректный код, не содержащий ошибок, называется валидный, а не удовлетворяющий спецификации —невалидный. Чтобы проверить правильно ли оформлена страницу и лист стилей, можно загрузить их прямо со своего компьютера на сайт валидаторов и получить развернутое сообщение об ошибках. Наиболее удобно делать проверку кода CSS через сайт http://jigsaw.w3.org/css-validator/. С помощью этого сервиса можно указать адрес документа, загрузить файл или проверить набранный текст. Для проверки HTML-кода можно перейти на сайт validator.w3.org
Глава 4. Язык 6-31545.php">⇐ Назад