The post has been translated automatically. Original language: Russian Russian
While browsing various web pages, you probably noticed that some of them look amazing, while others are “so-so". And if you are interested in web development, you may also have wondered how the design of pages changes using code.
The main tool with which developers create and change the appearance of pages is CSS (Cascading Style Sheets, from English - cascading style sheets). In this article, we will look at the basic principles of CSS and talk about the importance of technology in development. You can use the quick links to go to the part of the article you need.:
CSS (Cascading Style Sheets) - this is a formatting language that allows you to make a site look attractive, create complex web page templates and give them personality. CSS makes HTML content well organized, more beautiful and readable.
In fact, CSS is the rules that tell the browser how to display a certain element on the page. CSS gives visual beauty to the page and is responsible for its aesthetics. In addition to changing basic parameters (for example, margins, colors and fonts), CSS is also used to optimize pages, create advanced visual effects (for example, hover effects, various animations, etc.) and adaptive web design.
How is a web page created?
Before we move on to a more in-depth introduction to CSS, let's take a few minutes to basic definitions, starting with the web page (if all this is “easier than easy” for you, then go straight to the next section):
A web page is a hypertext document connected to the World Wide Web.
A website is a collection of web pages hosted on a domain.
Each web page consists of three components:
- Content
- Presentation
- Behaviour
The content is the structure of a web page, i.e. the elements of which it consists. The HTML language (headers, text, links, images, etc.) is responsible for the structure of the page and the definition of its content.
A presentation is a visual representation of elements on a web page. This is where CSS comes on the scene.
Despite the fact that it is possible to write CSS directly in an HTML document, it is better not to do this, because the main idea of CSS is to ensure the separation of content and presentation. This allows you to format the same HTML document in many different ways, and at the same time it will remain accessible to different rendering methods (for example, screen readers).
Behavior describes how a user interacts with a web page. As a rule, the behavior on the page is handled using JavaScript.
Now that we've figured out which key elements web pages are built from, let's figure out how to use CSS to style content.
Using CSS, we can set different styles for the entire text enclosed in an HTML element. For example: font size is 40 pixels, font is Arial, color is green. You can also set more serious parameters - for example, add borders, change margins, control the exact positioning of an element, and even add various effects and animations.
The style sheet tells the browser how to display the document being viewed. One important CSS concept is embedded in its very name - style sheets are cascading. This means that at least one stylesheet affects each web page.
Even when we don't use CSS, HTML elements have certain "default" styles (i.e., which are added by default by browsers). For example, text and title elements usually take up the entire web page. In this case, the links are placed in a row without splitting the text.
There is one default font and some spacing added to each element for easy reading. Anything more than that already requires CSS to be enabled.
In most cases, it is best to refer not to multiple tables, but to a separate style sheet. In this case, it is much easier to manage it. You can have an unlimited number of documents linked to a single table - this allows you to edit styles more efficiently, unlike editing countless HTML documents.
It also greatly simplifies the process for those who may need to edit your documents in the future.
CSS styles can be added to, removed from, or modified from an HTML element. It is also possible to add animation to the style properties (for example, change the background color from pink to yellow). Or, for example, you can customize the appearance and disappearance of an element on the page.
The style applied to an element transmits information to the browser about how this element needs to be properly designed and displayed.
The language in which the style "speaks" to the browser is called syntax. For example, to set the font size and color for all paragraphs, you need to write:
p { color: blue; font-size: 2em; } Here, the style gives the command: “The text should be blue with a height of 2em” (em is the unit of measurement, the font height standard).
Most styles have many formatting properties, so to make them easier to read, you can split the code into several lines. For example, we can write the code from the example above as follows:
p { color: blue; font-size: 2em; } It becomes much more convenient to read the code this way, doesn't it? Let's analyze the above fragment. It contains:
- selector p
- opening curly brace {
- color property; blue value
- font-size property
- the value is 2em
- closing curly brace }
Selector - defines the element to which the browser should assign a style. It can be a paragraph, title, link, image, etc. Accordingly, the p selector changes all the p elements on the page using the specified style.
It is also possible to assign styles to several elements by class at once. The class attribute is used for this purpose. Example:
.className { color: blue; font-size: 2em; } Similarly, you can assign styles to elements according to their identifiers. In this case, we use the id attribute:
#idName { color: blue; font-size: 2em; } But try not to abuse the use of identifiers, because the use of the id attribute has the highest priority compared to other options for accessing the element.
The ad block is the code after the selector. It includes the conditions of the changes applied to the selector. It starts with the sign { and ends with the sign }.
A declaration is a code describing the property and value of an element. There is a semicolon at the end of each ad. There is a colon between the property and the value.
You can also put a space between the colon and the property value. This is optional, but it makes the code easier to read. It is acceptable to leave a space of any width between the elements (color: blue; or color: blue;)
Property. There are many variations in CSS called properties. They indicate a certain style effect. For most properties, the name directly reflects their purpose, for example:
font-size (font size);margin-top (indentation from the top edge);background-color (background color).
Value - describes exactly how the property will be processed by the browser. Each property has a set of acceptable values, for example: make the background green, orange or purple. Different CSS properties require their corresponding value types, such as color (red or #FF0000), length (30px, 8in or 2em), location (top, center or bottom), etc.
CSS is one of the main tools for managing the design of web pages. Using it, you can change the look and feel of websites in any way you want, while saving a huge amount of time due to the smaller amount of code required.
To summarize, here are the key benefits of CSS:
- Flexibility - CSS gives you the freedom to place HTML elements anywhere on the page, while keeping the HTML markup organized and clean.
- Cross-browser and cross-device compatibility - you can customize the display of a web page by different browsers and on different devices, taking into account their differences and features. In other words, it is an opportunity to create different versions of web pages and sites using the same HTML document, adapting each version to the necessary parameters.
- Huge customization options - CSS allows you to make almost unlimited changes to page styles: colors, links, borders, hover and transition effects, fonts, etc.
- Simplicity and efficiency - the ability to easily create and customize styles for multiple web pages at the same time.
- Save time - you can write style sheets once and then reuse them for an unlimited number of pages.
- High page loading speed - CSS significantly reduces the length of the HTML code, which, in turn, leads to faster loading of web pages.
#Tech Orda 2024, #Astana Hub, #IT-incubator
Просматривая различные веб-страницы, вы наверняка обращали внимание, что некоторые из них выглядят потрясающе, в то время как другие - “так себе”. И если вам интересна веб-разработка, возможно вы также задавались вопросом, как с использованием кода изменяется дизайн страниц.
Основным инструментом, с помощью которого разработчики создают и меняют облик страниц, является CSS (Cascading Style Sheets, с англ. - каскадные таблицы стилей). В данной статье рассмотрим базовые принципы работы CSS и поговорим о важности технологии в разработке. Можете воспользоваться быстрыми ссылками, чтобы перейти к нужной вам части статьи:
CSS (Cascading Style Sheets) - это язык форматирования, который позволяет сделать сайт внешне привлекательным, создать сложные шаблоны веб-страниц и придать им индивидуальность. CSS делает HTML-контент хорошо организованным, более красивым и удобочитаемым.
По сути, CSS - это правила, сообщающие браузеру, как следует отображать определённый элемент на странице. CSS придаёт визуальную красоту странице и отвечает за её за эстетику. Помимо изменения основных параметров (например, отступы, цвета и шрифты), CSS также применяется для оптимизации страниц, создания продвинутых визуальных эффектов (например, эффекты при наведении курсора, различные анимации и т.д.) и адаптивного веб-дизайна.
Как создается веб-страница?
Перед тем как мы перейдем к более углублённому знакомству с CSS, давайте уделим несколько минут базовым определениям, начиная с веб-страницы (если для вас всё это “легче лёгкого”, то сразу переходите к следующему разделу):
Веб-страница - это гипертекстовый документ, подключенный к Всемирной паутине.
Веб-сайт - это набор веб-страниц, размещённых в домене.
Каждая веб-страница состоит из трех компонентов:
- Содержание
- Презентация
- Поведение
Содержание - это структура веб-страницы, т.е. элементы из которых она состоит. За структуру страницы и определение её содержимого отвечает язык HTML (заголовки, текст, ссылки, изображения и т.д.).
Презентация - это визуальное представление элементов на веб-странице. Здесь на сцену и выходит CSS.
Несмотря на то что есть возможность написать CSS непосредственно в HTML-документе, лучше этого не делать, т.к. основная идея CSS - обеспечить разделение содержания и представления. Это позволяет оформить один и тот же HTML-документ многими различными способами, и при этом он будет оставаться доступным для разных методов рендеринга (например, программ чтения с экрана).
Поведение описывает то, как пользователь взаимодействует с веб-страницей. Как правило, поведение на странице обрабатывается с помощью JavaScript.
Теперь, когда мы разобрались из каких ключевых элементов строятся веб-страницы, давайте выясним, как применять CSS для стилизации контента.
Используя CSS мы можем задать для всего текста, заключенного в какой-то HTML-элемент, различные стили. К примеру: размер шрифта - 40 пикселей, шрифт - Arial, цвет - зелёный. Можно задавать и более серьёзные параметры - например, добавлять границы, изменять поля, контролировать точное позиционирование элемента и даже добавить различные эффекты и анимацию.
Таблица стилей сообщает браузеру, как отображать просматриваемый документ. Одна важная концепция CSS заложена в самом её названии - таблицы стилей являются каскадными. Это значит, что как минимум одна таблица стилей влияет на каждую веб-страницу.
Даже когда мы не применяем CSS, HTML-элементы обладают определенными "дефолтными" стилями (т.е. которые по умолчанию добавляются браузерами). Например, элементы текста и заголовков обычно занимают всю веб-страницу. При этом ссылки располагаются в строке, не разбивая текст.
Существует один шрифт по умолчанию и некоторый интервал, добавленный к каждому элементу для удобства чтения. Всё, что больше этого, уже требует подключения CSS.
В большинстве случаев лучше всего ссылаться не на множество таблиц, а на отдельную таблицу стилей. В этом случае управлять ей значительно проще. У вас может быть неограниченное количество документов, связанных с одной таблицей - это позволяет редактировать стили более эффективно в отличие от редактирования бесчисленных HTML-документов.
Также это значительно упрощает процесс для тех, кому в будущем может потребоваться редактирование ваших документов.
Стили CSS можно добавлять в HTML-элемент, удалять из него или изменять его свойства. Возможно также в свойства стиля добавлять анимацию (допустим, изменять цвет фона с розового на желтый). Или, например, можно настроить появление и исчезание элемента на странице.
Стиль, применяемый к какому-либо элементу, передаёт браузеру информацию о том, как этот элемент необходимо правильно оформить и отобразить.
Язык, на котором стиль "говорит" с браузером, называется синтаксисом. Например, чтобы задать размер шрифта и его цвет для всех абзацев, необходимо написать:
p { color: blue; font-size: 2em; } Здесь стиль даёт команду: “Текст должен быть голубого цвета с высотой 2em” (em-единица измерения, стандарт высоты шрифта).
Большинство стилей имеет множество свойств форматирования, поэтому чтобы облегчить их чтение, можно разбить код на несколько строк. Например, код из примера выше мы можем написать следующим образом:
p { color: blue; font-size: 2em; } Так читать код становится гораздо удобнее, не правда ли? Давайте разберём вышеуказанный фрагмент. В нём присутствуют:
- селектор p
- открывающая фигурная скобка {
- свойство color; значение blue
- cвойство font-size
- значение 2em
- закрывающая фигурная скобка }
Селектор - определяет элемент, к которому браузер должен присвоить стиль. Это может быть абзац, заголовок, ссылка, изображение и т.д. Соответственно, селектор р изменяет все элементы р на странице, используя указанный стиль.
Также есть возможность присваивать стили сразу нескольким элементами по классу. Для этого используется атрибут class. Пример:
.className { color: blue; font-size: 2em; } Аналогичным образом можно присваивать стили элементам согласно их идентификаторам. В этом случае используем атрибут id:
#idName { color: blue; font-size: 2em; } Но старайтесь не злоупотреблять использованием идентификаторов, т.к. применение атрибута id имеет наивысший приоритет по сравнению с другими вариантами обращения к элементу.
Блок объявления - код после селектора. Он включает условия изменений, применяемых к селектору. Начинается знаком { и заканчивается знаком }.
Объявление - это код, описывающий свойство и значение элемента. В конце каждого объявления стоит точка с запятой. Между свойством и значением - двоеточие.
Вы также можете ставить пробел между двоеточием и значением свойства. Это необязательно, но позволяет легче читать код. Допустимо оставлять между элементами пробел любой ширины (color: blue; или color: blue;)
Свойство. В CSS есть множество вариантов изменений, называемых свойствами. Они обозначают определённый эффект стиля. У большинства свойств название напрямую отображает их назначение, например:
font-size (размер шрифта);margin-top (отступ от верхнего края);background-color (цвет фона).
Значение - описывает, как именно свойство будет обработано браузером. Каждое свойство имеет набор допустимых значений, например: сделать фон зелёным, оранжевым или фиолетовым. Для разных свойств CSS необходимы соответствующие им типы значений, например цвет (red или #FF0000), длина (30px, 8in или 2em), расположение (top, center или bottom) и т.п.
CSS - один из основных инструментов для управления дизайном веб-страниц. С его использованием можно как угодно изменять внешний вид и создавать удобство использования веб-сайтов, экономя при этом огромное количество времени благодаря меньшему объёму требуемого кода.
Подводя итог, вот ключевые преимущества CSS:
- Гибкость - CSS даёт свободу размещения элементов HTML в любом месте страницы, сохраняя при этом HTML-разметку организованной и чистой.
- Кроссбраузерная и кроссдевайсная совместимость - вы можете настраивать отображение веб-страницы различными браузерами и на разных устройствах с учётом их отличий и особенностей. Иначе говоря, это возможность создавать различные версии веб-страниц и сайтов с использованием одного и того же HTML-документа, адаптируя каждую версию под необходимые параметры.
- Огромные возможности настройки - CSS позволяет вносить практически неограниченные изменения в стили страниц: цвета, ссылки, границы, эффекты наведения и перехода, шрифты и т.д.
- Простота и эффективность - возможность легко создавать и настраивать стили одновременно для множества веб-страниц.
- Экономия времени - вы можете один раз написать таблицы стилей и затем многократно использовать их для неограниченного количества страниц.
- Высокая скорость загрузки страниц - благодаря CSS существенно сокращается длина кода HTML, что, в свою очередь, приводит к более быстрой загрузке веб-страниц.
#Tech Orda 2024, #Astana Hub, #IT-incubator
More from this author
Share
