CSS 3 Селекторы ст преподаватель кафедры ПБИ Еремеев

Зарегистрируйтесь, чтобы просмотреть полный документ!

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"}

Спасибо за внимание!

Скачать презентацию CSS 3 Селекторы ст преподаватель кафедры ПБИ Еремеев

CSS3_селекторы.pptx

Количество слайдов: 16