
CSS3_селекторы.pptx
- Количество слайдов: 16
CSS 3. Селекторы ст. преподаватель кафедры ПБИ Еремеев Алексей Александрович
Селекторы элементов Вид селекторов, при использовании которого стиль будет применен ко всем встречающимся в html-документе соответствующим элементам. Пример p {color: red}
Селекторы класса Стили описанные при помощи селектора классов будут применены только к элементам, содержащим атрибут class с соответствующим значением. Примеры 1). clr. Red {color: red} 2) p. clr. Red {color: red} li. clr. Red {color: yellow}
Селекторы идентификаторов Стиль, описанный при помощи селекторов идентификаторов, может быть применен только к одному элементу веб - страницы. При этом элемент должен содержать атрибут id с соответствующим значением. Пример #clr. Red {color: red}
Селекторы потомков Селектор потомков используется для задания стиля элементов, являющихся потомками другого элемента. Форма записи: элемент-предок элемент-потомок { атрибуты стиля } Пример table p {color: red}
Пример <div> <table> <tr> <td> table 1. 1</td> <td>table 1. 2. 1 <p>some text</p></td> </tr> </table> </div>
Объединение с другими типами селекторов Селекторы потомков можно объединить с селекторами классов: table p. clr {color: red} Равно как и с селекторами идентификаторов: table#red p {color red} Более сложные комбинации: table#red td. txt p. clr {color: red}
Селекторы дочерних элементов Стили, описанные при помощи данных селектора применимы только к дочерним элементам. Форма записи: элемент-родитель {атрибуты стиля} > дочерний Пример: table#red td. txt > p. clr {color: red} элемент
Универсальные селекторы с универсальными селекторами применяются ко всем элементам веб - страницы. Оформление при этом выглядит следующим образом: Стили * {color: red}
Селекторы братских элементов При помощи данных селекторов задаются стили для элементов, располагающихся сразу же за другим элементом. Пример strong + p {color: red}
Пример <div> <ul> <li><strong>some text</strong> <p>some text</p> more text <p> and more text</p></li> <li >some text part 2</li> <li>some text part 3</li> </ul> </div>
Селекторы атрибутов привязываются к элементу, имеющему соответствующий атрибут. Форма записи: элемент [атрибут=значение {атрибут стиля } Пример: a[href="doc. htm"] атрибута]
Примеры 1) img[title] {border: 1 px double black} 2) img[alt~="word"] {border: 1 px double black} 3) img[alt^="word"] {border: 1 px double black} 4) img[alt$="word"] {border: 1 px double black} 5) img[alt*="word"] {border: 1 px double black}
Селекторы псевдоклассов Псевдоклассы позволяют применять различные стили к элементам, в зависимости от их состояния. link – стиль применяется к непосещенным ссылкам; focus – стиль применяется к элементу при получении им фокуса; hover – стиль активизируется, когда курсор находится в пределах элемента; visited – стиль применяется к посещенным гиперссылкам; first-child – стиль применяется к первому дочернему элементу селектора. Форма записи: a: hover {color: red}
Селекторы псевдоэлементов Псевдоэлементы позволяют привязать стиль к определенному фрагменту веб - страницы, например, к первой букве текста элемента веб - страницы. Доступные псевдоэлементы: after – позволяет добавить контент после указанного элемента; before – позволяет добавить контент до указанного элемента; first-letter – задает стиль для первого символа в тексте элемента; first-line – задает стиль первой строки текста элемента. Форма записи: li: before {content: "come content"}
Спасибо за внимание!
CSS3_селекторы.pptx