Таблица стилей — это файл, содержащий фрагмент кода, который используется для придания стиля нашей веб-странице. Он используется для изменения различных свойств страницы, таких как размер страницы, поля, шрифты, размер шрифта и т. д., что невозможно при использовании только обычного 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, и читателю предлагается перейти по предоставленным текстовым встроенным ссылкам, чтобы узнать больше о каждой концепции в деталях.
Цвет: с помощью таблиц стилей мы можем придать цвет любому элементу HTML, а также тексту внутри него, а также придать ему уникальный цвет фона. Изображения также можно использовать в качестве фона почти для всех элементов.
HTML
<!DOCTYPE html><html><head><title>GFG</title></head><body><pstyle="color: rgb(4, 194, 4);">GeeksforGeeks</p></body></html>
Вывод:
Стиль шрифта. Шрифт можно изменить с помощью таких свойств, как «семейство шрифтов», «стиль шрифта» и т. д., предлагаемых CSS. Он предлагает множество различных шрифтов и стилей, таких как Times New Roman, Times, serif, курсив, полужирный, курсив и т. д.
<!DOCTYPE html><html><head><title>GFG</title></head><body><pstyle="color: rgb(4, 194, 4);font-family:fantasy; font-size: 25px;">GeeksforGeeks</p><pstyle="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><pstyle="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>
Вывод:
