CSS урок 5. Медиа-запросы. Псевдоклассы и псевдоэлементы CSS

Цель урока:Рассмотрение понятия «медиа-запросы» для создания отзывчивой верстки. Знакомство с псевдоклассами и псевдоэлементами в CSS. Рассмотрены примеры создания стилей

Медиа-запросы в CSS

Медиа-запросы — логическое выражение, которое может быть равно истине (true) или лжи (false)

Условием является либо параметры устройства, на котором отображается веб-страница, либо размеры экрана пользователя.

Медиа-запрос записывается либо в стилевом файле, либо во вложенном стиле и имеет следующую структуру:
структура медиа-запроса css
all — все устройста. Может быть screen | print | tv

max-widthмедиа функция, которая может задавать параметры указанного устройства или разрешение экрана

В примере устройство с максимальным разрешением экрана — 480px и с минимальным — 320px:
пример медиа-запроса
Из примера видно, что функции могут содержать логические условия: AND — И, NOT — НЕ и ONLY — только

Медиа-запросы логично размещать после всех описанных стилей

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

Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя.

Важно: На псевдокласс указывает наличие двоеточия (:)

  • Три псевдокласса определены именно для гиперссылки (для тега a):
  • a:link{...} /* для ссылки непосещенной */
    a:visited{...} /* для посещенной ссылки */
    a:active{...} /* для активной ссылки, в момент щелчка */

    * active — псевдокласс не только для гиперссылки

  • Псевдоклассы для всех элементов:
  • элемент:hover{...} /* по наведению курсора на элемент */
  • Псевдоклассы для всех элементов управления:
  • input:focus{...} /* в тот момент, когда элемент получает фокус */
    input:active{...}/* в момент активации элемента */

    Пример: На странице расположено текстовое поле. Необходимо взять элемент в толстую черную рамку, когда он в фокусе, и в толстую красную, когда он активен

    Выполнение:

    <style type="text/css">
    .el1:focus { outline: thick solid black } 
    .el1:active { outline: thick solid red }
    </style> 
    </head>
    <body> 
    <input type="text" class="el1" value="щелкни по мне">

    Результат:

    Псевдоэлементы CSS

    Псевдоэлементы позволяют, во-первых, задать стиль некоторых частей элементов, которые не определены в дереве элементов документа, а, во-вторых, генерировать содержимое, которого нет в исходном коде текста.

    Псевоэлементы, определяющие новые элементы:

    элемент:first-letter {...}/* первая буква или символ элемента */
    элемент:first-line {...}/* первая строка элемента */

    Пример: Для первой строки параграфа применить курсивный стиль шрифта, первую букву абзаца сделать красным цветом

    Выполнение:

    <style type="text/css">
    .f1:first-letter {color: red}
    .f1:first-line {font-style: italic}
    </style> 
    </head> 
    <body> 
    <p class="f1">К этому тексту применен стиль. К этому тексту применен стиль. К этому тексту применен стиль. 
    К этому тексту применен стиль. К этому тексту применен стиль.
    </p>

    Результат:

    пример псевдоэлемента в css

    Псевоэлементы, генерирующие содержимое:

    элемент:before {content:""}/* генерирует текст перед элементом */
    элемент:after {content:""} /* генерирует текст после элемента */

    Пример: К содержимому абзаца с классом new добавить дополнительное слово — Ого!.

    Выполнение:

    <style type="text/css">
    p.new:after{
    	content: "- Ого!"
    	}
    </style> 
    </head>
    <body> 
    <p class="new">Ловля льва в пустыне с помощью метода золотого сечения.</p>
    <p>Метод ловли льва простым перебором.</p>

    Результат:

    пример псевдоэлемента

    Пример: Для маркированного списка убрать маркер и установить вместо него какой-либо символ

    Выполнение:

    <style type="text/css">
    ul { 
        list-style-type: none; /* Прячем маркеры списка */ 
    } 
    li:before { 
    content: "\20aa  "; /* Добавляем перед элементом списка символ в юникоде */ 
    }
    </style>
    </head> 
    <body> 
    <ul>
    <li>Чебурашка</li>
    <li>Крокодил Гена</li>
    <li>Шапокляк</li>
    <li>Крыса Лариса</li>
    </ul>

    Результат:

    изменение маркера списка html css

    Задание: Скопируйте текст, расположенный ниже, и вставьте в веб-страницу. Используя вложенный стиль css либо отдельный файл css, создайте следующие правила, чтобы достигнуть эффекта как на итоговом изображении.

    Текст:

    <body> 
    <h1>Стих 1</h1>
    <p>
    Вопрос такой: зачем все это мне?<br/>
    Но, не найдя ответа на подходе,<br/>
    Я понял, что пришедшее извне<br/>
    Стремительно вовне же и уходит.
    </p><p>
    Другой вопрос — как быть? Но тут<br/>
    Ответ просился сам: бездействуй!<br/>
    (Угли недолго проживут<br/>
    В костре, где все без происшествий.)
    </p><p>
    Вот так и жду, не шевелясь,<br/>
    Когда уйдут из сердца лица,<br/>
    Ушедшие однажды с глаз,<br/>
    Чтоб никогда не возвратиться.
    </p>
    <hr>
    <h1>Стих 2</h1>
    <p>
    Обещай, что вернешься Домой.<br/>
    Эти зимы меня одолеют.<br/>
    Я смотрю на тебя и не смею<br/>
    Прикоснуться холодной рукой.
    </p><p>
    Обещай, что не будешь скучать.<br/>
    Нам обоим запомнятся годы<br/>
    Нашей странной и глупой свободы,<br/>
    Научившей любить и прощать.
    </p><p>
    Обещай, что в далеком краю,<br/>
    Если станет тебе одиноко,<br/>
    Ты прочтешь эти добрые строки<br/>
    Про бескрайнюю Нежность мою.
    </p><p>
    И поселится в сердце покой.<br/>
    Нет тебя мне на свете дороже.<br/>
    Обещай,<br/>
    что когда-нибудь все же<br/>
    ты конечно вернешься Домой.
    </p>
    <hr>
    </body>

    Необходимые правила:

    p:first-line{}
    p:first-letter{}
    p {}
    h1{
    	text-transform:;
    	border-bottom-style:...;
    	border-bottom-color:...;
        }
    hr {}

    Свойства:
    text-transform
    border-bottom-style
    border-bottom-color
    Оформление шрифта

    Итоговое изображение:
    задание про псевдоклассы и псевдоэлементы

    Поделитесь уроком с коллегами и друзьями:

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    *
    *


    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить