Как сделать плюс в css
Обновлено: 07.07.2024
Всем привет, с вами Сергей Никонов и в этой статье я расскажу про CSS-селекторы и как с помощью них задавать CSS-стили для вашего сайта. Мы рассмотрим различные способы и правила, как с помощью CSS-селекторов задавать стили для HTML-страницы.
Это один из уроков курса HTML/CSS Advanced и если вы хотите научиться верстать веб-сайты на профессиональном уровене, я рекомендую проходить этот курс на сайте FructCode с интерактивными упражнениями для закрепления ваших знаний полученных из курса верстки сайтов.
Только на сайте FructCode вы можете найти актуальных версии моих курсов!
Содержание
Что такое CSS-селекторы (CSS Selectors)
CSS-селекторы - это специальные выражения описанные с помощью CSS (каскадные таблицы стилей), которые задают правила, как браузеру применять CSS-стили для HTML-элементов, которые определяются внутри блока CSS-стилей.
На первый взгляд вам может показаться, что определение CSS-селекторов сложное и непонятное. Но не волнуйтесь, на самом деле на практике все намного проще, чем кажется. И давайте сейчас на простых примерах рассмотрим что такое CSS-селекторы.
Видео Что такое CSS-селекторы: Способы задавать стили для HTML-элементов
Кстати, не забудь подписаться на наш YouTube канал FructCode, где вы можете найти много полезных обучающих видео о верстке сайтов.
Универсальный CSS-селектор * (звездочка)
С помощью универсального CSS-селектора * (звездочка) вы можете задавать правила какие CSS-стили применять сразу ко всем HTML тегам.
Пример кода, как задать с помощью универсального CSS-селектора * (звездочка) стили для всех HTML-элементов.
See the Pen BaWqwVm by Sergey Nikonov (@sergey-nikonov) on CodePen.
В итоге, ко всем HTML-тегам на странице, включая h1, span, div и другим применятся CSS-стили: размер шрифта 30px, цвет текста красный.
Универсальный CSS-селектор используется достаточно частно при создании верстки сайтов и вот почему. Дело в том, что пользователи используют различные браузеры: Google Chrome, Mozilla Firefox, Safari, Opera, Edge, различные мобильные браузеры и даже Internet Explorer старых версий. И каждый из браузеров может задавать свои CSS-стили для HTML-элементов по умолчанию. И та же HTML-форма будет выглядеть в разных браузерах по-разному.
И для того, чтобы ваш веб-сайт соответствовал макету дизайна сайта, обычно используют сброс стандартных стилей (reset css), которые задают браузеры. Reset CSS представляет набор CSS-стилей, который подключается к HTML-странице, в котором прописаны правила отображения для всевозможных HTML-элементов.
При применении Reset CSS или Normalize CSS, HTML-элементы выглядит примерно одинаково в большинстве браузеров.
CSS-селекторы по классу (Class selectors)
С помощью данного css-селектора вы можете задавать стили для HTML элементов у которых установлен тот или иной class.
Простой пример CSS-селектора по классу:
Запись CSS-стилей через точку "." и без пробелов
Когда вы задаете CSS-стили через точку "." и без пробелов (как в примере ниже) - это обозначает, что CSS-стили применятся ко всем тегам
, у кого установлен класс .color. При этом, даже если у других html-элементов установлен class с именем .color, но этот html-элемент не является
, стили к данному элементу не применятся и элемент с классом color не будет выделятся красным цветом.
Язык стилей CSS значительно упрощает создание геометрических фигур. Не нужно пользоваться фоторедакторами или задавать сложную разметку с помощью HTML. Достаточно прописать всего лишь один элемент и сделать из него сложную фигуру с помощью псевдоэлементов, рамок и теней.
Эта возможность появилась недавно, с внедрением стандарта CSS3. Причем для этого достаточно двух свойств: transform и border-radius.
Создать окружность очень просто. Для этого создается элемент div. Предположим, его id – circle.
Чтобы сделать из него круг, необходимо задать желаемую ширину и высоту, а потом выставить значение border-radius на половину от width и height. А с помощью свойства background задается цвет.
Также может потребоваться добавить вендорные префиксы для поддержки старых версий браузеров.
Квадрат
Для создания квадрата необходимо создать див с желаемым идентификатором. В нашем примере это будет square. После этого с помощью CSS задается фон, а ширина и высота делаются равными друг другу.
Прямоугольник
Прямоугольник делается так же, как квадрат, только ширина и высота отличается друг от друга.
Овал делается так же, как прямоугольник, только добавляется свойство border-radius, размер которого составляет половину от ширины или высоты в зависимости от направленности фигуры.
Треугольник
Для создания треугольника нужно прописать, див, границей которой будем манипулировать с помощью CSS. Достаточно будет прописать длину каждой из сторон треугольника и задать цвет заливки.
Можно развернуть треугольник в обратную сторону.
Для этого заменяем свойство border-bottom на border-top.
Создать ромб немного сложнее, чем треугольник, квадрат или круг. Для этого надо воспользоваться свойством transform и разместить два треугольника рядом.
Трапеция
Чтобы создать трапецию, необходимо создать блок div, задать его ширину и высоту, а также размеры рамки. Левая и правая граница должна быть одинаковой величины, а нижняя больше левой и правой.
Параллелограмм
Чтобы создать параллелограмм, необходимо сделать обычный прямоугольник, после чего к нему применить свойство transform со значением skew.
Звезда
Звезда рисуется с помощью сложных манипуляций с границами, применяя свойство transform и задавая стиль псевдоэлементов. Проще посмотреть сразу на код.
Пятиугольник
Чтобы создать пятиугольник, необходимо прописать два элемента, которые затем соединяются. Внизу прорисовывается трапеция, после чего на нее накладывается треугольник.
Нестандартные фигуры
В принципе, разные фигуры создаются с помощью комбинации указанных выше. Так можно создать почти любую нестандартную фигуру.
Например, сердце создается значительно сложнее.
Здесь применяется свойство transform-origin, позволяющее задать точку, относительно которой и будет трансформироваться элемент.
С помощью комбинации треугольника и прямоугольника можно сделать бабл для комментария.
Генератор фигур CSS
Многие новички интересуются, есть ли генератор фигур CSS? Близко к этому приложение для Chrome CSS – Shack. Но на практике использовать таблицы стилей не рекомендуется для рисования фигур. Для этого есть SVG.
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Вы только начинаете изучать веб-разработку и CSS? Вам случалось задуматься, как же создаются все эти прекрасные фигуры, которые можно видеть повсеместно в интернете? Можете больше не терзаться этим вопросом: вы пришли по нужному адресу.
Ниже я объясню самые основы создания геометрических фигур при помощи CSS. Тема эта большая, рассказывать можно очень долго. Поэтому я не буду даже пытаться охватить все инструменты и фигуры. Лучше я дам вам общую идею того, как эти фигуры создаются при помощи CSS.
Создание некоторых фигур требует большего количества приемов, чем создание других. Но вообще для создания фигур при помощи CSS обычно используется комбинация width, height, top, right, left, border, bottom, transform и псевдоэлементов, таких как :before и :after. У нас также есть и более современные CSS-свойства для создания фигур, такие как shape-outside и clip-path. О них я тоже напишу.
CSS-фигуры — базовый способ создания
Мы всегда можем создать самые основные геометрические фигуры (квадраты, круги и треугольники), используя обычные свойства CSS и несколько интересных приемов.
Квадраты и прямоугольники
Создавать квадраты и прямоугольники, пожалуй, проще всего. По умолчанию, div это всегда квадрат или прямоугольник.
Вы устанавливаете ширину и высоту, как показано в коде ниже. Дальше остается только задать цвет фона для элемента. Конечно, вы можете указывать и другие свойства, какие сочтете нужным.
Круги
Почти так же просто создать круг. Для этого мы можем установить border-radius элемента. Таким образом мы сделаем скругление углов.
Если мы установим значение этого свойства на 50%, мы получим круг. А если при этом ширина и высота будут разными, получится овал.
Треугольники
Создавать треугольники немного сложнее. Нам нужно установить границы элемента, чтобы они образовали треугольник. Если элементу установить нулевую ширину и высоту, его шириной станет ширина границы.
Имейте в виду, что края границы элемента находятся под углом в 45 градусов друг к другу. Вот почему этот метод подходит для создания треугольника. Если мы зададим одной границе цвет, а другим границам прозрачность, мы получим треугольник.
Если вам нужно, чтобы вершина треугольника была повернута в другом направлении, вы можете изменить значения border для той стороны, которая должна быть видимой. Или можно повернуть элемент при помощи свойства transform — если вам так больше нравится.
Это базовые фигуры, которые можно создать при помощи CSS. А вообще количество фигур, которые можно себе представить, пожалуй, безгранично. То, что я рассказал, это лишь основы, но проявив творческий подход и упорство, вы сможете достигнуть многого даже с этими базовыми свойствами CSS.
В некоторых случаях, когда речь идет о создании более продвинутых фигур, будет хорошей идеей использовать псевдоэлементы :after и :before.
Но у этого подхода есть один большой недостаток, с которым вы столкнетесь, если захотите, чтобы вашу фигуру обтекал текст (или чтобы текст был вписан в нее). Мы прописываем стили только для обычных HTML-элементов, а текст будет вести себя иначе.
На иллюстрации вы видите треугольник и то, каким образом его обтекает текст.
К счастью, вместо такого подхода мы можем использовать некоторые современные свойства CSS.
CSS-фигуры — другой способ создания
Сегодня мы можем использовать такое свойство CSS как shape-outside. Это свойство позволяет нам определять фигуру, которую должен обтекать текст (или в которую он должен вписываться). Для этого свойства у нас есть несколько базовых фигур:
- inset()
- circle()
- ellipse()
- polygon()
Совет! Вы также можете использовать свойство clip-path. С его помощью тоже можно создать нужную фигуру, но это свойство не позволит вам сделать обтекание текстом вокруг фигуры, как при использовании shape-outside.
Элемент, которому мы собираемся придать форму геометрической фигуры, должен быть плавающим (floated) и иметь определенную ширину и высоту. Это очень важно!
inset()
Базовая фигура inset() используется для создания прямоугольника или квадрата со смещением для обтекания текстом. Вы можете указать, насколько именно текст должен перекрывать фигуру.
Смещение можно установить одинаковое по всем направлениям: inset(20px). Также его можно указывать отдельно для каждого направления: inset(20px 5px 30px 10px).
Можно использовать и другие единицы для смещения, например, проценты. Значения указываются в таком порядке: inset(top right bottom left).
Посмотрите пример кода:
Также можно указать для inset() второе значение, определяющее border-radius смещения. Как здесь:
circle()
В этом случае при помощи свойства shape-outside создается круг. Здесь также нужно применить clip-path с соответствующим значением.
Свойство clip-path может принимать те же значения, что и свойство shape-outside, так что мы можем задать стандартную фигуру circle(), которую мы использовали для shape-outside. Обратите внимание, что я применил для элемента margin 20px, чтобы дать тексту немного пространства.
В этом примере я не указывал радиус круга. Я хотел, чтобы его размер совпадал с div (300px). Если хотите задать кругу его собственный размер, это тоже можно сделать.
Свойство circle() принимает два значения. Первое это радиус, а второе — позиция. Эти значения определяют центр круга.
Я также указал другое значение позиции для clip-path. Поскольку я задал позицию 0%, это обрежет круг наполовину.
ellipse()
Свойство ellipse() работает так же, как и circle(), за исключением того, что в итоге создает не круг, а овал. Вы можете задавать значение X и значение Y: ellipse(25px 50px).
Как и в случае с кругом, последнее значение это позиция.
polygon()
Изображения
Для создания фигур можно также использовать изображения с прозрачным фоном. Например, как эта прекрасная круглая луна. Это изображение в формате .jpg, с прозрачным фоном.
В этой статье мы разберём как сделать фигуру в CSS, будет очень интересно.
Так же скажу, что материал для этой статьи мы взяли сайта Хабр.
Простые фигуры:
Сначала я покажу как сделать совсем простые фигуры, я даже описывать не чего не буду, но потом перейдём к более сложным.
Читайте также: