Css выравнивание текста по центру по вертикали: Выравнивание содержимого в ячейках — Знакомство с таблицами — HTML Academy — Вебджем.рф

Содержание

tasks/plants-part1.md at master · rolling-scopes-school/tasks · GitHub

Permalink

master

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Go to file

Luffi2539 [STAGE 0] Fix description (#895)

Latest commit 597013a

Dec 21, 2022 History

* fix links in plants task description
* fix description for plants
* remove redundant text
Co-authored-by: Viktar-Kavaliou <[email protected]>

3 contributors

Plants#1 — Фиксированная вёрстка

Start task	Deadline task	Start cross-check	Deadline cross-check
19. 12.2022	09.01.2023 00:00 UTC	09.01.2022	12.01.2022 00:00 UTC

Описание и требования задания

Вам необходимо сверстать страницу согласно макету — только Desktop
Ширина контента 1440рх не должна изменяться при изменении размера окна браузера.

Порядок работы

Задание выполняется в приватном репозитории школы.
Как работать с приватным репозиторием школы
От ветки main создайте ветку plants в ней создайте папку plants, в ней разместите файлы проекта
Выполните задание.
Проверьте соответствие вашей работы Требованиям к вёрстке
Cамостоятельно оцените свою работу согласно предложенным Критериям оценки, с учётом Особенностей проверки вёрстки на соответствие макету
Самооценку своей работы выведите в консоль браузера. Для этого подключите к файлу index. html файл index.js, в нём напишите функцию console.log(), в скобках в кавычках напишите самооценку по пунктам. Для переноса строк используйте символ \n
Создайте и замержите Pull Request из ветки plants в ветку gh-pages. Название Pull Request произвольное. Описывать данный Pull Request нет необходимости.
Через 10-15 минут после мержа, иногда больше, деплой вашей работы будет доступен по ссылке
https://rolling-scopes-school.github.io/GITHUB-USERNAME-JSFEPRESCHOOL2022Q4/plants/
в которой вместо GITHUB-USERNAME укажите свой никнейм на сайте GitHub
После завершения работы откройте Pull Request из ветки plants в ветку main. Название Pull Request дайте по названию задания. Описание Pull Request дайте по схеме Мержить данный Pull Request не нужно.

Ссылку на деплой вашей работы засабмитьте в rs app раздел «Cross-Check Submit»
После дедлайна таска стартует кросс-чек. Продолжительность кросс-чека три дня. Для получения балла за таск необходимо проверить все присланные на проверку работы и засабмитить в rs app результат проверки.

Требования к вёрстке

Вёрстка валидная +10
- для проверки валидности вёрстки используйте сервис https://validator.w3.org/
- валидной вёрстке соответствует надпись «Document checking completed. No errors or warnings to show.» В таком случае баллы за пункт требований выставляем полностью.
- если есть предупреждения — warnings, но нет ошибок — errors, выставляем половину баллов за пункт требований
Вёрстка семантическая +20
В коде странице присутствуют следующие элементы (указано минимальное количество, может быть больше):
- <header>, <main>, <footer> +3
- пять элементов <section> (по количеству секций) +3
- только один заголовок <h2> +3
- четыре заголовка <h3> (количество секций минус одна, у которой заголовок <h2>) +3
- один элемент <nav> (панель навигации) +3
- два списка ul > li > a (панель навигации, ссылки на соцсети) +3
- пять кнопок <button> +2
Вёрстка соответствует макету +48
- блок <header> +6
- секция welcome +7
- секция about +7
- секция service +7
- секция prices +7
- секция contacts +7
- блок <footer> +7
Требования к css + 12
- для построения сетки используются флексы или гриды +2
- при уменьшении масштаба страницы браузера вёрстка размещается по центру, а не сдвигается в сторону +2
- фоновый цвет тянется на всю ширину страницы +2
- иконки добавлены в формате . svg. SVG может быть добавлен любым способом. Обращаем внимание на формат, а не на способ добавления +2
- изображения добавлены в формате .jpg или .png +2
- есть favicon +2
Интерактивность, реализуемая через css +20
- плавная прокрутка по якорям +5
- cсылки в футере при нажатии на них ведут на гитхаб автора проекта и на страницу курса https://rs.school/js-stage0/ +5
- интерактивность включает в себя не только изменение внешнего вида курсора, например, при помощи свойства cursor: pointer, но и другие визуальные эффекты, например, изменение цвета фона или цвета шрифта. Если в макете указаны стили при наведении и клике, для элемента указываем эти стили. Если в макете стили не указаны, реализуете их по своему усмотрению, руководствуясь общим стилем макета +5
- обязательное требование к интерактивности: плавное изменение внешнего вида элемента при наведении и клике не влияющее на соседние элементы +5

Критерии оценки

Максимальная оценка за задание 100 баллов

Баллы за пункты требований указаны в разделе Требования к вёрстке

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

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

Особенности проверки вёрстки на соответствие макету

допускается отклонение вёрстки от макета до 10px по горизонтали и вертикали, если соблюдается визуальное сходство вёрстки и макета. В случае если пиксель перфект превысил данное расхождение то баллы за 3 пункт проверки (верстка соответствует макету) обрезаются на половину за каждый не соответствующий блок (все блоки превысили — 24 балла максимум, только header выпал — 45 баллов максимум)
разрешены и даже приветствуются правки размеров и расположения криво нарисованных блоков
в качестве инструмента для проверки соответствия вёрстки макету используйте расширение PerfectPixel

при проверке вёрстки при помощи расширения PerfectPixel в первую очередь убедетесь, что в расширении выставлен масштаб 1, в браузере и операционной системе — масштаб 100%
если разрешение экрана 1440рх и больше, для проверки вёрстки на соответствие макету достаточно вручную выставить макет по верхнему левому углу направляющих
если разрешение экрана меньше 1440рх, для проверки используем device toolbar браузера Google Chrome в режиме responsive
каждый блок и секция рассматриваются по раздельности, т. е. недочеты предыдущего блока не переносятся на следующий, а при переходе проверки на следующий блок, мы его выравниваем с наложенным изображением
относительно текста проверяем его выравнивание по левому краю, отступы до границы блока. Размеры текста проверяются только по высоте. Отличие в ширине слов и отступах между буквами при сопоставлении макета и вёрстки не считается ошибкой, если используется правильный шрифт с правильно указанными свойствами

Как сабмитить задание

Задание Plants#1 проверяется в ходе кросс-чека.
После выдачи задания, но до наступления дедлайна зайдите в rs app https://app.rs.school/, выберите Cross-Check: Submit, в выпадающем списке выберите название задания, в поле Solution URL добавьте ссылку на задеплоенную страницу с вёрсткой, нажмите кнопку Submit.

Проверка задания Plants#1

форма для кросс-чека (Plants#1): https://rolling-scopes-school.github.io/checklist/
инструкция по проведению cross-check: https://docs.rs.school/#/cross-check-flow

CSS/Стили таблиц/выравнивание по ячейкам

Браузер

Свойство text-align задает горизонтальное выравнивание текста, а свойство vertical-align задает вертикальное выравнивание.

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

  тд {
выравнивание текста: по центру;
вертикальное выравнивание: сверху;
}

Собственность	Значение	Пояснение
выравнивание по тексту (по горизонтали)	осталось	выравнивается по левому краю
	центр	выравнивается по центру
	справа	выравнивается по правому краю
	выравнивание	выравнивает текст
выравнивание по вертикали (по вертикали)	базовый уровень	соответствует базовому уровню
	верх	выравнивается по верхнему краю
	средний	выравнивается по середине
	снизу	выравнивается по нижнему краю

Значение выравнивания регулирует пробелы между словами, чтобы выравнивать как левую, так и правую сторону. (Однако последняя строка не по ширине.)

О базовой линии

Пример

Горизонтальное выравнивание


<голова>
Указатель тегов
<тип стиля="текст/CSS">
Таблица {
граница: 2px #2b2b2b сплошная;
ширина: 100%;
высота: 150 пикселей;
}
тд {
граница: 2px #2b2b2b сплошная;
ширина: 25%;
}
  #example1 { выравнивание текста: по левому краю; }
#example2 { выравнивание текста: по центру; }
#example3 { выравнивание текста: вправо; } 


<тело>
<таблица>

По умолчанию
 id="example1"  >Слева
 id="example2"  >Центр
 id="example3"  >Право

Выход

По умолчанию

Левый

Центр

Правый

Выравнивание по вертикали


<голова>
Указатель тегов
<тип стиля="текст/CSS">
Таблица {
граница: 2px #2b2b2b сплошная;
ширина: 100%;
высота: 150 пикселей;
}
тд {
граница: 2px #2b2b2b сплошная;
ширина: 25%;
}
  #example4 { вертикальное выравнивание: сверху; }
#example5 { вертикальное выравнивание: среднее; }
#example6 { вертикальное выравнивание: дно; } 


<тело>
<таблица>

По умолчанию
 id="example4"  >Сверху
 id="example5"  >Середина
 id="example6"  >Нижняя часть

Выход

По умолчанию

Топ

Средний

Дно

Выравнивает текст

 <голова>Указатель тегов <тип стиля="текст/CSS"> Таблица {
граница: 2px #2b2b2b сплошная;
ширина: 100%;
}
тд {
граница: 2px #2b2b2b сплошная;
ширина: 50%;
}  #example7 { text-align: justify; }    <тело> <таблица>Это пример текста.

Css выравнивание текста по центру по вертикали: Выравнивание содержимого в ячейках — Знакомство с таблицами — HTML Academy