Найти область сайта, за которую отвечает div
Есть простой фокус - банально в css ищем этот див по названию и перекрашиваем его фон в какой-то яркий цвет. И сразу на странице будет хорошо видно области, за которые этот контейнер отвечает. div { background-color: mediumaquamarine; } </header> это по сути тот же див. Специально для упрощения для браузеров и поисковиков используется(чтобы поскорее обрабатывался) пысы. Разумеется, лучше не сам див перекрашивать, а присвоить нужному конкретному свой класс и уже его перекрасить.
Oтступы html, обнуление в css
Отступы в браузере по умолчанию плохо. Профессиональные разработчики убирают начальные настройки, чтобы контролировать отступы и размеры. В самом начале style.css создайте необычный селектор с перечислением: body, h1 { }. Внутри правила укажите свойство margin: 0. Имена элементов через запятую предписывают свойствам обращаться сразу и к body, и к h1. В этом случае вы обнулите внешний отступ сразу для двух элементов. Еще обнуляют font-size: 100%; font-weight: normal; единый для всех элементов размер шрифта и толщина шрифта со значением normal Браузер читает код сверху вниз и обнулять отступы надо вначале файла css Еще можно вот так: * { } - обычно сразу после обнуления. Это общий селектор, для всего задает. Лучше не злоупотреблять...
Позиция, размер, повтор фонового изображения css
Чаще всего для управления фоновым изображением хватает трёх свойств: background-size, background-repeat и background-position. background-size: cover; /* cover (англ. «накрыть») сожмёт или растянет картинку */ САМОЕ ПОПУЛЯРНОЕ И УНИВЕРСАЛЬНОЕ РЕШЕНИЕ background-size: contain; /* contain (англ. «содержать») сделает так, чтобы вся картинка уместилась */
Цвет фонового изображения, прозрачность в css
Цвет можно сделать прозрачным, дополнив RGB-палитру альфа-каналом, который устанавливает прозрачность. Пишем вместо rgb rgba - а и обозначает альфа-канал rgba(115, 170, 200, 0.5); - тут 0.5, половина прозрачности. 0.2 будет 20% ЦВЕТА и соответственно 80% прозрачности. Пишем через точку, а не через запятую. Можно без нуля /* один и тот же цвет */ rgba(115, 170, 200, 0.5); rgba(115, 170, 200, .5);
Сделать пятно на экране в css
Чтобы сделать такое произвольное "пятно" нужного нам размера можно просто после текста(в данном случае "правила верстки") делаем пустой контейнер div прямо в коде. Потом в css устанавливаем размер высоту и ширину. И цвет. div { width: 250px; height: 250px; background-color: rgb(255, 255, 255); } и если нужна прозрачность, то вместо rgb делаем rgba rgba(255, 255, 255, .3) тут 30% цвета(о.3) и 70% прозрачности например. ВОТ ТАКОЙ ВОТ ИНТЕРЕСНЫЙ ФОКУС
Наследование css
Стиль родительских элементов оказывает влияние на стиль дочерних. <!-- родительский --> <div> <!-- дочерний --> <p>Задача веб-дизайна — сделать не только красиво.</p> </div> если у р не задан размер, а в div задан, то берется из него. Главный родитель на веб странице - это элемент <body>. Не надо туда лишнего писать. И надо его держать повыше(сразу после сброса и обнуления стилей браузера. margin: 0; и т.д.). Бывают свойства наследуемые и ненаследуемые...
Обнуление отступов css. Убираем зазор-отступ между карточками div
Области из дивов ставим рядом друг с другом, делаем блочно-строчными например через какие-то свойства. Но остается зазор, отступ. Просто надо на уровень выше подняться. Карточки если делаем внутри <section> дивами(как рекомендуется), то присваиеваем этому родительскому элементу класс и в css задаем ему свойство ноль. <section class="content"> затем в стилях ноль ставим размер .content { font-size: 0px; } Как обнулить такой отступ - это очень популярный вопрос на стековерфлоу. Так что это лайфхак.
Section и class. Классы и секции
<section> для создания секций и разделов. Ведет себя как див, но сразу сообщает браузеру о своем назначении. Поисковики качественнее сайт прочитают. <section> <div></div> </section> Нужно для десяти разных <div> свои собственные отличающиеся друг от друга стили? Для этого классы Классы задают каждому элементу именной ярлык. Так, <div class="white-text"></div> позволит обращаться в стилях к элементу white-text, не затрагивая свойства других div. И этот же класс можно другим элементам задать, например <p>. Для того они в том числе и предназначены. Например, класс white-text — всем элементам с текстом белого цвета. <h1 class="white-text">Откуда к нам пришла зима</h1> <p class="white-text">Не знаешь ты, никто не знает</p> Текст будет...
box-sizing. Внутренний и внешний фокус элемента
Есть высота\ширина элемента, но за счет отступов она меняется. Можно вручную считать пиксели, высчитывать сколько из блоков на отступы со всех сторон уйдет. Чтобы не мучаться есть свойство box-sizing — оно определяет поведение границ и внутренних отступов. По умолчанию для всех элементов действует правило box-sizing: content-box, границы и внутренний отступ расширяют элемент. А если правило border-box, то границы и внутренний отступ отрисуются внутрь. КАК НА КАРТИНКЕ. * { box-sizing:border-box; } а так в стилях мы в самом начале для всех элементов сделали внутренний фокус
Содержимое страницы, отступы в тэгах, боксы
Модель любого блочного элемента: - содержимое с размерами width и height - внешние отступы, они же поля: margin - внутренние отступы padding - границы border Когда говорят «элемент 200 на 300», то имеют в виду размер содержимого ДО ГРАНИЦЫ включительно, margin сюда не входит. Короткая запись отступов в css: padding: 20px 15px 30px 15px; /* направление расстановки — ПО ЧАСОВОЙ СТРЕЛКЕ, начиная сверху */ /* 2 значения */ или еще короче, из двух значений: padding: 10px 20px; /* верх и низ — 10px, по бокам — 20px */ без всяких лефт, райт, топов. Margin аналогично. Граница элемента - это border border: 3px solid #000; - 3 пикселя, нечерчено, цвет такой-то border: 5px dashed rgba(250, 50, 50, .4); 5 пикселей, пунктир, красный полупрозрачный...