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

Институт естественных наук и техносферной безопасности
Кафедра информатики
Гусев Владислав Михайлович

Лабораторная работа №6.«CSS»
01.03.02 Прикладная математика и информатика

Научный руководитель
Соболев Евгений Игоревич

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

Введение

HTML — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора.

CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Также может применяться к любым XML-документам, например, к SVG или XUL.

Задачи CSS

1. Придумайте селектор, который выберет абзацы <p> внутри дивов <div>.
2. Придумайте селектор, который выберет все <h2> внутри дивов <div>.
3. Придумайте селектор, который выберет все абзацы <p> из элемента с id=test.
4. Придумайте селектор, который выберет все <h2> из элемента с id=test.
5. Выберите все элементы с классом bbb.
6. Выберите все элементы с классом bbb из элемента с id=test.
7. Выберите все абзацы <p> с классом bbb.
8. Выберите все <h2> с классом bbb.
9. Выберите все абзацы <p> с классом bbb из элемента с id=test.
10. Выберите все элементы с классом bbb и элементы с классом xxx одновременно.
11. Выберите все абзацы <p> с классом bbb и <h2> с классом xxx одновременно.
12. Выберите все абзацы <p> с классом bbb из id=test и все абзацы <p> с классом xxx из id=test одновременно.
13. Выберите все элементы из класса fff.
14. Выберите все абзацы <p> из класса fff.
15. Выберите все абзацы <p> с классом fff.
16. Выберите все элементы с классом bbb из класса fff.
17. Выберите все <h2> с классом bbb из класса fff.
18. Сделайте селектор, который выберет все ссылки из id=test, с состояния link и visited сделайте неподчеркнутыми и красными, а состояние hover - подчеркнутым и голубым.
19. Сделайте селектор, который выберет все ссылки с классом www, состояния link и visited сделайте подчеркнутыми и голубыми, а состояние hover - неподчеркнутым.
20. Сделайте селектор, который выберет все ссылки из id=test с классом www. Цвета состояний выберите самостоятельно.
21. Сделайте селектор, который выберет все ссылки из class=eee с классом www. Цвета состояний выберите самостоятельно.
22. Повторите страницу по данному по образцу:
23. Повторите страницу по данному по образцу:
24. Повторите страницу по данному по образцу:
25. Повторите страницу по данному по образцу:
26. Повторите страницу по данному по образцу:
27. Повторите страницу по данному по образцу:
28. Решить задачу на сайте https://www.codewars.com/kata/555de49a04b7d1c13c00000e
29. Решить задачу на сайте https://www.codewars.com/kata/588453ea56daa4af920000ca
30. Решить задачу на сайте https://www.codewars.com/kata/55e9529cbdc3b29d8c000016
31. Решить задачу на сайте https://www.codewars.com/kata/55968ab32cf633c3f8000008
32. Решить задачу на сайте https://www.codewars.com/kata/55ee3ebff71e82a30000006a
33. Решить задачу на сайте https://www.codewars.com/kata/5412509bd436bd33920011bc

Решения CSS

Файл 1.html

Файл 2.html

Файл 3.html

Файл 4.html

Файл 5.html

Файл 6.html

Файл 7.html

Файл 8.html

Файл 9.html

Файл 10.html

Файл 11.html

Файл 12.html

Файл 13.html

Файл 14.html

Файл 15.html

Файл 16.html

Файл 17.html

Файл 18.html

Файл 19.html

Файл 20.html

Файл 21.html

Файл 22.html

Файл 23.html

Файл 24.html

Файл 25.html

Файл 26.html

Файл 27.html

Файл 28.js

Файл 29.js

Файл 30.js

Файл 31.js

Файл 32.js

Файл 33.js

Результат HTML

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

   
2. Придумайте селектор, который выберет все <h2> внутри дивов <div>.

   
3. Придумайте селектор, который выберет все абзацы <p> из элемента с id=test.

   
4. Придумайте селектор, который выберет все <h2> из элемента с id=test.

   
5. Выберите все элементы с классом bbb.

   
6. Выберите все элементы с классом bbb из элемента с id=test.

   
7. Выберите все абзацы <p> с классом bbb.

   
8. Выберите все <h2> с классом bbb.

   
9. Выберите все абзацы <p> с классом bbb из элемента с id=test.

   
10. Выберите все элементы с классом bbb и элементы с классом xxx одновременно.

    
11. Выберите все абзацы <p> с классом bbb и <h2> с классом xxx одновременно.

    
12. Выберите все абзацы <p> с классом bbb из id=test и все абзацы <p> с классом xxx из id=test одновременно.

    
13. Выберите все элементы из класса fff.

    
14. Выберите все абзацы <p> из класса fff.

    
15. Выберите все абзацы <p> с классом fff.

    
16. Выберите все элементы с классом bbb из класса fff.

    
17. Выберите все <h2> с классом bbb из класса fff.

    
18. Сделайте селектор, который выберет все ссылки из id=test, с состояния link и visited сделайте неподчеркнутыми и красными, а состояние hover - подчеркнутым и голубым.

    
19. Сделайте селектор, который выберет все ссылки с классом www, состояния link и visited сделайте подчеркнутыми и голубыми, а состояние hover - неподчеркнутым.

    
20. Сделайте селектор, который выберет все ссылки из id=test с классом www. Цвета состояний выберите самостоятельно.

    
21. Сделайте селектор, который выберет все ссылки из class=eee с классом www. Цвета состояний выберите самостоятельно.

    
22. Повторите страницу по данному по образцу:

    
23. Повторите страницу по данному по образцу:

    
24. Повторите страницу по данному по образцу:

    
25. Повторите страницу по данному по образцу:

    
26. Повторите страницу по данному по образцу:

    
27. Повторите страницу по данному по образцу:

    
28. Решить задачу на сайте https://www.codewars.com/kata/555de49a04b7d1c13c00000e

    
29. Решить задачу на сайте https://www.codewars.com/kata/588453ea56daa4af920000ca

    
30. Решить задачу на сайте https://www.codewars.com/kata/55e9529cbdc3b29d8c000016

    
31. Решить задачу на сайте https://www.codewars.com/kata/55968ab32cf633c3f8000008

    
32. Решить задачу на сайте https://www.codewars.com/kata/55ee3ebff71e82a30000006a

    
33. Решить задачу на сайте https://www.codewars.com/kata/5412509bd436bd33920011bc

    

Вывод

В ходе выполнения лабораторной работы по CSS были рассмотрены различные селекторы, которые позволяют выбирать и стилизовать определенные элементы на веб-странице.