Как сделать оформление сайта в css
Добавил пользователь Алексей Ф. Обновлено: 04.10.2024
Ранее я рассказывал о том, как сделать html сайт в блокноте. В той статье я упомянул о каскадные таблицы стилей. Пришло время рассказать о них подробнее.
В статье, о которой я упомянул выше, мы создавали html страницу, используя для этого html теги. С помощью тегов мы разметили основную структуру документа. В итоге мы получили готовую страницу сайта. Свое предназначение она, разумеется, выполняет, но при этом выглядит, мягко говоря, непрезентабельно. Сегодня мы займемся ее оформлением. И на помощь нам придут CSS (читается как си-эс-эс ), что расшифровывается как Cascading Style Sheets в переводе на русский – каскадные таблицы стилей.
Основы CSS
Итак, что же такое CSS и с чем их едят? Как Вы, наверно, знаете оформление текста можно задавать с помощью атрибутов html. Однако, это не удобно. Представьте, что у Вас большой сайт из нескольких сот, иди даже тысяч страниц. Вдруг Вам захотелось поменять оформление. Если Вы задали оформление непосредственно в html, то Вам придется изменить код сразу на всех страницах. Именно поэтому было решено разделить структуру документа и его оформление. С помощью css Вы можете задавать оформление сразу всех страниц сайта. Теперь для того, чтобы поменять, скажем, цвет заголовков, Вам не нужно переписывать код на каждой странице, а достаточно просто изменить одну строчку.
Как прикрепить CSS к сайту
Существует несколько способов прикрепить код css к html сайту.
- Стиль оформления прописывается непосредственно внутри тега html с помощью атрибута style.
- Стиль оформления встраивается в html документ внутри тега с помощью элемента Style.
- Стиль оформления выноситься в отдельный файл.
На практике обычно применяется последний способ. Его мы и рассмотрим поближе.
Пример оформления сайта с помощью CSS
Итак, для примера создадим html страницу, как мы это делали раньше. Теперь немного усложним код.
Как видите, по сравнению с прошлым разом, я внес в код несколько изменений:
1. В теге была добавлена строчка:
2. Название сайта было заключено в тег
. Данный тег говорит нам, что название будет заключено в блок. Размеры, отступы, фон, цвет текста внутри блока и многое другое мы сможем прописать в файле style.css.
Наша html страничка готова. Теперь осталось сделать сам файл стилей. Делается он точно также. В блокноте создается текстовый файл, который мы назваем style. После этого, мы меняем ему расширение с txt на css. Помещаем мы его, разумеется, в ту же самую папку, что и наш файл html.
В файл style.css мы записываем следующий код:
Теперь открываем нашу страничку (если страничка уже открыта у Вас в браузере, то ее необходимо обновить). Как видите, страничка изменилась.
Теперь давайте разберемся, с кодом, которым мы задали оформление.
Оформление можно задать не только для тега но и для любого другого тега, например, для тега
. Помимо цвета фона мы можем задать для тегов div размеры, расположение, способ взаимодействия с другими элементами странички, отступы, фоновую картинку, цвет и размер текста, и многое другое. При этом, указанное оформление будет применяться для всех тегов
Для того, чтобы задать оформление для данного тега в файле style.css мы перед его названием ставим точку, после чего точно так же задаем оформление в фигурных скобках. В данном случае мы задали цвет фона и отступы внутрь в пикселях.
Заключение
Разумеется, я не смогу в одной статье рассказать обо всех нюансах оформления сайта. Я и не ставил перед собой такую задачу. В этой статье я хотел лишь объяснить основные принципы, на которых строится верстка сайта. И я надеюсь, у меня это получилось. Как и всегда, буду рад Вашим комментариям.
Похожие записи
Создание сайта самостоятельно с нуля
Всем привет. Сегодня на страницах Лучшего Сео Блога я решил вернуться к основам и рассказать про создание сайта самостоятельно с нуля. Думаю, это будет полезно для людей, которые хотели бы начать зарабатывать в интернете, но не знают с чего начать.
Что такое конверсия
Всем привет! Я продолжаю свой рассказ об основах интернет-маркетинга. Сегодня я хочу рассказать о еще одном очень важном термине, который необходимо знать, для того, чтобы зарабатывать в интернете. Я говорю о конверсии. Что такое конверсия Конверсия – это отношение числа тех, кто оформил заказ, воспользовался услугой или предложением (или вообще совершил какое-нибудь заранее запланированное действие)…
Что такое Alexa Traffik Rank
Привет читателям Лучшего Сео Блога. Сегодня мы поговорим о важнейшем показателе сайта , который имеет большое значение как в иностранном, так и в русском сегменте интернета, а именно Alexa Traffik Rank. В этой статье я хочу дать его краткое описание, а также ответить на вопросы, как он рассчитывается, для чего он нужен и как его…
Подбор цвета html. Создаем цветовую схему Вашего сайта
Всем привет! Если Вы когда-нибудь пробовали самостоятельно сделать дизайн для сайта, то Вы наверняка сталкивались с проблемой подбора цвета. В свое время, столкнулся с этой проблемой и я. В этой статье я расскажу о том, как я с этим справился. Качественно подобрать цвета для сайта в html для новичка очень сложная задача. Когда я создавал…
Что такое тошнота текста и как её проверить: список лучших сервисов
Привет всем. Сегодня на страницах Лучшего СЕО Блога мы снова будем говорить о том, как сделать Ваш ресурс лучше. Я расскажу о таком важнейшем факторе внутренней оптимизации как тошнота текста. Что такое тошнота текста Тошнота статьи – это показатель, который отражает количество использования какого-либо слова в тексте. Тошнота бывает двух видов: классическая и академическая. Классическая…
Как в блокноте с нуля создать простой html сайт: пошаговая инструкция с картинками
Всем привет. Сегодня мы быстро пробежимся по основам html и узнаем о том, какие теги используются для создания простенькой html-страницы. Кроме того, мы узнаем, как создать настоящий html сайт с нуля в простейшем текстовом редакторе блокноте.
В этой статье я хочу рассказать о четырех различных способах создания макетов с несколькими столбцами. Каждый способ имеет свои плюсы и минусы. Чтобы продемонстрировать, как эти макеты работают и выглядят, я создал простой сайт, на котором используются HTML-таблицы , свойство CSS float , CSS-фреймворк и флексбокс.
Первый день новой жизни
В этой статье мы используем четыре различных способа верстки сайта:
- Таблицы . Вам даже не нужно использовать отдельный файл стилей. И, что более важно, они не ломаются.
- Float . Мы говорим о свойстве CSS . Это довольно распространенный способ создания макета веб-страницы. И в этом случае нам необходимо будет использовать отдельную таблицу стилей. Файл HTML используется, только чтобы определить контент веб-страницы. Если вы хотите выровнять контент, то должны использовать файл CSS .
- CSS-фреймворки . Они работают так же, как JavaScript-фреймворки . Подключите исходный файл в заголовке (например,
- ), и он готов к работе! Вам не нужно задавать значения свойств самостоятельно. Для этого используются классы, которые разработчики фреймворка приготовили для вас.
- Флексбокс . Флексбокс — это короткое название CSS Flexible Box Layout Module . Это более новая по сравнению со свойством float технология. Основной принцип флексбокс — предоставить контейнеру возможность изменять ширину, высоту и порядок содержащихся в нем элементов. Если вы хотите наилучшим образом заполнить все свободное пространство, нужно использовать для верстки div флексбокс. Например, для охвата всех типов устройств и размеров экрана. Плавающий контейнер будет расширять содержащиеся в нем элементы, чтобы заполнить весь экран.
Теперь пора попробовать каждый из них.
Способы создания
Это дизайн моего сайта:
Таблицы
Для создания шапки сайта я использовал свойство position: relative . Давайте попробуем сделать это с нуля, используя табличную верстку.
Вот мой HTML-код :
И вот, что я получил:
Как видите, это не та же самая шапка. Она выглядит знакомо, но ее расположение немного изменилось. И вот почему. Вы знаете, что таблицы отлично подходят для симметричного позиционирования. Но для других целей они подходят не так хорошо. Также обратите внимание на громоздкость кода. Но у таблиц есть одна полезная особенность. Вот какую хитрость мы можем сделать:
И вы увидите, что макет стал выглядеть так:
Таким образом, можно легко определить, что где находится, если запутались.
Теперь плохая новость. Еще раз посмотрите на HTML-код . Это простая таблица, но представьте, как она будет выглядеть с десятками ячеек. Вот какой исходный код у меня:
В этом случае вам нужно использовать блочную верстку сайта с помощью CSS . Применив что-то наподобие этого:
Вы указываете переместить
на 100 пикселей вниз и на 100 пикселей вправо по отношению к его исходной позиции. С помощью этих свойств легко перемещать текст на странице. Можно перемещать его из одного угла в другой, чтобы определить, какое положение является наилучшим. Это лучше, чем таблица.
Float
Свойство float широко применяется при блочной верстке сайта. Мы будем использовать это свойство для вывода основной области размещения контента. Небольшой пример поможет вам лучше понять, как это работает:
В нем есть три разноцветных элемента
И вот, что у нас получилось:
При верстке слоями вы указываете через свойство float , что хотите, чтобы ваш элемент
был плавающим. Затем задаете для него направление смещения. Обычно это float: left или float: right . Когда вы указываете элементу
Следующий плавающей элемент будет смещаться, пока не встретит первый, и так далее. Следующий за плавающим элемент будет обтекать его как вода! Но если вы не хотите спускать все свои объекты « на воду «, можно использовать свойство clear . Оно определяет, какие стороны элемента не должны обтекать плавающие элементы.
Вот как выглядит часть моего макета для основного контента:
Теперь давайте сделаем ее плавающей:
Мы добавили несколько стилей и получили что-то вроде этого:
У нас есть большой блок для статей и блок поменьше для новостей. Мы использовали свойство float: left и для изображений. Обратите внимание, как они обтекаются тегом
. Этот макет выглядит, как ваш любимый журнал.
CSS-фреймворки
Если вы немного ленивы
Если у вас нет времени возиться с кодом при CSS верстке , можно использовать один из CSS-фреймворков . В нашем примере мы используем Bootstrap . Для этого нужно скачать его и подключить в HTML-файле .
Bootstrap содержит сетку, которая состоит из 12 равных по размеру столбцов. HTML-элементы упорядочиваются так, чтобы охватывать различное количество столбцов. Таким образом, создаются пользовательские макеты. Каждая часть контента выравнивается относительно этой сетки через указанное количество столбцов, на которые они растягиваются.
В этом примере мы создали строку. После этого поместили в нее два равных по размеру столбца. Каждый из них охватывает шесть из двенадцати доступных столбцов.
Далее мы создаем раздел « Скоро в прокате «. Он будет содержать четыре постера фильмов. Путем несложных математических вычислений определяем, что каждый из них будет охватывать по три столбца.
Я также добавил класс thumbnail , чтобы сделать постеры красивее. Он также содержится в Bootstrap .
И вот, что я получил:
Выглядит неплохо. И при верстке сайта из PSD вам даже не нужно редактировать файл CSS . Но вы не видите, что происходит внутри.
Флексбокс
Классика завтрашнего дня
Мы будем использовать флексбокс, чтобы создать раздел сайта « Бокс-офис «. Вот HTML-код :
Вот CSS-код для контейнера “ boxoffice ”:
Теперь пришло время создать гибкий контейнер. Для этого нужно задать для элемента display: flex . Согласно правилам верстки, все элементы флексбокса располагаются вдоль главной и поперечной осей:
Для флексбокса задаются два типа свойств. Первый используется для управления гибким контейнером, второй — для заполнения гибких элементов. Рассмотрим подробно первый тип.
По умолчанию, главная ось горизонтальная, поэтому элементы будут растягиваться в ряд. Для изменения основной оси мы можем использовать свойство flex-direction . Оно может принимать следующие значения: row , row-reverse , column и column-reverse . Мы будем использовать значение column . Давайте также добавим свойство height . Для чего это нужно, вы поймете чуть позже:
Вот как выглядит наш небольшой бокс-офис:
Мы использовали свойство height , потому что не хотим, чтобы контейнер флексбокса перекрывал изображение стрелки в нижней части фона.
Флексбокс также дает возможность вносить изменения в содержимое без изменения HTML-файла . Например, если вы хотите поменять расположение элементов на противоположное, вы можете изменить значение flex-direction на columns-reverse . Это изменит направление флексбокса на противоположное. Но вам нужно будет также изменить порядок расположения элементов внутри контейнера.
Для этого мы используем свойство justify-content . Доступные для него значения: flex-start , flex-end , center , space-between и space-around . Для него нужно установить значение justify-content , которое эквивалентно flex-end .
И вот каким образом отразились эти изменения:
Также можно перемещать элементы вдоль поперечной оси. Для этого используется свойство align-items. Вы можете задать для него следующие значения: flex-start , flex-end , center , baseline или stretch .
Чтобы использовать его, добавьте свойство в селектор флексбокса:
Все элементы сместятся к правому краю:
Есть еще одно полезное свойство — flex-wrap . Представьте, что бокс-офис быстро увеличивается. Что произойдет, если он станет больше, чем контейнер? Ничего плохого, если вы используете свойство flex-wrap .
Попробуйте добавить следующий код:
И вот, что в результате получится:
Как видите, элементы теперь укладываются в несколько столбцов. Значение по умолчанию для этого свойства – nowrap . При его применении элементы будут располагаться в один столбец ( или строку — это зависит от значения flex-direction ). Можно использовать значение wrap-reverse . Тогда элементы будут располагаться в обратном порядке.
Есть много полезных свойств. С их помощью вы можете изменять параметры каждого отдельно взятого элемента контейнера. Например, свойство order позволяет изменять порядок размещения элементов без необходимости вносить изменения в HTML-код .
Какой из способов выбрать?
Таблицы . В валидной верстке страниц таблицы не применяются. Они делают код грязным. Таблицы не так удобны в использовании, как может казаться. Если вы все еще не решили для себя, нужно ли использовать таблицы для макета страницы, то посмотрите на этот сайт .
Но они могут быть полезны, если речь идет о верстке электронных писем. Насчитывается не так уж много браузеров , которые люди используют в наше время, зато почтовых агентов просто огромное количество. Стационарные, онлайн и мобильные приложения используют различные движки отображения. HTML-таблицы выглядят одинаково во всех из них. Вот почему это отличный вариант для верстки электронных писем.
Float . Свойство float является наилучшим выбором, если у вас не слишком высокие требования. Это простой способ сделать ваш сайт более привлекательным. Его применение для изображений является, как по мне, признаком хорошего тона. Только нужно помнить, как работают свойства float и clear . Этого достаточно для начала.
Говоря о его недостатках, мы должны признать, что плавающие элементы привязаны к потоку документа, а это может существенно уменьшить его гибкость.
CSS-фреймворки . Если нужно создать макет быстро, используйте фреймворки. На сегодняшний день их много. Среди них выберите тот, который вам больше подходит.
Флексбокс . Придется потратить некоторое время, чтобы узнать, как он работает. Думаю, вы уже поняли, насколько удобны флексбоксы для управления отдельными элементами.
Но, как я уже сказал, это относительно новая функция CSS . Поэтому нужно учитывать ее поддержку браузерами . Вот подборка ошибок , которые мне удалось найти, и возможные пути их решения.
CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. Основы CSS помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определённом месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?
Так что же такое CSS?
Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки - это язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать все элементы абзаца на HTML странице и изменить текст внутри них с чёрного на красный, вы должны написать этот CSS:
Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как style.css в вашей папке styles .
Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел Работа с файлами и Основы HTML, чтобы узнать, что вам нужно сделать в первую очередь.)
-
Откройте ваш файл index.html и вставьте следующую строку куда-нибудь в шапку, между и тегами:
Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!
Анатомия набора правил CSS
Давайте взглянем на вышеупомянутый CSS немного более подробно:
Вся структура называется набором правил (но зачастую для краткости "правило"). Отметим также имена отдельных частей:
Селектор (Selector) Имя HTML-элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор. Объявление (Declaration) Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать. Свойства (Properties) Способы, которыми вы можете стилизовать определённый HTML-элемент (в данном случае, color является свойством для элементов
). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле. Значение свойства (Property value) Справа от свойства, после двоеточия, у нас есть значение свойства, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений color , помимо red ).
Обратите внимание на важные части синтаксиса:
- Каждый набор правил (кроме селектора) должен быть обёрнут в фигурные скобки ( <> ).
- В каждом объявлении необходимо использовать двоеточие ( : ), чтобы отделить свойство от его значений.
- В каждом наборе правил вы должны использовать точку с запятой ( ; ), чтобы отделить каждое объявление от следующего.
Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:
Выбор нескольких элементов
Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделённых запятыми. Например:
Разные типы селекторов
Существует множество различных типов селектора. Выше мы рассматривали только селектор элементов, который выбирает все элементы определённого типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространённых типов селекторов:
Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем Руководстве селекторов (en-US).
Шрифты и текст
Теперь, когда мы изучили некоторые основы CSS, давайте добавим ещё несколько правил и информацию в наш файл style.css , чтобы наш пример хорошо выглядел. Прежде всего, давайте сделаем, чтобы наши шрифты и текст выглядели немного лучше.
Примечание: Все в CSS документе между /* и */ является CSS комментарием, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете.
(en-US) , , и). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения:
Вы можете настроить значения px так, как вам нравится, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:
Блоки, блоки и ещё раз блоки
Одна вещь, которую вы заметите в написании CSS, заключается в том, что многое из этого касается блоков - настройка их размера, цвета, положения и т.д. Большинство HTML-элементов на странице можно рассматривать как блоки, расположенные друг над другом.
Не удивительно, макет CSS основан, главным образом, на блочной модели (box model). Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:
- padding , пространство только вокруг контента (например, вокруг абзаца текста)
- border , сплошная линия, которая расположена рядом с padding
- margin , пространство вокруг внешней стороны элемента
В этом разделе мы также используем:
- width (ширину элемента)
- background-color , цвет позади контента и padding элементов
- color , цвет контента элемента (обычно текста)
- text-shadow : устанавливает тень на тексте внутри элемента
- display : устанавливает режим отображения элемента (пока что не волнуйтесь об этом)
Итак, давайте начнём и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.
Изменение цвета страницы
Это правило устанавливает цвет фона для всей страницы. Измените код цвета сверху, на цвет который вы выбрали при планировании вашего сайта.
Разбираемся с телом
Теперь для элемента. Здесь есть немало деклараций, так что давайте пройдём через них всех по одному:
Позиционирование и стилизация нашего заголовка главной страницы
Вы, возможно, заметили, что есть ужасный разрыв в верхней части тела. Это происходит, потому что браузеры применяют некоторый стиль по умолчанию для элемента
Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.
Здесь, мы использовали одно довольно интересное свойство - это text-shadow , которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:
- Первое значение пикселей задаёт горизонтальное смещение тени от текста — как далеко она движется поперёк: отрицательное значение должно двигать её влево.
- Второе значение пикселей задаёт вертикальное смещение тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить её вверх.
- Третье значение пикселей задаёт радиус размытия тени — большее значение будет означать более размытую тень.
- Четвёртое значение задаёт основной цвет тени.
И вновь попробуйте поэкспериментировать с различными значениями, чтобы посмотреть, что вы можете придумать.
Центрирование изображения
В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать margin: 0 auto уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что ещё. Элемент является блочным, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются строчными элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью display: block; .
Примечание: Не стоит беспокоиться, если вы ещё не понимаете display: block; и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве display.
Заключение
Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете посмотреть нашу версию здесь):
Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на Github.
Здесь мы узнали только самую поверхность CSS. Чтобы узнать больше, перейдите на нашу страницу изучения CSS.
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Сборник из простых решений на CSS, которые пригодятся при оформлении сайта.
Данная заметка дополняемая
1. Адаптивное видео (шириной 100%)
Данный способ подходит для вставки видео через фрейм, как например, с ВК или Youtube.
2. Изменение фона выделенного текста
К примеру, если у вас красный или зеленый сайт, то стандартное синее выделение лучше заменить.
3. Запрет выделения текста
Данным способом можно не только мешать посетителю выделять текст, но и помогать выделять только нужное
4. Разделение текста на несколько колонок
Чтобы разделить текст или список элементов на несколько колонок, используется свойство column-count
5. Удаление пробелов между блочно-строчными элементами
Между блочно-строчными элементами в браузере появляются пробелы, если HTML-код форматируется как обычно. Как вариант, можно написать код в одну строку, но многие CMS сами отформатируют код, сделая переносы.
Для решения проблемы, нужно установить нулевой шрифт для списка и нужного размера для его элементов.
6. Подключение нужного стиля в зависимости от разрешения экрана
Для удобства работы со стилями, можно для каждого устройства подключать свои
7. Показ адреса ссылки при печати
Для того, чтобы видеть адреса ссылок в распечатанном документе, нужно добавить стиль:
8. Запрет события мыши
Чтобы запретить мыши реагировать на элементе используется свойство:
Например, чтобы не цеплялись и не перетаскивались картинки.
9. Прокрутка фонового изображения вверх
Если изображение имеет большой размер по вертикали, а его нужно уместить в небольшой по высоте блок, то его можно прокручивать при наведении мыши:
10. Деление блока на равные колонки
Чтобы разделить блок на произвольное кол-во равных по ширине колонок, используем:
Нужное кол-во блоков с классом block помещаем в контейнер container и получим:
11. Тень для изображений на прозрачном фоне
Чтобы добавить правильную тень к изображению на прозрачном фоне используем фильтр drop-shadow вместо box-shadow:
box-shadow
filter: drop-shadow
12. Якоря для ссылок при фиксированном хедере
Если на сайте присутствует фиксированный хедер, то при переходе по ссылке на закладку часть нужного нам контента будет им перекрыта. Для того чтобы сдвинуть контент немного вниз используем такой якорь:
и стиль для него:
13. Регулярные выражения
Если нужно задать стиль ко всем элементам с классами, которые содержат определенный набор символов, то используется регулярное выражение вида: [class*=atuin] <> , при котором стили будут применены ко всем классам с именами, которые содержат atuin
Читайте также: