Придумайте селектор который выберет абзацы p внутри дивов div
Перейти к содержимому

Придумайте селектор который выберет абзацы p внутри дивов div

  • автор:

Практика на комбинации CSS селекторов

Напишите селектор, который выберет абзацы, расположенные внутри дивов div . Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все h2 , расположенные внутри дивов div . Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все абзацы p из элемента с id , равным block . Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все h2 из элемента с id , равным block . Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все элементы с классом bbb . Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все элементы с классом bbb из элемента с id , равным block . Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все абзацы p с классом bbb . Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все h2 с классом bbb . Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все абзацы p с классом bbb из элемента с id , равным block . Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все элементы с классом bbb и элементы с классом xxx одновременно (то есть нужно сгруппировать селекторы через запятую). Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все абзацы p с классом bbb и одновременно все h2 с классом xxx . Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все абзацы p с классом bbb из элемента с id , равным block и одновременно все абзацы p с классом xxx из из элемента с id , равным block . Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все элементы с классом fff . Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все абзацы p из элемента с классом fff . Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все абзацы p с классом fff . Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все элементы с классом bbb из элемента с классом fff . Проверьте ваш селектор на следующем коде:

Напишите селектор, который выберет все h2 с классом bbb из элемента с классом fff . Проверьте ваш селектор на следующем коде:

Селекторы. Часть 1.

Ближайшие статьи этого учебника будут посвящены глубокому изучению селекторов, благодаря которым вы научитесь выбирать совершенно любой элемент, размещенный в HTML документе.

Основная функция селекторов заключается в том, чтобы контролировать дизайн веб страниц, выбирая элемент, или элементы по определенным критериям и стилизуя их с помощью CSS свойств, которые вы указываете в блоке объявлений (описаний).

Селектор типа

Рис. 3а Селектор типа в CSS.

Рис. 3а Селектор типа в CSS.

  • p — сообщает браузеру, что необходимо отформатировать все HTML теги (параграф).
  • table — сообщает браузеру, что необходимо отформатировать все HTML теги (таблица).
  • li — сообщает браузеру, что необходимо отформатировать все HTML теги (элемент списка).

Давайте рассмотрим пример, в котором с использованием селектора типа мы стилизуем все заголовки второго уровня ( ):

   charset = "UTF-8"> Селектор типа h2  font-family: Arial; /* задаем тип шрифта Arial */ color: green; /* задаем цвет текста*/ margin-top: 50px; /* добавляем отступ от верхнего края элемента */ >  Обычный заголовок второго уровня Обычный заголовок второго уровня Обычный заголовок второго уровня   

Результат нашего примера:

Рис. 3б Пример использования селектора типа.

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

Селектор класса

Описание селектора класса.

Рис. 4 Селектор класса в CSS.

Прошу от Вас максимального внимания, так как селектор класса является одним из самых распространенных и востребованных селекторов CSS, который мы будем постоянно использовать в дальнейшем изучении CSS.

И так, мы хотим, чтобы один из элементов выглядел не так, как другие. Для этого нам необходимо создать селектор, назначив ему имя, которое нам необходимо придумать самостоятельно:

.test  /* имя класса в таблице стилей задается через точку */ text-align: center; /* горизонтальное выравнивание текста по центру */ font-family: Courier; /* задаем тип шрифта Courier */ color: green; /* задаем цвет текста*/ margin-top: 50px; /* добавляем отступ от верхнего края элемента */ > 

После того как мы создали наш класс в таблице стилей, нам необходимо применить его к интересующему нас элементу, или элементам, которые мы хотим стилизовать. Чтобы указать класс для определенного элемента, необходимо добавить к этому элементу глобальный HTML атрибут class со значением нашего класса, но без точки:

class = "test">Заголовок второго уровня /* задаем класс для элемента*/ 

Обратите внимание на следующие правила, которые необходимо соблюдать при работе с селекторами класса:

  • в отличии от селекторов типа все названия селекторов класса должны начинаться с точки (благодаря ей браузеры находят эти селекторы в таблице стилей). Точка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута class она не ставится, будьте внимательны из-за этого возникает много ошибок).
  • используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
  • название после точки всегда должно начинаться с символа (неправильно: .50cent, .-vottakvot).
  • Учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot и .VotTakVot разные классы).

Теперь соберем это в одном примере и посмотрим результат:

   charset = "UTF-8"> Селекторы класса .test  text-align: center; /* горизонтальное выравнивание текста по центру */ font-family: Courier; /* задаем тип шрифта Courier */ color: green; /* задаем цвет текста*/ margin-top: 50px; /* добавляем отступ от верхнего края элемента */ >  Обычный заголовок второго уровня class = "test">Заголовок с заданным классом   

Результат нашего примера:

Рис. 4 Использование селектора класса.

Селекторы класса очень гибкий инструмент, который позволяет указать конкретный стиль даже к одному слову предложения. Для этого мы поместим это слово внутри элемента и назначим этому элементу определённый класс, который опишем во внутренней таблице стилей:

   charset = "UTF-8"> Пример выделения одного слова .test  color: #0F0; /* задаём цвет текста в hex формате */ font-size: 30px; /* задаем размер шрифта*/ >  Обычный заголовок class = "test">второго уровня  

Результат нашего примера:

Рис. 6 Пример выделения одного слова с использованием селектора класса.

Обращаю Ваше внимание, что вы можете использовать селекторы класса напрямую к HTML элементам, используя следующий синтаксис:

a.test  /* выбирает все элементы с классом test */ блок объявлений; > p.intro  /* выбирает все элементы 

с классом intro */ блок объявлений; >

ID селекторы

Описание селектора id.

Рис. 7 Селектор id в CSS.

Основная задача селектора id заключается в том, чтобы выбрать элемент с определённым идентификатором. Для начала необходимо создать идентификатор, назначив ему имя, которое нам необходимо придумать самостоятельно:

#test  /* имя идентификатора в таблице стилей задается через решетку */ background-color: #00FF00; /*Задаём цвет заднего фона*/ color: white; /*Задаём цвет шрифта белый*/ font-size: 30px; /*Указываем размер шрифта*/ width: 600px; /*Указываем ширину элемента*/ height: 40px; /*Указываем высоту элемента*/ text-align: center; /*Выравниваем текст по центру внутри элемента*/ > 

После того как мы создали наш идентификатор в таблице стилей, нам необходимо применить его к интересующему нас элементу, который мы хотим стилизовать. Чтобы указать идентификатор для элемента, необходимо добавить к этому элементу глобальный HTML атрибут id со значением нашего идентификатора, но уже без решетки:

id = «test»>Обычный заголовок второго уровня

