HTML или CSS: в чем разница между ними?

HTML Программирование и разработка

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

Что такое HTML?

 

HTML означает язык гипертекстовой разметки. Это строительный блок веб-страниц и веб-приложений. HTML-документ состоит из двух частей: головы и тела.

Заголовок HTML-документа содержит всю информацию, необходимую для загрузки веб-страницы или её отображения в поисковых системах — всё это метаинформация, которую вы не увидите напрямую на веб-странице.

Тело — это всё, что видит клиент или пользователь. Он состоит из HTML, который обеспечивает структуру вашей веб-страницы. Вот пример веб-страницы, структурированной только с помощью HTML-кода:

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width»>
<title>Sample HTML page</title>
</head>
<body>
<div>
<header>
<h1>HTML Demo</h1>
<nav>
<a href=»#»>Link #1</a>
<a href=»#»>Link #2</a>
<a href=»#»>Link #3</a>
</nav>
</header>
<main>
<h2>HTML is:</h2>
<ul>
<li>The skeleton or structure of application</li>
<li>Provides meaning to your application with semantic tags like &lt;caption>, &lt;main>, &lt;strong>, and &lt;h1></li>
<li>Styling is next to nil besides the default styling of certain elements.</li>

</ul>
</main>
</div>
</body>
</html>

Когда вы запустите приведённый выше код, вы увидите довольно простую страницу без связанных с ней стилей, кроме стилей по умолчанию, связанных с тегами <h1>, <li> и <a>.

Встроенный стиль

Мы обеспечиваем стили внутри нашего HTML с помощью так называемого «встроенного стиля». Используя атрибут «стиль», мы можем заключить правила для каждого отдельного элемента в пару кавычек. Образец документа со встроенным стилем выглядит так:

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width»>
<title>Sample HTML page</title>
</head>
<body style=»font-family: Roboto;»>
<div>
<header style=»width: 100%; display:flex; justify-content: space-between; align-items: center;»>
<h1 style=»width: 40%; letter-spacing: 2px;»>Inline Style Demo</h1>
<nav style=»width: 60%; display: flex; justify-content: space-around;»>
<a style=»text-decoration: none;» href=»#»>Link #1</a>
<a style=»text-decoration: none;» href=»#»>Link #2</a>
<a style=»text-decoration: none;» href=»#»>Link #3</a>
</nav>
</header>
<main>
<h2>Inline Styling is:</h2>
<ul>
<li>Rules for your element’s decoration in <em>style</em> attribute</li>
<li>Syntax is <strong>style=»width:100%; font-size: 1.3rem;»</strong> — key:value pairs separated by semicolons</li>
<li>Any element that needs to be controlled with style needs to have their own style attribute with key:value pairs</li>
<li>How can this get cumbersome? </li>
</ul>
</main>
</div>
</body>
</html>

Это может стать довольно трудоёмким и громоздким, чем больше наше приложение. Если нам нужно обеспечить встроенный стиль для всех наших HTML-элементов по отдельности, ваша разметка может стать совершенно нечитаемой, не говоря уже о том, что она станет довольно длинной.

Читайте также:  React Props: основы

Решение этой проблемы было создано с помощью CSS.

Что такое CSS?

Папка проекта должна выглядеть так, когда вы добавляете файл index.css

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

Таблицы стилей создают правила, которые будут управлять разметкой HTML. Эта таблица стилей может быть внутренней или внешней. Внутренняя таблица стилей помещается в заголовок вашего HTML-документа между тегами <style>.

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width»>
<title>Sample HTML page</title>
<style>
body {
font-family: «Roboto»;
}

header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}

header h1 {
width: 40%;
letter-spacing: 2px;
}

header nav {
width: 60%;
display: flex;
justify-content: space-around;
}

nav a {
text-decoration: none;
}
</style>
</head>
<body>
<div>
<header>
<h1>Inline Style Demo</h1>
<nav>
<a href=»#»>Link #1</a>
<a href=»#»>Link #2</a>
<a href=»#»>Link #3</a>
</nav>
</header>
<main>
<h2>Internal Stylesheets:</h2>
<ul>
<li>Are located in the &lt;head> of the HTML document.</li>
<li>Are inside the head, the internal stylesheet is located in between &lt;style> tags.</li>
<li>The Syntax changes from inline styling with properties and values in between semicolons to actual CSS with blocks of rules</li>
<li>How can this get cumbersome? </li>

</ul>
</main>
</div>
</body>
</html>

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

Читайте также:  Поисковые алгоритмы Google

Здесь у нас есть два файла: файл html и файл css. Наш файл CSS содержит все стили для нашего документа. Чтобы связать их вместе, мы используем тег <link> в <head> нашего HTML, чтобы указать на файл CSS. Это один из лучших способов отделить структуру от стиля.

Заключение

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

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