Этот урок углубляется в улучшение визуальных эффектов HTML с использованием каскадных листов в стиле (CSS). Мы начнем с селекторов CSS - инструменты для нацеливания на определенные элементы HTML.

]

листы каскадных стилей (CSS)

]

CSS диктует внешний вид компонентов HTML: цвет, интервал, размер и многое другое. В то время как вы можете стилизовать отдельные элементы, используя inline style атрибуты (например,

), это неэффективно для больших веб -сайтов.

]

более эффективный подход включает в себя использование элемента в разделе ] ]) Связано с вашим HTML с помощью :

/ * style.css */ p { Цвет: красный; Текстовое декорация: подчеркивание; }

/* style.css */
p {
  color: red;
  text-decoration: underline;
}

elements. Инструменты разработчика браузера (например, щелкните правой кнопкой мыши, «осмотрите» в Chrome), позвольте вам исследовать и изменить прикладные стили для устранения неполадок. ] ]

] выбор HTML Elements

p

in p {color: red; } выбирает All

elements. Для более сложных структур, id и class атрибуты предоставляют более тонкий контроль.

class и id selectors

] каждый элемент может иметь уникальный

id

. ID Selectors (#iDname ) целевые элементы по их id . Однако id s должен быть уникальным, ограничивая их гибкость. классы предлагают большую универсальность. Несколько элементов могут разделить один и тот же класс. Селекторы класса (

. ClassName

) целевые элементы с этим классом. Элементы могут иметь несколько классов (например,

). ]

. Red-Text {color: red; }

стили все элементы с помощью класс Red-Text . P.Red-Text специально стили только

elements с Red-Text . ]

Selectors Combinator

] модель объекта документа (DOM) представляет структуру страницы как дерево. Селекторы комбинатора используют эту иерархию.

]

]

div P
• : select All
  elements внутри
  elements (потомки). ] div> p
• : выбирает только прямых детей
  элементов
  elements. ] p span
• : выбирает ] сразу же после a
  .
p ~ span
• : selects All ] сестры после a
  . ] ]
] ] ] ] ] чрезмерно сложные комбинации комбинатора обескуражены. Вы можете комбинировать их с селекторами класса (например, . Intro p

). ]

Pseudo-Selectors

Pseudo-Class Selectors Элементы стиля на основе их состояния (например,

a: Hover

, a: active , a: visited ). Псевдоэлементные селекторы Целевые части элемента (например, :: First-letter ). ]

другие селекторы

] ]

*
• : Universal Selecter, выбрать все элементы. ] Group Selectors (например,
H1, H2, p
• ): выберите несколько типов элементов. attribute selectors (например,
p [lang]
• , p [lang = "en"] ): выберите элементы на основе атрибутов. ] ]
дальнейшее чтение:

] ]

отзывчивый дизайн
• отзывчивые изображения
• CSS Animation
• ]
этот пост первоначально появился на TheDevSpace.
]