Руководство для начинающих по основам CSS

CSSCSSBeginner
Практиковаться сейчас

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") subgraph Lab Skills css/selectors -.-> lab-35251{{"Руководство для начинающих по основам CSS"}} css/colors -.-> lab-35251{{"Руководство для начинающих по основам CSS"}} css/borders -.-> lab-35251{{"Руководство для начинающих по основам CSS"}} css/width_and_height -.-> lab-35251{{"Руководство для начинающих по основам CSS"}} end

Треугольник

В ВМ уже предоставлены index.html и style.css.

Для создания треугольной формы с использованием чистого CSS выполните следующие шаги:

  1. Используйте три границы с одинаковой шириной (20px), чтобы создать треугольную форму.
  2. Задайте цвет границы (border-color) для противоположной стороны, куда указывает треугольник, на желаемый цвет. Прилегающие границы должны иметь цвет границы transparent.
  3. Чтобы изменить размер треугольника, измените значения ширины границы (border-width).

Вот пример фрагмента кода:

<div class="triangle"></div>
.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #9c27b0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по Треугольникам. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.