Что можно сделать с таблицами стилей, чего нельзя сделать с помощью обычного HTML?

10 лучших проектов для начинающих по отработке навыков HTML и CSS Изучение

Таблица стилей — это файл, содержащий фрагмент кода, который используется для придания стиля нашей веб-странице. Он используется для изменения различных свойств страницы, таких как размер страницы, поля, шрифты, размер шрифта и т. д., что невозможно при использовании только обычного HTML. В веб-разработке проектирование и структурирование веб-страниц выполняются с использованием HTML (определение содержимого таких элементов, как заголовки и абзацы, и позволяет добавлять изображения, видео и другие медиафайлы на нашу веб-страницу), а часть оформления выполняется с использованием Каскадные таблицы стилей (CSS). CSS — это хорошо известная форма таблиц стилей, которые используются для оформления веб-страниц. CSS используется для стилизации наших веб-страниц, заставляя их взаимодействовать с элементами HTML.

Зачем нам нужен CSS?

Можно создать целую веб-страницу, используя только HTML, который будет отображаться всеми веб-браузерами, но визуально он будет совершенно не привлекательным. Но в то же время мы не можем использовать CSS без HTML-документа, поэтому одно дополняет другое. HTML определяет структуру нашей страницы и помогает в вставке данных. Без CSS веб-страница была бы обычной белой страницей с простым текстом. CSS помогает улучшить внешний вид элементов веб-страницы, не внося никаких изменений в их функциональность.

Что можно сделать с помощью CSS?

  • С помощью таблиц стилей мы можем изменять различные свойства, такие как поля, отступы, границы и т. д. любого элемента нашей веб-страницы. Мы можем сделать наш веб-сайт более привлекательным, используя таблицы стилей.
  • Мы можем контролировать и изменять значения интервалов, границ и полей большинства HTML-элементов с помощью таблиц стилей. Любой элемент может иметь свой собственный цвет фона или изображение в качестве фона, а не только элемент.
  • Большое разнообразие анимаций и переходов, таких как эффекты наведения, задержки анимации, продолжительность перехода и т. д., можно применить практически к каждому элементу с помощью CSS без использования JavaScript или Flash.
  • Границы можно применять к любому элементу HTML Element, а не только к таблицам. CSS предлагает более широкий спектр возможностей по сравнению с тем, что могут предложить существующие расширения браузера HTML. Мы также можем создавать собственные кнопки для наших HTML-форм с помощью CSS.

В заключение можно с уверенностью сказать, что HTML — это кости, вены, кровь, дающие структуру телу, в то время как CSS действует как Ногти, Волосы, Кожа и, следовательно, помогает определить внешний вид тела.

С помощью таблиц стилей мы можем использовать и изменять значения следующих атрибутов:

  • Цвет (фон, текст).
  • Стиль/размер шрифта.
  • Орнамент (жирный, подчеркнутый).
  • Анимации/переходы.
  • Обоснование содержимого (маржа, отступы, граница).

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

Читайте также:  7 основных проблем, с которыми сталкиваются профессионалы машинного обучения

Цвет: с помощью таблиц стилей мы можем придать цвет любому элементу HTML, а также тексту внутри него, а также придать ему уникальный цвет фона. Изображения также можно использовать в качестве фона почти для всех элементов.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>GFG</title>
</head>
<body>
    <p style="color: rgb(4, 194, 4);">
        GeeksforGeeks
    </p>
</body>
</html>

Вывод:

с помощью таблиц стилей мы можем придать цвет любому элементу HTML

Стиль шрифта. Шрифт можно изменить с помощью таких свойств, как «семейство шрифтов», «стиль шрифта» и т. д., предлагаемых CSS. Он предлагает множество различных шрифтов и стилей, таких как Times New Roman, Times, serif, курсив, полужирный, курсив и т. д.

<!DOCTYPE html>
<html>
 
<head>
    <title>GFG</title>
</head>
 
<body>
    <p style="color: rgb(4, 194, 4); 
        font-family:fantasy; font-size: 25px;">
        GeeksforGeeks
    </p>
 
    <p style="font-style: italic; font-weight: bold;">
        Best Platform for Learners.
    </p>
</body>
 
</html>

Вывод:

Шрифт можно изменить с помощью таких свойств, как

Оформление текста: это свойство используется для добавления или удаления различных видов оформления строк из наших простых текстов HTML. В приведенном ниже примере украшение применяется к содержимому тега подчеркивания с помощью и придает ему волнистый вид с красным цветом.

<!DOCTYPE html>
<html>
 
<head>
    <title>GFG</title>
 
    <style>
        u {
            text-decoration-style: wavy;
            text-decoration-color: red;
        }
    </style>
</head>
 
<body>
    <p style="color: rgb(4, 194, 4); 
              font-family:fantasy;
              font-size: 25px; 
              text-decoration: underline;">
        GeeksforGeeks
    </p>
 
    <p>
        There's a <u>speling</u> error.
    </p>
</body>
 
</html>

Вывод:

свойство используется для добавления или удаления различных видов

Анимации/переходы: эта функция помогает создавать анимации и переходы для простых элементов HTML. Таблицы стилей предоставляют огромное разнообразие переходов и анимаций, которые можно реализовать и использовать для придания другого вида или другого свойства движения обычному тексту.

<!DOCTYPE html>
<html>
 
<head>
    <title>GFG</title>
    <style>
        h3 {
            width: 100px;
            height: 50px;
            background: rgb(14, 216, 7);
            transition: 1s;
        }
 
        h3:hover {
            width: 120px;
            height: 70px;
        }
 
        p {
            width: 100px;
            height: 50px;
            background-color: rgb(228, 228, 228);
            animation-name: example;
            animation-duration: 6s;
        }
 
        @keyframes example {
            from {
                background-color: rgb(228, 228, 228);
            }
 
            to {
                background-color: rgb(6, 175, 20);
            }
        }
    </style>
</head>
 
<body>
    <h3>
        Geeks For Geeks
    </h3>
    <p>
        This has Animation.
    </p>
</body>
 
</html>

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

<!DOCTYPE html>
<html>
 
<head>
    <title>GFG</title>
    <style>
        h3 {
            color: rgb(25, 146, 25);
            border: 2px solid black;
            border-radius: 20px;
            font-size: 40px;
            width: 400px;
            display: flex;
            justify-content: center;
        }
 
        span {
            color: rgb(24, 78, 28);
            font-family: cursive;
            font-size: 20px;
            border: 2px solid black;
            margin-left: 70px;
 
        }
 
        p {
            color: rgb(25, 146, 25);
            border: 2px solid black;
            border-radius: 20px;
            font-size: 40px;
            width: 400px;
            display: flex;
            justify-content: flex-end;
        }
    </style>
</head>
 
<body>
    <h3>
        GeeksforGeeks
    </h3>
    <span>
        Best Platform for Learners.
    </span>
    <p>
        This has flex-end.
    </p>
</body>
 
</html>

Вывод:

Читайте также:  Что следует учитывать при аутсорсинге дизайна и разработки игр

это одна из самых полезных функций, предоставляемых CSS, поскольку

Оцените статью
bestprogrammer.ru
Добавить комментарий