. div tag creates separate boxes or containers for all elements inside this tag like text, images, paragraphs. Properties Div Tag Span Tag Elements Types Block-Level Inline Space/Width Contain Whole Width Available Takes only required Width Examples Headings, Paragraph, form Attribute, image Uses Web-layout container for some text Attributes Not required,with common css, class Not required,with common css, class The span tag does not create a line break similar to a div tag, but rather allows the user to separate things from other elements around them on a page within the same line. avoiding of line break, results only that selected text to change, keeping all the other elements around them same. Below example will display the difference between span and div tag while div tag contains whole width and span tag contain only required width and rest parts are free for another element. Источник
. div tag creates separate boxes or containers for all elements inside this tag like text, images, paragraphs. Properties Div Tag Span Tag Elements Types Block-Level Inline Space/Width Contain Whole Width Available Takes only required Width Examples Headings, Paragraph, form Attribute, image Uses Web-layout container for some text Attributes Not required,with common css, class Not required,with common css, class The span tag does not create a line break similar to a div tag, but rather allows the user to separate things from other elements around them on a page within the same line. avoiding of line break, results only that selected text to change, keeping all the other elements around them same. Below example will display the difference between span and div tag while div tag contains whole width and span tag contain only required width and rest parts are free for another element. Источник
В сегодняшней статье мы рассмотрим классы в CSS и их взаимосвязь с языком гипертекста. HTML — теги и CSS связаны напрямую. Эта взаимосвязь позволяет определить, как выглядит тег или как он ведет себя при использовании его имени в таблице стилей:
Но зачастую требуется больше контроля, чем просто делать каждый экземпляр тега одинаковым. Если бы все ячейки HTML-таблицы были выполнены в одном стиле, это выглядело бы непрактично. К примеру, если вам нужно выделить определенные данные.
Поэтому CSS предоставляет нам два разных определения, которые мы можем использовать — CSS классы и идентификаторы.
CSS классы — когда их использовать
Когда у вас на странице есть повторяющиеся элементы, которые должны иметь одинаковое оформление, нужно использовать CSS классы . Для этого необходимо выполнить два шага:
Шаг 1 — добавить класс в HTML
Чтобы повлиять на внешний вид HTML-страницы , вы должны сначала разметить элементы с атрибутом class=»class-name» . Вот пример:
Контейнер 1
Контейнер 2
Контейнер 3
В данном примере я хочу создать три контейнера одинакового размера. Возможно, я захочу запустить галерею изображений, или поместить в них изображения в качестве HTML — ссылки для перехода на другие страницы. При этом все контейнеры должны быть одинаковыми.
Давайте посмотрим, что нужно сделать в нашем CSS :
Чтобы задать правило для определенного тега с CSS классом, а не просто определить tagname < >, мы используем tagname.classname < >. Точка между tagname и classname является тем, что определяет правило как CSS класс. Также обратите внимание, что там нет пробелов. Если поставить пробел в правиле, то оно не будет работать так, как вы планировали.
В этом примере использовалось свойство margin-right:10px . Эта строка гарантирует, что между тремя контейнерами сохраняется пространство в 10 пикселей. Свойство float со значение left обеспечивает, чтобы все контейнеры размещались слева.
Такое сочетание должно дать вам что-то вроде этого:
Если вы не укажете класс
Чтобы показать вам, что ваш CSS класс изображения box применяется только там, где вы хотите, поместите дополнительный элемент после « Контейнер 3 »:
Обновите страницу. Вы увидите, что ни одно из правил, установленных в div.box <> не применяется. Потому что вы не указали значение класса.
Вот почему этот вариант использования классов CSS более гибкий, чем простое tagname < >. На странице может быть много элементов , но стили будут применяться только к тем, в которых задано соответствующее значение атрибута class !
Использование более чем одного класса
В современном веб-дизайне для элемента иметь только один класс CSS — редкость. Давайте возьмем наши три квадрата и посмотрим, что произойдет, если вы захотите перекрасить каждый из них.
Чтобы указать, что вы хотите использовать в CSS несколько классов, нужно добавить следующий класс через пробел. Как здесь:
Контейнер 1
Контейнер 2
Контейнер 3
Расположение каскадом
Поскольку стили CSS используют каскадный порядок, вы размещаете свои классы по уровню важности. В данном случае мы хотим, чтобы класс class=»box» применялся перед class=»red» . Иначе class=»red» будет применяться до class=»box» . Надеюсь, это понятно!
Поскольку у каждого из трех контейнеров есть CSS класс .box , к ним всем применяются свойства, прописанные в div.box . Но к каждому применяется также дополнительный класс ( red , green , или blue ). Конечный результат:
Примечание: несмотря на то, что div.box определяет background-color:#cccccc ; « цветовые » классы определяются после него. Например, в box red свойство background-color , указанном в div.red , перезаписывает аналогичное свойство в div.box . Это то, что подразумевается под каскадом: в CSS логике определяется сверху вниз. А при определении классов HTML — слева направо.
CSS классы при создании макета сайта
Подумайте, для каких элементов нужно использовать CSS классы при верстке макета страницы. Вот некоторые мысли для подсказки:
Любые изображения, которые вам захочется сделать иконками или изображением товара, придется сделать в форме квадрата: например img.thumbnail < width:200px;height:200px; >;
Стили ссылок для кнопок должны определяться отдельно от стилей обычных ссылок. Например, a.button <> ;
Нужно применить другой цвет при наведении курсора на ссылки в вашей навигации. Например, a.nav:hover < >a.nav: Hover <> .
Классы DR CSS; TL
Эффективное использование классов позволяет элементу страницы дать имя, которое понимает CSS . Используя эти «имена» можно применить один ряд правил для нескольких экземпляров элемента без повторного определения кода CSS .
И поскольку они располагаются каскадом, порядок в котором вы размещаете свои классы в HTML , действительно имеет значение, так что следите за этим.
Если у вас есть какие-либо вопросы, не стесняйтесь задать их в комментариях!
ВЛ Виктория Лебедева автор-переводчик статьи « Using CSS Classes – A Handy Guide »
The HTML class attribute is used to specify a class for an HTML element.
Multiple HTML elements can share the same class.
Using The class Attribute
The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.
In the following example we have three elements with a class attribute with the value of «city». All of the three elements will be styled equally according to the .city style definition in the head section:
Example
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
In the following example we have two elements with a class attribute with the value of «note». Both elements will be styled equally according to the .note style definition in the head section:
Example
My Important Heading
This is some important text.
Tip: The class attribute can be used on any HTML element.
Note: The class name is case sensitive!
Tip: You can learn much more about CSS in our CSS Tutorial.
The Syntax For Class
To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces <>:
Example
Create a class named «city»:
London is the capital of England.
Paris is the capital of France.
Tokyo is the capital of Japan.
Multiple Classes
HTML elements can belong to more than one class.
To define multiple classes, separate the class names with a space, e.g. . The element will be styled according to all the classes specified.
In the following example, the first element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes:
Example
London
Different Elements Can Share Same Class
Different HTML elements can point to the same class name.
In the following example, both and
point to the «city» class and will share the same style:
Example
Use of The class Attribute in JavaScript
The class name can also be used by JavaScript to perform certain tasks for specific elements.
JavaScript can access elements with a specific class name with the getElementsByClassName() method:
Example
Click on a button to hide all elements with the class name «city»:
Don’t worry if you don’t understand the code in the example above.
You will learn more about JavaScript in our HTML JavaScript chapter, or you can study our JavaScript Tutorial.
Chapter Summary
The HTML class attribute specifies one or more class names for an element
Classes are used by CSS and JavaScript to select and access specific elements
The class attribute can be used on any HTML element
The class name is case sensitive
Different HTML elements can point to the same class name
JavaScript can access elements with a specific class name with the getElementsByClassName() method
The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc). Div tag has both open (
) and closing (
) tag and it is mandatory to close the tag. The Div is the most usable tag in web development because it helps us to separate out data in the web page and we can create a particular section for particular data or function in the web pages.
Div tag is Block level tag
It is a generic container tag
It is used to group various tags of HTML so that sections can be created and styles can be applied to them.
As we know Div tag is block-level tag, the div tag contains entire width. Hence, every div tag will start from a new line, and not the same line.
html
As we know, div tag is used for grouping HTML elements together and to apply CSS and create web layouts using it. In the below example we don’t use div tag and hence we need to apply CSS for each tag (in the example using H1 H2 and two paragraphs p tags)
html
Creating Web Layout using Div Tag The div tag is a container tag. Inside div tag, we can put more than one HTML element and can group them together and apply CSS for them. Div tag can be used for creating a layout of web pages. In the below example we had created a web layout using the div tag. We can also create web layouts using table tag but table tags are very complex to modify the layout. The div tag is very flexible in creating web layouts and easy to modify. The below example will show grouping of HTML element using div tag and create block-wise web layout.
html
Using Div tag we can cover the gap between the heading tag and the paragraph tag. This example will display a web layout with three blocks.
We can use CSS in any of the divisions ( tag) using the following methods:
1. Using class: We can use class on that particular div and apply CSS either inside a tag or linking an external CSS file.
html
html
2. Inline CSS: We can directly use CSS in div also. This method does not require class. Div in HTML coding is used as a container tag also because it is the one that can contain all other tags.
html
Difference Between div tag and span tag
The div and span tags are two commonly used tags when creating pages using HTML and performs different functionality. While div tag is a block level element and span is an inline element The div tag creates a line break and by default creates a division between the text that comes after the tag as begun and until the tag ends with
. div tag creates separate boxes or containers for all elements inside this tag like text, images, paragraphs.
Properties
Div Tag
Span Tag
Elements Types
Block-Level
Inline
Space/Width
Contain Whole Width Available
Takes only required Width
Examples
Headings, Paragraph, form
Attribute, image
Uses
Web-layout
container for some text
Attributes
Not required,with common css, class
Not required,with common css, class
The span tag does not create a line break similar to a div tag, but rather allows the user to separate things from other elements around them on a page within the same line. avoiding of line break, results only that selected text to change, keeping all the other elements around them same. Below example will display the difference between span and div tag while div tag contains whole width and span tag contain only required width and rest parts are free for another element.
