термины CSS

Псевдоклассы CSS

Псевдокласс – css термин, использующийся в технологии CSS, с целью обозначения специального атрибута, который позволяет определить уникальный стиль или стили для элемента веб-страницы состояние которого может изменяться в зависимости от действий пользователя. Кроме того, псевдоклассы (в рамках технологии CSS) применяются с целью отслеживания положения определенных элементов, присутствующих в структуре каскадной таблицы стилей (CSS документа).

Синтаксис для применения псевдоклассов в CSS:

Элемент css: Псевдокласс { Описание правил стиля }

Как видим из нашего с вами примера выше, вначале идет «элемент-css», а уже к нему добавляется «псевдокласс», «двоеточие», после двоеточия указываем имя нашего псевдокласса. Как правило, в css документах допускается применять псевдоклассы к классам или именам идентификаторов:

a.psevdoklass:hover {color: red}

А также к селекторам:

.psevdoklass a:hover {background: #ffffff}

Пример псевдоклассов: active, link, focus, hover, visited, first-child и другие.

Название и назначение псевдоклассов

  • link — стиль не посещенной ссылки;
  • hover — изменяет состояние объекта при наведении на него мышкой;
  • active — состояние активного...

CSS: Cascading Style Sheets

CSS (общепринятое сокращение от английского словосочетания Cascading Style Sheets). В переводе на русский язык данный термин звучит, как «каскадные таблицы стилей». Данным термином в css-терминологии обозначают особый набор правил форматирования, который применяется к элементам сетевого документа style.css с целью изменения их внешнего вида, а также расположения в составе веб-страницы.

Цель создания, использования CSS

CSS используется в веб-страницах для задания цветов, шрифтов, размера шрифтов, расположения отдельных блоков в документах для представления внешнего вида веб-страниц.

Способы подключения CSS к документу

<head>
.....
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

Пример таблицы стилей css

p {
  font-family: Garamond, serif;
}
h2 {
  font-size: 110 %;
  color: red;
  background: white;
}
.note {
  color: red;
  background: yellow;
  font-weight: bold;
}
p#paragraph1 {
  margin: 0;
}
a:hover {
  text-decoration: none;
}
#news p {
  color: blue;
}
[type="button"] {
  background-color: green;
}