CSS. Виды селекторов
advertisement
Лабораторная работа 3. CSS. Виды селекторов
Основные виды селекторов CSS представлены в таблице 1.
Таблица 1 – Виды селекторов CSS
Виды селекторов
Селекторы элементов
Селекторы классов
Селекторы идентификаторов
Селекторы атрибутов
Селекторы потомков (контекстные
селекторы)
Селекторы дочерних элементов
Селекторы сестринских элементов
Селекторы псевдоклассов
Селекторы псевдоэлементов
Пример
p {font-family: Garamond, serif;}
.note {color: red; background: yellow;
font-weight: bold;}
#paragraph1 {margin: 0;}
a[href="http://www.somesite.com"]{fontweight:bold;}
div#paragraph1 p.note {color: red;}
p.note > b {color: green;}
h1 + p {font-size: 24pt;}
a:active {color:yellow;}
p:first-letter {font-size: 32px;}
Также в CSS существует так называемый универсальный селектор,
обозначающий любой элемент, встречающийся в документе. Например,
*{color:red;}. Перед любым селектором, задающим класс или идентификатор,
можно поставить знак универсального селектора, в результате получится
эквивалентное выражение, например, .first {...} и *.first {...} имеют один и тот
же смысл.
Использование псевдоклассов и псевдоэлементов
Самые известные псевдоклассы:это :link, :hover, :visited и :active.
Обычно псевдоклассы используют в основном для задания стилей
ссылок, например :link для непосещенной ссылки, :hover для ссылки при
наведении, :active для нажатой и удерживаемой ссылки и :visited для
посещенной.
Примеры использования псевдоклассов
#d3{ border:solid yellow 2px;}
#d3:hover{border:solid blue 4px;}
.btn{border:solid grey 1px;
box-shadow: 0 1px 1px #777;
border-radius: 7px;
color:yellow;}
.btn:active{ border:solid red 2px;
box-shadow: 0 1px 1px #555;
border-radius: 15px;
color:blue;
font-size:24px;
font-style:bold;}
Всего существует 33 псевдокласса, но не все браузеры их поддерживают.
Название и назначение псевдоклассов
:link — отвечает за стили непосещенной ссылки;
:hover — состояние объекта (не обязательно ссылки) при наведении на
него мышкой;
:active — состояние активного объекта (например, для ссылки и зажатие
ее мышкой);
:visited — состояние посещенной ссылки;
:focus —устанавка фокуса (в случае с текстовым полем - это постановка
курсора в это поле);
:first-child — первый дочерний элемент текущего элемента;
:last-child — соответственно, последний дочерний элемент элемента;
:only-child — применяет стиль к элементу, если он единственный
дочерний элемент;
:nth-child() — какой-то по счету с начала дочерний элемент, например
p:nth-child(4);
:nth-last-child() — аналогично, только отчет с конца; интересно, что в этом
и предыдущем селекторах можно задавать не только конкретные цифры, но и
счетность, к примеру вот так: ul li:nth-last-child(2n+1);
:lang() — если у элемента указан язык (с помощью атрибута lang,
например lang="en"), то этот элемент можно выбрать таким образом;
:root — дает указание применить стиль к корневому элементу (в html
документе это тег <html>);
:not() — дает ограничение на применение стилей по селектору (то есть
селектор .red-block:not(div) применит указанный стиль ко всем элементам с
классом .red-block, только есть этот элемент не <div>);
:empty — выбирает пустые элементы;
:first-of-type — применяет стиль к первому элементу этого типа, то есть
если у вас есть два дива, стиль будет работать только для первого из них;
:last-of-type — аналогично предыдущему, только для последнего
элемента;
:only-of-type — применяет стили к элементу, если он имеет уникальный
тип внутри своего родителя;
:nth-of-type() — выбирает указанный по счету с начала элемент текущего
типа;
:nth-last-of-type() — то же самое, но отсчет с конца;
:target — например, если у вас адрес имеет вид index.html#anchor, то этот
псевдокласс задаст правило для элемента с id="anchor";
:enabled — выбирает активные «инпуты»;
:disabled — а этот неактивные;
:checked — отмеченные «чекбоксы» и выбранные «радиобаттоны»;
:indeterminate — для «радиобаттонов» и «чекбоксов» опеределяет
состояние, когда они не выбраны;
:default — элемент по умолчанию, например, кнопка отправки формы;
:valid — стиль для правильного «инпута» (когда указана data type в HTML
5);
:invalid — когда, соответственно, «инпут» не валиден;
:in-range — когда значение «инпута» находится в заданных границах
(type="range", задан min и max, но это все только в HTML 5);
:out-of-range — когда не попадает в границы;
:required — все обязательные поля;
:optional — все необязательные;
:read-only — те элементы, которые доступны только для чтения;
:read-write — для чтения и записи.
Практическое задание
Откройте файл, созданный на предыдущей лабораторной работе, и
примените к элементам псевдоклассы.
Взаимодействие CSS и JavaScript
Иногда возникает проблема изменения свойств стилей объектов не
напрямую через HTML код, а в теле скрипта JavaScript. Для этих целей
применяются аналоги свойств CSS в JavaScript.
Для этого используется универсальный вариант с применением метода
getElementById():
document.getElementById(object).style.js_свойство = "новое_свойство_CSS"
Например:
document.getElementById("div1").style.fontSize = "10"
Ниже приведена таблица основных свойств CSS и их аналогов в
JavaScript.
Свойство CSS
Аналог JavaScript
background-attachment
backgroundAttachment
background-color
backgroundColor
background-image
backgroundImage
background-position
backgroundPosition
background-repeat
backgroundRepeat
border
border
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border-left-color
borderLeftColor
border-left-style
borderLeftStyle
border-left-width
borderLeftWidth
border-right
borderRight
border-right-color
borderRightColor
border-right-style
borderRightStyle
border-right-width
borderRightWidth
border-style
borderStyle
border-top
borderTop
border-top-color
borderTopColor
border-top-style
borderTopStyle
border-top-width
borderTopWidth
border-width
borderWidth
clear
clear
clip
clip
color
color
cursor
cursor
display
display
filter
filter
font
font
font-family
fontFamily
font-size
fontSize
font-variant
fontVariant
font-weight
fontWeight
height
height
left
left
letter-spacing
letterSpacing
line-height
lineHeight
list-style
listStyle
list-style-image
listStyleImage
list-style-position
listStylePosition
list-style-type
listStyleType
margin
margin
margin-bottom
marginBottom
margin-left
marginLeft
margin-right
marginRight
margin-top
marginTop
overflow
overflow
padding
padding
padding-bottom
paddingBottom
padding-left
paddingLeft
padding-right
paddingRight
padding-top
paddingTop
page-break-after
pageBreakAfter
page-break-before
pageBreakBefore
position
position
float
styleFloat
text-align
textAlign
text-decoration
textDecoration
text-decoration: blink
textDecorationBlink
text-decoration: line-through
textDecorationLineThrough
text-decoration: none
textDecorationNone
text-decoration: overline
textDecorationOverline
text-decoration: underline
textDecorationUnderline
text-indent
textIndent
text-transform
textTransform
top
top
vertical-align
verticalAlign
visibility
visibility
width
width
z-index
zIndex
