Меню :
php (149)
js (116)
html (35)
css (14)
js slice (13)
js date (9)
form (9)
Показать еще :
jsphp (6)
input (5)
php img (4)
id (4)
int (3)
warning (3)
button (3)
display (2)
php get (2)
info (2)
xml (2)
xhr (2)
radio (1)
js post (1)
iframe (1)

См. интсрукция по ruweb.

Где располагается селектор?

25.02.2026 17:21 / Марат / Смотрели : 194 / css | селектор |

"Расположение селектора.". "Где располагается селектор?" Если вы ещё не разобрались с селектором, то давайте повторим немного тему селектора в той части, где конкретно располагается селектор!?

Всё о расположении селекторов...

  1. Основное расположение селектора.
  2. Расположение селектора во внешнем CSS‑файле.
  3. Внутри тега <style> в HTML.
  4. Селектор в медиа‑запросах (@media).
  5. Селектор внутри псевдоклассов и псевдоэлементов.
  1. Основное расположение селектора.

  2. Я уже касался темы селектора, но где располагается селектор!?

    Селектор всегда находится в начале CSS‑правила, перед блоком объявлений (свойств и значений). Общая структура CSS‑правила:

    css

    селектор {

    свойство: значение;

    свойство: значение;

    }

    Пример:

    css

    h1 {

    color: blue;

    font-size: 24px;

    }

    Здесь h1 — селектор, который выбирает все заголовки первого уровня.

  3. Расположение селектора во внешнем CSS‑файле.

  4. Селекторы располагаются внутри файла стилей(CSS‑файл), подключённого к HTML через <link>.

    HTML:

    <link rel="stylesheet" href="styles.css">

    styles.css:

    #header { background: #333; }

    .button { padding: 10px 20px; }

    p { line-height: 1.5; }

  5. Внутри тега <style> в HTML.

  6. Селекторы пишутся внутри тега <style>(тег style) в <head> HTML‑документа.

    HTML:

    <head>

    <style>

    /* Селекторы внутри <style> */

    body { font-family: Arial; }

    .menu { list-style: none; }

    </style>

    </head>

    Здесь : селекторы :

    body и .menu
  7. Селектор в медиа‑запросах (@media).

  8. Селекторы помещаются внутри блока @media, чтобы применять стили только при определённых условиях (ширина экрана, ориентация и т. д.).

    CSS:

    @media (max-width: 768px) {

    /* Селекторы внутри медиа‑запроса */

    .sidebar { display: none; }

    h1 { font-size: 18px; }

    }

    Здесь селектор :

    .sidebar и h1
  9. Селектор внутри псевдоклассов и псевдоэлементов.

  10. Селектор может комбинироваться с псевдоклассами (:hover, :focus) или псевдоэлементами (::before, ::after).

    CSS:

    a:hover {

    text-decoration: underline;

    }

    p::first-line {

    font-weight: bold;

    }

    Здесь:

    a:hover — селектор + псевдокласс;

    p::first-line — селектор + псевдоэлемент.

    Думаю... на этом достаточно!

Всего комментариев : Comments+ 2.0
1000
+ =


Сайту : 267 дней | статей : 345
JsPhp.ru | Аминев Марат © 2025 - 2026 | 2260 | Подписаться.