Введение в CSS. Как работает CSS? Используйте правило CSS transform для получения интересных эффектов при наведении курсора мыши на элемент
Presenting a document to a user means converting it into a usable form for your audience. Browsers , like , or Internet Explorer , are designed to present documents visually, for example, on a computer screen, projector or printer.
How does CSS affect HTML?
Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from:
- A set of properties , which have values set to update how the HTML content is displayed, for example, I want my element"s width to be 50% of its parent element, and its background to be red .
- A selector , which selects the element(s) you want to apply the updated property values to. For example, I want to apply my CSS rule to all the paragraphs in my HTML document .
A set of CSS rules contained within a stylesheet determines how a webpage should look. You will learn a lot more about what CSS syntax looks like in the next article of the module - CSS Syntax .
A quick CSS example
The above descriptions may or may not have made sense, so let"s make sure things are clear by presenting a quick example. First of all, let"s take a simple HTML document, containing an
and a element represents a paragraph.">
(notice that a stylesheet is applied to the HTML using a element):
Hello World!
This is my first CSS example
Now let"s look at a very simple CSS example containing two rules:
H1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; }
The first rule starts with an h1 selector, which means that it will apply its property values to the
element. It contains three properties and their values (each property/value pair is called a declaration
):
- The first one sets the text color to blue.
- The second sets the background color to yellow.
- The third one puts a border around the header that is 1 pixel wide, solid (not dotted, or dashed, etc.), and colored black.
The second rule starts with a p selector, which means that it will apply its property values to the element represents a paragraph.">
element. It contains one declaration, which sets the text color to red.
In a web browser, the code above would produce the following output:
This isn"t too pretty, but at least it starts to give you an idea of how CSS works.
Active learning: Writing your first CSS
Now we"ll give you a chance to write your own bit of CSS. You can do this using the Input areas below, in the live editable example. In a similar fashion to what you saw above, you"ve got some simple HTML elements and some CSS properties. Try adding some simple declarations to your CSS, to style the HTML.
If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see a potential answer.
Playable code
HTML Input
CSS Input
Output
How does CSS actually work?
When a browser displays a document, it must combine the document"s content with its style information. It processes the document in two stages:
- The browser converts HTML and CSS into the (Document Object Model ). The DOM represents the document in the computer"s memory. It combines the document"s content with its style.
- The browser displays the contents of the DOM.
About the DOM
A DOM has a tree-like structure. Each element, attribute and piece of text in the markup language becomes a DOM node in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings.
Understanding the DOM helps you design, debug and maintain your CSS because the DOM is where your CSS and the document"s content meet up.
DOM representation
Rather than a long, boring explanation, let"s take an example to see how the DOM and CSS work together.
Let"s assume the following HTML code:
In the DOM, the node corresponding to our
Element is a parent. Its children are a text node and the nodes corresponding to our elements. The SPAN nodes are also parents , with text nodes as their children:
P ├─ "Let"s use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"
This is how a browser interprets the previous HTML snippet -it renders the above DOM tree and then outputs it in the browser like so:
Applying CSS to the DOM
Let"s say we added some CSS to our document, to style it. Again, the HTML is as follows:
Let"s use: Cascading Style Sheets
If we apply the following CSS to it:
Span { border: 1px solid black; background-color: lime; }
The browser will parse the HTML and create a DOM from it, then parse the CSS. Since the only rule available in the CSS has a span selector, it will apply that rule to each one of the three spans. The updated output is as follows:
How to apply your CSS to your HTML
There are three different ways to apply CSS to an HTML document that you"ll commonly come across, some more useful than others. Here we"ll briefly review each one.
External stylesheet
You"ve already seen external stylesheets in this article, but not by that name. An external stylesheet is when you have your CSS written in a separate file with a .css extension, and you reference it from an HTML element. The HTML file looks something like this:
Hello World!
This is my first CSS example
Представление документа пользователю значит его конвертацию в понятную для пользователя форму. Браузеры , такие как Firefox , Chrome или Internet Explorer , предназначены для представления документов визуально, например, на экране компьютера, проектора или принтера.
Как CSS влияет на HTML?
Браузер применяет CSS правила к документу, чтобы описать, как он будет отображаться. CSS-правила формируются из:
- Набора свойств , которые имеют значения, устанавливающие, как будет отображаться содержимое(HTML), Например Я хочу, чтобы ширина элемента равнялась 50% ширины родительского элемента, и его фон был красным .
- Селектор , который выбирает (англ. selects) элемент/элементы, к которым вы хотите применить измененные значения. Например, Я хочу применить это CSS-правило ко всем параграфам в моем HTML-документе .
Набор правил CSS, содержащихся в таблице стилей(stylesheet), определяет, как должна выглядеть веб-страница. Более подробно о синтаксисе CSS вы узнаете в следующей статье модуля - .
Краткий пример CSS
Описания, приведенные выше могут быть непонятны, поэтому подкрепим теорию небольшим практическим примером. Прежде всего, давайте рассмотрим простой HTML-документ, содержащий
и определяет собой абзац текста.">
(заметьте, что таблица стилей применяется к HTML с использованием элемента ):
Hello World!
Это мой первый CSS-пример
Теперь давайте посмотрим на очень простой пример CSS, содержащий два правила:
Первое правило начинается с селектора h1 , который означает, что оно будет применено к элементу
. Оно содержит три свойства и три значения(каждая пара свойство/значение называется объявление
):
- Первое объявление меняет цвет текста на синий.
- Второе выставляет желтый фон тексту.
- Третье создает границу вокруг текста шириной 1 пиксель, сплошную(не пунктирную, не штрих-пунктирную) и окрашенную в черный цвет.
Второе правило начинается с селектора p , который значит, что оно применится к элементу определяет собой абзац текста.">
. Оно содержит одно объявление, которое меняет цвет текста на красный.
Приведенный выше код в браузере отобразится вот так:
Это не очень красиво, но показывает, как работает CSS.
Активное обучение: Пишем наш первый CSS
Сейчас мы дадим вам возможность написать свой первый CSS. Вы можете сделать это, используя поле ввода, расположенное ниже, и увидеть это на живом редактируемом примере. У нас есть некоторые простые элементы HTML, а также некоторые свойства CSS. Так же, как показано выше, попробуйте добавить простые объявления в CSS, чтобы определить стиль HTML.
Если вы сделаете ошибку, вы всегда можете сделать сброс, используя кнопку Reset. Если вы чувствуете, что застряли, можете нажать "Показать решение", чтобы посмотреть решение.
Playable code
HTML Input
CSS Input
Output
Как на самом деле работает CSS?
Когда браузер отображает документ, он совмещает содержимое документа с информацией о стиле. Он обрабатывает документ в два этапа:
- Браузер конвертирует HTML и CSS в DOM (англ. Document Object Model ). DOM представляет документ в память компьютера и применяет к содержимому стили.
- Браузер отображает содержимое DOM.
О DOM
DOM имеет древовидную структуру. Каждый элемент, атрибут и кусочек текста в языке разметки представляется как узел DOM в этой структуре. Узлы определяются их отношением к другим DOM-узлам. Элементы могут иметь потомков, а потомки могут иметь братские(соседние) элементы.
Понимание DOM поможет вам в проектировании, отладке и поддержке вашего CSS, потому что DOM это место, в котором CSS встречается с содержимым документа.
Представление DOM
Вместо долгих и скучных объяснений давайте рассмотрим пример, который покажет, как DOM и CSS работают вместе.
Давайте рассмотрим представленный HTML-код:
В DOM узел, соответствующий элементу
Является родителем. Его дети являются текстовыми узлами и соответствуют элементу . Узлы SPAN также являются родителями, а их потомки -- текстовые элементы:
P ├─ "Let"s use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"
После интерпретации DOM-дерева браузером на выходе мы получим вот это:
Применение CSS к DOM
Let"s use: Cascading Style Sheets
Мы применим к нему этот CSS:
Span { border: 1px solid black; background-color: lime; }
Браузер проанализирует HTML и создаст DOM из него, а затем разберется с CSS. Поскольку у нас есть только одно правило, описывающее селектор span,то оно будет применено ко всем узлам документа с этим селектором. На выходе получим это.
Как применить ваш CSS к вашему HTML
Есть три различных варианта применения CSS к HTML-документу, которые встречаются чаще всего. Здесь мы рассмотрим каждый из них.
Внешняя таблица стилей
Вы уже сталкивались с внешней таблицей стилей в этой статье, но называли ее не так. Внешняя таблица стилей это отдельный файл с расширением.css, в котором и хранится CSS. Вы ссылаетесь на него из HTML при помощи элемента . HTML при этом выглядит так:
Hello World!
This is my first CSS example
Добавим CSS-файл:
H1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; }
Этот метод, вероятно, лучший из всех, поскольку вы можете использовать одну таблицу стилей для нескольких документов. Чтобы обновить стили, достаточно внести изменения лишь в один CSS-файл.
Внутренняя таблица стилей
Внутренняя таблица стилей содержится внутри элемента содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS.">
Hello World!
This is my first CSS example