Обратите внимание на следующие правила, которые необходимо соблюдать при работе с id селекторами:

  • значение идентификатора должно быть уникально на странице, размещение нескольких одноименных идентификаторов на странице считается ошибкой (выборка остановится на первом идентифакторе).
  • все названия id селекторов должны начинаться с решётки (благодаря ей браузеры находят эти селекторы в таблице стилей). Решетка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута id она не ставится, будьте внимательны из-за этого возникает много ошибок).
  • используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
  • название после решётки всегда должно начинаться с символа (неправильно: #50cent, #-vottakvot).
  • Учитывайте регистр при наименовании id селекторов, т.к. они к этому чувствительны (#vottakvot и #VotTakVot разные идентификаторы).

Теперь соберем это в одном примере и посмотрим результат:

   charset = "UTF-8"> ID селекторы #test  background-color: #0F0; /* задаём цвет заднего фона */ color: white; /* задаём цвет текста */ font-size: 30px; /* указываем размер шрифта */ height: 100px; /* указываем высоту элемента */ text-align: center; /* горизонтальное выравнивание текста по центру */ >  id = "test">Обычный заголовок второго уровня   

Результат нашего примера:

Рис. 7а Пример использования id селектора.

В настоящее время id селекторы в основном применяются на веб страницах с целью динамического управления элементами с использованием языка программирования JavaScript.

Групповые селекторы

В CSS допускается задать единый стиль не только одному селектору, но и группе селекторов. В группу могут входить как селекторы типа, селекторы класса, так и рассмотренные нами id селекторы. При перечислении любых селекторов (даже, которые мы будем рассматривать далее в учебнике) необходимо обязательно разделять их запятой, позднее вы поймете почему.

 h1, h2,.test,#test  /* выбираем заголовки первого и второго уровня, элементы с классом test и элемент с идентификатором test */ background-color: green; /* задаем цвет заднего фона */ > .test, #test  /* выбираем элементы с классом test и элемент с идентификатором test */ color: blue; /* задаем цвет текста */ >  

Вторым групповым селектором мы указываем, что кроме заднего фона элементы с классами test и элемент с идентификатором test получат синий цвет текста.

Рассмотрим следующий пример:

   charset = "UTF-8"> Групповые селекторы h1, h2,.test,#test  /* выбираем заголовки первого и второго уровня, элементы с классом test и элемент с идентификатором test */ color: red; /* задаем цвет текста */ > h3,h4  /* выбираем заголовки третьего и четвертого уровня */ color: blue; /* задаем цвет текста */ > h1,h2,h3,h4  /* выбираем заголовки от первого до четвертого уровня */ font-style: italic; /* задаем стиль шрифта - курсивное начертание */ >  Заголовок первого уровня Заголовок второго уровня class = "test">Абзац с классом test Заголовок третьего уровня id = "test">Абзац с идентификатором test Заголовок четвертого уровня  

В этом примере мы использовали три групповых селектора:

  • Первым групповым селектором мы указываем, что заголовки и , элементы с классом test и элемент с идентификатором test получат цвет текста красный.
  • Вторым групповым селектором мы указываем, что заголовки и получат цвет текста синий.
  • Третьим групповым селектором мы указываем, что все заголовки (от до ) будут иметь курсивное начертание шрифта.

Результат нашего примера:

Рис. 7б Пример использования групповых селекторов.

Универсальный селектор

Селектор * позволяет выбрать все элементы внутри документа (универсальный селектор).

Давайте рассмотрим пример использования:

   charset = "UTF-8"> Универсальный селектор *  /* выбираем все элементы внутри документа */ color: rgb(50,100,150); /* задаем цвет текста в формате rgb */ font-style: italic; /* задаем стиль шрифта - курсивное начертание */ >  Заголовок первого уровня Заголовок второго уровня Абзац, который не несет никакой смысловой нагрузки  

В этом примере с использованием универсального селектора мы указали, что все элементы на странице получат определенный цвет текста и будут иметь курсивное начертание шрифта.

Результат нашего примера:

Рис. 7в Пример использования универсального селектора.

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

.test *  /* выбирает все элементы внутри элемента c назначенным классом test */ объявление; > #test *  /* выбирает все элементы внутри элемента c назначенным идентификатором test */ объявление; > div *  /* выбирает все элементы внутри элемента */ объявление; > 

Селекторы потомков будут подробно рассмотрены в следующей статье «Селекторы. Часть 2.».

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
  • Составьте следующую HTML страницу, в которой заголовки имеют шрифт Arial, а абзацы, которые относятся к статье Verdana:

Практическое задание № 2.

Практическое задание № 2.

Подсказка: при выполнении практических заданий вы можете располагать стилевую информацию как внутри самой веб страницы, так и в отдельном файле. В практических заданиях для определения цвета элементов вы можете использовать графические редакторы — инструмент палитра (пипетка), либо установите плагин для вашего браузера (например, CollorZilla), либо использовать свои цвета, так как копирование цветов не является целью практического занятия.

После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.

Создание первой таблицы стилей
Селекторы. Часть 2.

© 2016-2024 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com

Кажется, вы используете блокировщик рекламы 🙁

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

CSS-селекторы. Шпаргалка для новичков

Селекторы — это шаблоны, которые используются для привязки стилевых свойств к элементам в документе. Вы можете задать стиль для всех элементов или сократить выбор с помощью определённого селектора.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Основные селекторы

Селекторы типа выбирают элементы HTML-документа по их тегу. Например, селектор p выберет все

на странице:

 

Текст

Другой текст

Селекторы класса определяют стиль элементов с определённым классом. Например, этот селектор выберет абзац с классом .highlight .

 

Текст

Другой текст

.highlight

Селекторы идентификатора выбирают элемент по его уникальному идентификатору. Например, #welcome соответствует элементу с id=»welcome» :

 

Добро пожаловать!

#welcome

Селекторы наличия и значения атрибута находят все элементы, которые имеют определённый атрибут или значение атрибута. Например, здесь мы выбираем все ссылки, которые начинаются на http:// , но не имеют example.com .

a[href^="http://"]:not([href*="[example.com](http://example.com/)"])

Универсальный селектор позволяет прописать стили для всех элементов HTML без исключения. Он указывается в виде звёздочки * . В примере ниже мы используем универсальный селектор с псевдоэлементами, чтобы изменить расчёт общего размера элемента.

*, *::before, *::after

Селекторы-комбинаторы

Комбинаторы выбирают элементы, основываясь на их взаимосвязи в дереве DOM. Можно выбрать элементы, которые являются потомками, соседями или родителями других элементов.

Пример DOM-дерева. Здесь html — родитель для head и body. В свою очередь head — родитель для meta и title, а body — для header и main

Соседний родственный комбинатор

Записывается как селектор1 + селектор2 . Выбирает элемент, подходящий под селектор2 , перед которым расположен элемент, подходящий под селектор1 .

 

Сегодня я стал великим фронтендером.

Я написал стили для текста.

.first + .second

Селектор .first + .second применит стили к абзацу с классом .second , потому что перед ним есть элемент с классом .first . Предложение «Я написал стили для текста.» станет белым.

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

Записывается как селектор1 > селектор2 . Выбирает элементы, которые являются прямыми потомками элемента, подходящего под селектор1 .

 

Я выучил CSS

Ну селекторы точно знаю.

.decoration > p

Стили применятся только к «Я выучил CSS», этот текст станет красным.

Общий родственный комбинатор

Записывается как селектор1 ~ селектор2 . Добавляет стили для элемента, который соответствует селектор2 , если перед ним стоит элемент, подходящий под селектор1. Оба элемента должны принадлежать одному родителю.

 

Это было прекрасное раннее утро. Идеальное время, чтобы приготовить чашку кофе или чая, открыть ноутбук и выучить CSS.

Так Вовка и поступил. Погладил кота, набрался решимости и открыл для себя новый мир вёрстки.

p ~ p

Стили применятся ко второму параграфу, появится внешний отступ сверху.

Этот селектор отличается от соседнего селектора тем, что между элементами селектор1 и селектор2 могут находиться другие элементы.

Комбинатор потомка

Записывается как селектор1 селектор2 . Находит все потомки элемента, который подходит под селектор1 , и применяет к ним стили.

Оказалось, что селекторы — это не так страшно, как я думал. Нужно только немного попрактиковаться, и всё сразу станет ясно.

p span

Здесь в синий цвет окрасятся «не так страшно» и «всё сразу станет ясно.».

Селекторы псевдоклассов

Псевдоклассы — это простые селекторы, позволяющие выбирать элементы на основе информации, которая находится за пределами DOM-дерева или которую невозможно выразить с помощью простого селектора.

�� Простой селектор — это селектор по одному условию, односоставной.

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

Чтобы использовать псевдокласс, нужно добавить его в селектор, например:

a:active

В этом примере мы меняем цвет ссылки на красный, когда пользователь кликает по ней.

:hover

Псевдокласс :hover соответствует элементу, когда пользователь наводит на него курсор мыши. Например, здесь псевдокласс используется, чтобы убрать подчёркивание ссылки:

a:hover

:active

Псевдокласс :active соответствует элементу, на который активно нажимают. Здесь псевдокласс используется для скругления рамок кнопки, когда на неё кликают:

button:active

:visited

Псевдокласс :visited соответствует посещённой ссылке. Например, с его помощью мы можем поменять цвет ссылки, по которой перешёл пользователь:

a:visited

:focus

Псевдокласс :focus соответствует элементу, находящемуся в фокусе — то есть когда элемент выбран для ввода или навигации с помощью клавиатуры. Например, здесь :focus используется для добавления зелёной рамки вокруг поля ввода:

input:focus

:first-child , :last-child и :nth-child(n)

Эти псевдоклассы выбирают элемент по его порядковому номеру. :first-child соответствует первому дочернему элементу родителя, :last-child — последнему. А псевдокласс :nth-child(n) указывает на n -й дочерний элемент. Например, с его помощью можно выбрать второй, пятый или предпоследний элемент. Вместо n в скобках указывается целое число или математическое выражение.

/* выберет первый элемент — HTML*/ li:first-child < font-weight: 700; >/* выберет последний элемент — JavaScript*/ li:last-child < text-decoration: underline; >/* выберет второй элемент — CSS*/ li:nth-child(2)

:first-of-type , :last-of-type и :nth-of-type(n)

Эти псевдоклассы похожи на предыдущие. Они тоже выбирают элемент по его порядковому номеру, но только с учётом типа — тега.

 

Первый параграф

Второй параграф

Выделенный текст

Третий параграф

Четвёртый параграф

Пятый параграф

Выделенный текст
/*Текст в первом теге 

будет жирным*/ p:first-of-type < font-weight: 700; >/*Текст во втором теге

будет подчёркнут*/ p:nth-of-type(2) < color: green; >/*Текст в последнем теге

будет подчёркнут*/ p:last-of-type

«Первый параграф» и «Третий параграф» станут жирными. «Второй параграф и «Четвёртый параграф» окрасятся в зелёный. «Четвёртый параграф» и «Пятый параграф» будут подчёркнутыми.

Если мы используем здесь first-child , nth-child(2) и last-child , то получим другую картину. Жирным станет только «Первый параграф». В зелёный окрасятся «Второй параграф» и «Третий параграф». Подчёркнутым будет «Четвёртый параграф». И всё это из-за того, что между

есть другие элементы — .

Слева стилизуем текст с помощью селекторов *-of-type, справа — *-child

:empty

Псевдокласс :empty — это селектор CSS, который соответствует элементам, не имеющим дочерних элементов, включая текстовые узлы и другие элементы. Его можно использовать для стилизации элементов, которые пусты или не имеют содержимого:

input:empty < border: 1px solid red; >> 

В этом примере мы с помощью :empty добавляем красную рамку пустому инпуту.

Заключение

Мы разобрали самые популярные селекторы, но на самом деле их больше. Полный перечень вы найдёте в спецификации W3C. А чтобы научиться использовать селекторы на практике, пройдите эти тренажёры из курса «Старт в программирование».

Ещё статьи про CSS

  • Как посчитать специфичность селекторов
  • Как работает каскад в CSS
  • Флексы для начинающих
  • Как создавать адаптивные сетки

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Селектор потомков (пробел)

Селектор потомков (пробел)

Селектор потомков в CSS используется для выбора элементов, которые являются потомками другого элемента в структуре документа. Этот селектор обозначается простым пробелом между двумя селекторами и позволяет применить стили к элементам, находящимся внутри других элементов, независимо от глубины их вложенности.

Пример использования селектора потомков:

article p

В данном примере все абзацы (

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

Селектор потомков особенно полезен в следующих случаях:

  1. Структурирование контента: Помогает стилизовать элементы внутри определенных секций или компонентов, не затрагивая похожие элементы в других частях страницы.
  2. Тематическое оформление: Используется для применения уникальных стилей к элементам, расположенным внутри определенных контейнеров, например, для статей, сайдбаров или футеров.
  3. Изоляция стилей: Обеспечивает локальное применение стилей, предотвращая их случайное распространение на другие элементы документа.

Применение селектора потомков упрощает создание модульной и легко поддерживаемой структуры стилей, позволяя разработчикам более точно и гибко управлять внешним видом веб-страницы.

Однако, важно соблюдать баланс и избегать слишком глубокой вложенности селекторов, так как это может усложнить поддержку и оптимизацию кода. Рекомендуется использовать селектор потомков с умом, ориентируясь на поддержание чистоты и простоты структуры CSS.

  • 4 апреля 2024

Псевдокласс :link

Псевдокласс :link

Псевдокласс :link в CSS предназначен для стилизации ссылок, которые ещё не были посещены пользователем. Этот псевдокласс позволяет разработчикам задавать внешний вид для непосещенных ссылок отдельно от тех, по которым пользователь уже переходил, что помогает лучше ориентироваться на странице и повышает удобство использования сайта.

Пример использования псевдокласса :link для стилизации непосещенных ссылок:

a:link

В данном примере для всех непосещенных ссылок устанавливается синий цвет ( #007bff ) и убирается подчеркивание. Это делает внешний вид ссылок более аккуратным и одновременно информативным, поскольку пользователь может легко отличить их от уже посещенных ( :visited ) ссылок.

При работе с :link , важно помнить, что этот псевдокласс должен использоваться в сочетании с псевдоклассом :visited для полной стилизации состояний ссылок. Также рекомендуется определять стили для псевдоклассов :hover и :active , чтобы обеспечить интерактивный и отзывчивый интерфейс.

Пример полного набора стилей для ссылок:

a:link < color: #007bff; text-decoration: none; >a:visited < color: #666; >a:hover < color: #0056b3; text-decoration: underline; >a:active

В этом примере задаются различные стили для всех возможных состояний ссылок: :link для непосещённых, :visited для посещённых, :hover при наведении курсора и :active в момент нажатия на ссылку. Такой подход позволяет создать более динамичный и интуитивно понятный интерфейс веб-страницы.

  • 4 апреля 2024

Псевдокласс :focus

Псевдокласс :focus

Псевдокласс :focus в CSS используется для стилизации элементов, которые получили фокус. Это может быть, например, текстовое поле в форме, к которому пользователь переместил курсор для ввода, или ссылка, выбранная через клавиатурный ввод. Псевдокласс :focus позволяет создать более интерактивный и доступный пользовательский интерфейс, подсвечивая активные или выбранные элементы.

Пример использования :focus :

input:focus

В этом примере для всех текстовых полей ( input ) при получении фокуса будет изменяться цвет границы на синий и фоновый цвет на светло-синий. Это обеспечивает наглядную обратную связь пользователю о том, какой элемент формы активен в данный момент, улучшая общую пользовательскую доступность и удобство использования интерфейса.

Псевдокласс :focus особенно важен для:

  1. Улучшения доступности: Он помогает пользователям с ограниченными возможностями или теми, кто использует клавиатурный ввод вместо мыши, понимать, какой элемент управления в данный момент активен.
  2. Повышения интерактивности: Визуальное отличие активных элементов делает интерфейс более дружелюбным и понятным для пользователя.
  3. Создания стилистических акцентов: Позволяет добавлять уникальные стилистические особенности для интерактивных элементов интерфейса, подчеркивая их функциональность.

Применение :focus в сочетании с другими псевдоклассами, такими как :hover и :active , позволяет создать комплексное визуальное представление различных состояний элементов управления, делая интерфейс более интуитивно понятным и приятным в использовании.

Однако, важно помнить, что стилизация элементов при помощи :focus должна быть достаточно заметной, чтобы пользователь мог легко идентифицировать фокусируемый элемент, но при этом не должна быть слишком навязчивой, чтобы не отвлекать от общего восприятия интерфейса.

  • 4 апреля 2024

Селектор по id

Селектор по id

CSS-селектор по идентификатору ( id ) позволяет стилизовать элементы веб-страницы, которые имеют уникальный идентификатор. Использование селектора по id делает возможным точечное применение стилей к конкретному элементу, не затрагивая другие элементы на странице.

Селектор по id обозначается знаком решетки ( # ) перед именем идентификатора. Идентификаторы в HTML должны быть уникальными в пределах документа, что делает селектор по id мощным инструментом для стилизации конкретных элементов.

Пример использования селектора по id :

Этот элемент уникален.
#uniqueElement

В этом примере элементу с id=»uniqueElement» присваиваются стили, делающие текст зеленым и увеличивающие размер шрифта до 20 пикселей. Эти стили будут применены только к этому конкретному элементу благодаря уникальности идентификатора.

Преимущества использования селектора по id :

  1. Точечная стилизация: Селектор по id позволяет применять стили к конкретному элементу, не влияя на другие элементы.
  2. Высокий приоритет: Стили, примененные через селектор по id , имеют более высокий приоритет, чем стили, примененные через классы и теги, что облегчает переопределение стилей.
  • Идентификатор должен быть уникальным в пределах всего HTML-документа.
  • Злоупотребление селекторами по id может сделать CSS-код сложным для поддержки, особенно в больших проектах. Рекомендуется использовать их с умом, предпочитая классы для стилизации, когда это возможно.
  • Селекторы по id могут увеличить специфичность CSS-правил, что иногда затрудняет их переопределение.

Использование селектора по id является мощным инструментом в арсенале веб-разработчика, позволяя точечно влиять на стиль отдельных элементов страницы.

  • 4 апреля 2024

Несколько селекторов через запятую

Несколько селекторов через запятую

Список селекторов в CSS представляет собой перечень селекторов, разделенных запятыми, что позволяет применить один и тот же набор стилей к различным элементам веб-страницы. Этот метод упрощает написание CSS-кода, избавляя от необходимости дублировать стили для каждого типа элементов отдельно.

Пример использования списка селекторов для стилизации заголовков, абзацев и элементов списка:

h1, h2, p, li

Применение списка селекторов эффективно во многих ситуациях, включая:

  • Применение базовых стилей текста (цвет, шрифт, размер) к различным типам элементов.
  • Сброс стандартных отступов для элементов списка, параграфов и других блочных элементов.
  • Установка общих стилей для интерактивных элементов, таких как кнопки и ссылки, в различных частях веб-страницы.

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

Списки селекторов улучшают читаемость и поддерживаемость CSS-кода, позволяя разработчикам более эффективно управлять стилями веб-страницы. Этот подход способствует сокращению дублирования кода и обеспечивает более упорядоченную структуру стилей.

  • 4 апреля 2024

Смежный селектор +

Смежный селектор +

Смежный селектор в CSS, обозначаемый знаком плюс ( + ), позволяет выбирать элемент, который является непосредственным соседом другого элемента на одном и том же уровне иерархии DOM. Этот селектор эффективен для применения стилей к элементу, находящемуся в точном последовательном порядке после другого элемента в коде HTML.

Пример применения смежного селектора:

h2 + p

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

При использовании смежного селектора важно учитывать следующие моменты:

  • Применяйте смежный селектор с умом, особенно в сложных структурах HTML, поскольку изменения в разметке могут повлиять на его работоспособность.
  • Смежный селектор идеален для случаев, когда необходимо модифицировать стиль элемента в зависимости от его расположения по отношению к предыдущему элементу на том же уровне.
  • Ограничьте использование смежного селектора для поддержания простоты и читаемости кода, особенно когда речь идет о крупных стилевых листах.

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

  • 4 апреля 2024

Селектор type

Селектор type

Селекторы типа в CSS используются для выбора HTML-элементов, соответствующих определённому имени тега. Они позволяют применять стили к элементам, не полагаясь на классы или идентификаторы, что делает их идеальными для установления базовых стилей для стандартных элементов страницы, таких как абзацы, заголовки и списки.

Пример использования селектора типа для стилизации всех абзацев (

) на странице:

В этом примере каждому абзацу на веб-странице задаётся шрифт Helvetica, межстрочный интервал в полтора раза больше размера шрифта и тёмно-серый цвет текста. Это базовая стилизация, которая может быть переопределена дополнительными селекторами, например, селекторами класса или идентификатора.

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

При работе с селекторами типа рекомендуется следовать принципам чистого кода и лучшим практикам веб-разработки:

  • Используйте селекторы типа для установления базовых стилей документа, таких как шрифт, размер текста и цвет.
  • Старайтесь не переопределять стили селекторов типа слишком специфичными селекторами без необходимости, чтобы избежать конфликтов и сложностей с каскадом.
  • Для обеспечения читаемости и поддерживаемости кода придерживайтесь соглашений о написании CSS, включая использование строчных букв для селекторов и свойств, добавление пробела перед открывающей фигурной скобкой и одного уровня отступа для свойств внутри правила.

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

  • 4 апреля 2024

Игры с бесконечностью, или зачем нам infinity в CSS

Игры с бесконечностью, или зачем нам infinity в CSS

�� Это перевод статьи Will Boyd из блога CodersBlock. Оригинал: https://codersblock.com/blog/playing-with-infinity-in-css/

В CSS есть константа Infinity. Когда я только узнал об этом, ко мне в голову сразу пришла гора абсурдных идей, как это использовать, среди которых была и пара неплохих.

Ну, мне так кажется.

Кстати, если что, infinity можно использовать только внутри calc() . Ну, поехали!

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • 5 марта 2024

Межстрочное расстояние в CSS. Свойство line-height

Межстрочное расстояние в CSS. Свойство line-height

line-height задает интерлиньяж, то есть расстояние между базовыми линиями соседних строк текста. Это свойство может влиять на читабельность текста и его восприятие.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Значение line-height можно указывать как в абсолютных единицах (например, px , pt ), так и в относительных ( em , % , без единицы измерения). Рекомендуется использовать относительные единицы, так как они позволяют сохранить масштабируемость и адаптивность текста.

  • line-height: 1.2; — относительное значение, не зависящее от размера шрифта.
  • line-height: 20px; — абсолютное значение, фиксированный размер интерлиньяжа.
  • line-height: 1.5em; — относительное значение, зависящее от размера шрифта элемента.
  • 4 марта 2024

Свойство text-align

Свойство text-align

Свойство text-align в CSS используется для определения горизонтального выравнивания текста внутри элемента.

�� Сегодня вам бесплатно доступны тренажёры по HTML и CSS.

Свойство text-align может принимать несколько значений, включая:

  • left — выравнивает текст по левому краю контейнера.
  • right — выравнивает текст по правому краю контейнера.
  • center — центрирует текст внутри контейнера.
  • justify — выравнивание текста по ширине. Оба края текста (левый и правый) будут выровнены по краям контейнера.

Пример использования свойства text-align :

Этот код выравнивает текст внутри всех параграфов ( ) по центру.

Для практики и улучшения своих навыков работы с text-align и другими свойствами CSS, рекомендуем пройти тренажёр. Он поможет лучше понять, как работает выравнивание текста, и даст возможность попрактиковаться в использовании различных значений свойства text-align .

  • 4 марта 2024

Saved searches

Use saved searches to filter your results more quickly

Cancel Create saved search

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

MovingX / lab6 Public

MovingX/lab6

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Go to file

Folders and files

Last commit message
Last commit date

Latest commit

History

View all files

Repository files navigation

МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ «САХАЛИНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ»

Лабораторная работа №6 «CSS»

Выполнил: Морошкин Максим Александрович

Проверил: Соболев Е. И.

г. Южно-Сахалинск
2023 год

Введение

Лабораторная работа по созданию скриптов на языке JavaScript.

Цели и задачи

1. Придумайте селектор, который выберет абзацы ’p’ внутри дивов ’div’.
2. Придумайте селектор, который выберет все ’h2’ внутри дивов ’div’.
3. Придумайте селектор, который выберет все абзацы ’p’ из элемента с > 4. Придумайте селектор, который выберет все ’h2’ из элемента с > 5. Выберите все элементы с классом bbb.
6. Выберите все элементы с классом bbb из элемента с > 7. Выберите все абзацы ’p’ с классом bbb.
8. Выберите все ’h2’ с классом bbb.
9. Выберите все абзацы ’p’ с классом bbb из элемента с > 10. Выберите все элементы с классом bbb и элементы с классом xxx одновременно.
11. Выберите все абзацы ’p’ с классом bbb и ’h2’ с классом xxx одновременно.
12. Выберите все абзацы ’p’ с классом bbb из и все абзацы ’p’ с классом xxx из одновременно.
13. Выберите все элементы из класса fff.
14. Выберите все абзацы ’p’ из класса fff.
15. Выберите все абзацы ’p’ с классом fff.
16. Выберите все элементы с классом bbb из класса fff.
17. Выберите все ’h2’ с классом bbb из класса fff.
18. Сделайте селектор, который выберет все ссылки из с состояния link и visited сделайте неподчеркнутыми и красными, а состояние hover — подчеркнутым и голубым.
19. Сделайте селектор, который выберет все ссылки с классом www, состояния link и visited сделайте подчеркнутыми и голубыми, а состояние hover — неподчеркнутым.
20. Сделайте селектор, который выберет все ссылки из с классом www. Цвета состояний выберите самостоятельно.
21. Сделайте селектор, который выберет все ссылки из с классом www. Цвета состояний выберите самостоятельно.
22-27. Повторите страницу по данному по образцу

Решение задач

pre> style> #test a:link, #test a:visited < color: red; text-decoration: none; >#test a:hover < color: blue; text-decoration: underline; >a.www:link, a.www:visited < color: blue; text-decoration: underline; >a.www:hover < text-decoration: none; >#test a.www:link,#test a.www:visited < color: red; text-decoration: none; >#test a.www:hover < color: blue; text-decoration: underline; >.eee a.www:link,.eee a.www:visited < color: blue; text-decoration: underline; >.eee a.www:hover < color: black; text-decoration: none; >style> --> div> p>Textp> div> --> div> h2>Headingh2> div> --> div id pl-s">test"> p>Textp> div> --> div id pl-s">test"> h2>Headingh2> div> --> div class pl-s">bbb">Textdiv> --> div id pl-s">test"> div class pl-s">bbb">Textdiv> div> --> p class pl-s">bbb">Textp> --> h2 class pl-s">bbb">Headingh2> --> div id pl-s">test"> p class pl-s">bbb">Textp> div> --> div class pl-s">bbb">Textdiv> div class pl-s">xxx">Headingdiv> --> p class pl-s">bbb">Textp> h2 class pl-s">xxx">Headingh2> --> div id pl-s">test"> p class pl-s">bbb">Textp> p class pl-s">xxx">Headingp> div> --> div class pl-s">fff">Textdiv> --> p class pl-s">fff">Textp> --> p class pl-s">fff">Textp> --> div class pl-s">fff"> div class pl-s">bbb">Textdiv> div> --> div class pl-s">fff"> h2 class pl-s">bbb">Headingh2> div> div id pl-s">test"> a href pl-s">#" class pl-s">www">Linka> a href pl-s">#" class pl-s">www">Visited linka> div> a href pl-s">#" class pl-s">www">Linka> a href pl-s">#" class pl-s">www">Visited linka> --> div id pl-s">test"> a href pl-s">#" class pl-s">www">Ссылка с классом www внутри элемента с >a> div> --> div class pl-s">eee"> a href pl-s">#" class pl-s">www">Ссылка с классом www внутри элемента с классом eeea> div> style> .frame < margin:auto; border: 2px dotted black; width: 500px; height: auto; text-align: justify; margin-bottom: 20px; >.task23 < margin-left: 10px; margin-top: 10px; margin-bottom: 10px; border: 1px solid red; width: 100px; height: 100px; >.task24 < margin-left: 10px; margin-top: 10px; margin-bottom: 10px; border: 2px dotted blue; width: 300px; height: 100px; >.task25 < margin-left: 10px; margin-top: 10px; margin-bottom: 10px; border: 2px dotted green; border-radius: 10px 20px 10px 20px; width: 200px; height: 200px; >.task26 < margin-left: 10px; margin-top: 10px; margin-bottom: 10px; border: 1px solid red; border-radius: 100px; width: 100px; height: 100px; >style> div class pl-s">frame"> p style pl-s">text-decoration: underline">Привет мир!p> p style pl-s">text-decoration: line-through">Привет мир!p> p style pl-s">text-decoration: overline">Привет мир!p> div> div class pl-s">frame"> div class pl-s">task23"> div> div> div class pl-s">frame"> div class pl-s">task24"> div> div> div class pl-s">frame"> div class pl-s">task25"> div> div> div class pl-s">frame"> div class pl-s">task26"> div> div> div class pl-s">frame"> p>a href pl-s">#" style pl-s">margin-left:10px; text-decoration:underline; color:green;">ссылкаa>p> p>a href pl-s">#" style pl-s">margin-left:10px; text-decoration:underline; color:red;">ссылкаa>p> p>a href pl-s">#" style pl-s">margin-left:10px; text-decoration:none; color:black;">ссылкаa>p> div> pre>
1 Задача CodeWars function add(. args)  if (args.length == 0)  return 0; > var sum = 0; for (var i = 0; i  args.length; i++)  sum += args[i] / (i + 1); > return Math.round(sum); 2 Задача CodeWars function arrayPacking(a)  var result = 0; for (var i = 0; i  a.length; i++)  result += a[i]  <(8 * i); > return result; > > 3 Задача function charToAscii(string) if (string.length === 0) return null; const hash = >; for (let i = 0; i  string.length; i++)  const char = string.charAt(i); if (/^[a-zA-Z]$/.test(char) && !hash.hasOwnProperty(char))  hash[char] = char.charCodeAt(0); > > return hash; > 5 Задача function titleToNumber(title)  let result = 0; for (let i = 0; i  title.length; i++)  const charCode = title.charCodeAt(i) - 64; result += charCode * Math.pow(26, title.length - 1 - i); > return result; > 6 Задача function maskify(str)  if (str.length  4)  return str; > else  return "#".repeat(str.length - 4) + str.slice(-4); > >

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

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