Хорошо, расскажу вам об истории и основах веб-разработки до появления CSS.
До того, как в 1996 году были введены таблицы стилей CSS (Cascading Style Sheets), веб-страницы форматировались и стилизовались с использованием HTML (HyperText Markup Language) и inline-стилей. Этот подход был неэффективным, так как каждый элемент стилизовался отдельно, и изменение дизайна всей страницы требовало переделывания каждого элемента отдельно.
Прежде чем рассмотреть CSS, стоит упомянуть о том, как создавались веб-страницы во времена до введения CSS. Веб-дизайнеры использовали таблицы HTML, чтобы создавать макеты страниц. Таблицы позволяли разбить страницу на ряды и столбцы, что упрощало расположение элементов. Однако это требовало дополнительного кода и было неэффективным для создания сложных макетов.
С появлением CSS разработчики получили возможность вынести стилизацию элементов из HTML-кода. CSS позволяет разделить структуру и содержание документа от его представления, что обеспечивает более гибкую и эффективную стилизацию.
Теперь рассмотрим примеры кода до введения CSS, которые демонстрируют использование таблиц HTML для стилизации страницы:
Пример 1:
<table border="1">
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
Здесь мы используем таблицу HTML с границей равной 1 пикселю. Но когда нужно изменить стиль таблицы, например, поменять цвет границы или фона таблицы, весь код таблицы приходится менять вручную. Это неудобно и требует лишних усилий при поддержке и изменении дизайна.
Пример 2:
<table style="border: 1px solid black; background-color: lightgray;">
<tr style="background-color: white;">
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr style="background-color: white;">
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
В этом примере мы используем inline-стили, и каждая ячейка и строка имеют свои стили напрямую. Но опять же, при необходимости изменить стиль таблицы придется менять каждый элемент отдельно.
Вместо таких неэффективных решений с появлением CSS мы можем легко изменить стили таблицы, используя простые правила CSS:
<style>
table {
border: 1px solid black;
background-color: lightgray;
}
tr {
background-color: white;
}
</style>
<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
В данном примере мы вынесли стили в отдельную секцию <style>, где определили стили для таблицы и строк. Это позволяет легко изменять стили всей таблицы или ее частей, не трогая содержимое таблицы.
CSS позволяет нам также создавать классы и идентификаторы для элементов и применять стили только к определенным элементам. Например:
<style>
.my-table {
border: 1px solid black;
background-color: lightgray;
}
.my-row {
background-color: white;
}
</style>
<table class="my-table">
<tr class="my-row">
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr class="my-row">
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>
Здесь мы задали классы ".my-table" и ".my-row", которые применяют указанные стили только к элементам с соответствующими классами. Это позволяет использовать один и тот же стиль для различных таблиц или строк на странице.
Таким образом, CSS значительно упрощает стилизацию и форматирование веб-страниц, позволяя разработчикам более гибко и эффективно управлять внешним видом сайта. Он отделяет дизайн от контента, делая код чище и облегчая поддержку и расширение веб-проектов.