Селекторы тега, класса (class), id и универсальные, а так же селекторы атрибутов в современном css
Содержание:
- CSS Advanced
- Использование id атрибута в Javascript
- Каскадирование css стилей
- The декларация
- HTML Tags
- Различия между классами и идентификаторами
- CSS Advanced
- Class или id — что использовать?
- HTML Tutorial
- CSS Reference
- CSS Properties
- Значение и применение
- Разное
- Присвоение идентификатора элементу
- What is CSS?
- Просмотр кода элемента в браузере MozillaFirefox
- CSS Exam — Get Your Diploma!
- W3Schools’ Online Certification
- HTML и CSS
- Часть 3. Медиа-запросы
- Стили элемента
CSS Advanced
CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients
CSS Shadows
Shadow Effects
Box Shadow
CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries
CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive
Использование id атрибута в Javascript
JavaScript может получить доступ к элементу с указанным идентификатором с помощью метода getElementById ():
Пример ниже показывает как с помощью атрибута id можно манипулировать текстом:
<script>
function displayResult() {
document.getElementById(«myHeader»).innerHTML = «Have a nice day!»;
}
</script>
|
1 |
<script> functiondisplayResult(){ document.getElementById(«myHeader»).innerHTML=»Have a nice day!»; } |
Так выглядит текст пока кнопка не зажата:
После нажатия на кнопку «Change Text» мы получим изменение текста с идентификатором #myHeader по которому обращается Яваскрипт:
Каскадирование css стилей
Каскадирование css стилей означает преемственность применения того или иного стиля в зависимости от используемого метода подключения css. Рассмотрим на примере:
На примере видно, что приоритетным является использования стилей. Следующим по приоритету следует и только потом — (стиль в отдельном файле)
Важно: В случае, если пользовательская таблица стилей содержит , то это правило имеет приоритет над любым правилом, описанным в таблице стилей:
P { font-size 24pt!important; }
|
Пример: создать правило для дочернего класса , исходя из того, что тег данного класса вложен в родительский тек с классом
Тег с классом будет иметь цвет , а тег с классом — . Однако, если мы уберем свойство у селектора , то цвет дочернего элемента наследуется от родителя и станет равным . В этом заключается особенность наследования.
The декларация
HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:
<!DOCTYPE html>
Cуществует несколько видов DOCTYPE. Есть строгие виды (strict), которые работают на основе только определенных тегов, есть переходные (transitional), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset).
В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.
HTML 4.01 Strict
Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
В версии HTML5 есть только один doctype и определяется он следующим образом:
<!DOCTYPE html>
Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.
По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.
При отсутствии тега <!DOCTYPE> разные Web-браузеры мо
гут по-разному отображать веб-страницу.
Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).
HTML Tags
<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
Различия между классами и идентификаторами
Вполне логичный вопрос, так чем же пользоваться в итоге, если можно применять и тот, и другой способы? Ответ простой. Идентификатор id по принципу приоритета стоит выше класса, т.е если у элемента будет сначала прописан идентификатор, а потом за другим элементов пойдет класс, то браузер сначала исполнит запрос в таблице стилей к идентификатору id, а уже потом к классу! Это нужно просто запомнить.
И еще элемент в html может иметь только один идентификатор, в то время как имя класса может использоваться несколькими элементами!
<style>
/* Style the element with the id «myHeader» */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name «city» */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!— A unique element —>
<h1 id=»myHeader»>My Cities</h1>
<!— Multiple similar elements —>
<h2 class=»city»>London</h2>
<p>London is the capital of England.</p>
<h2 class=»city»>Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class=»city»>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
|
1 |
<style> #myHeader { background-colorlightblue; colorblack; padding40px; text-aligncenter; } .city { background-colortomato; colorwhite; padding10px; } </style> <!—Aunique element—> <h1 id=»myHeader»>My Cities</h1> <!—Multiple similar elements—> <h2 class=»city»>London</h2> <p>London isthe capital of England.</p> <h2 class=»city»>Paris</h2> <p>Paris isthe capital of France.</p> <h2 class=»city»>Tokyo</h2> <p>Tokyo isthe capital of Japan.</p> |
Результат:
CSS Advanced
CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients
CSS Shadows
Shadow Effects
Box Shadow
CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries
CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive
Class или id — что использовать?
На самом деле, нельзя выбирать, что использовать: class или id. Это на подобии, как выбирать, что лучше: есть или пить? Пользоваться необходимо и классами и идентификаторами, в зависимости от поставленной цели. В большинстве случаев лучше использовать class, чтобы нечаяно не использовать id на одной странице более одного раза. Но там где необходимо, нужно применять id: выделение уникального блока страницы, для якорей, для JS и др.
Опубликовано: 2011/06/07
HTML-код ссылки на эту страницу:
<a href=»https://petrenco.com/html_css.php?txt=50″ target=»_blank»>CSS id или class</a>
78977
HTML Tutorial
HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors
Colors
RGB
HEX
HSL
HTML CSSHTML Links
Links
Link Colors
Link Bookmarks
HTML Images
Images
Image Map
Background Images
The Picture Element
HTML TablesHTML Lists
Lists
Unordered Lists
Ordered Lists
Other Lists
HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities
CSS Properties
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
Значение и применение
Селектор класса в CSS.
Селектор .class стилизует все элементы с указанным классом. После имени идет блок описаний (объявлений), содержащий свойства и их значения.
Обратите внимание на следующие правила, которые необходимо соблюдать при работе с селекторами класса:
- все названия селекторов класса должны начинаться с точки (благодаря ей браузеры находят эти селекторы в таблице стилей). Точка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута class она не ставится, будьте внимательны из-за этого возникает много ошибок).
- используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
- название после точки всегда должно начинаться с символа (неправильно: .50cent, .-vottakvot).
- Учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot и .VotTakVot разные классы).
Разное
— поиск
— блок иконок соцсетей
, , , — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)
, — список основных особенностей товара, услуги
, — слайдер, интерактивный элемент с прокруткой содержимого
— постраничная навигация
, — пользователь, автор записи или комментария
— блок с дополнительной информацией, например, блок тегов и даты в посте
, — корзина
— навигационная цепочка, «хлебные крошки»
, — ссылка на полную информацию
— модальное (диалоговое) окно
— всплывающее окно
, — всплывающее подсказки
— анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию
— перекрывающий слой, например, для затемнения изображений или создания модальных окон
Присвоение идентификатора элементу
Атрибут элемента — это идентификатор, который должен быть уникальным во всем документе. Его цель состоит в том, чтобы однозначно идентифицировать элемент при ссылке на него, написании сценариев или стилизации (с помощью CSS).
У вас не должно быть двух элементов с одинаковым идентификатором в одном документе, даже если атрибуты привязаны к двум различным типам элементов. Например, следующий код неверен:
Браузеры сделают все возможное, чтобы выполнить этот код, но может возникнуть неожиданное поведение при стилизации или добавлении функциональности с помощью JavaScript.
Чтобы ссылаться на элементы по их идентификатору в CSS используйте префикс перед идентификатором:
Чтобы перейти к элементу с идентификатором на заданной странице, добавьте с элемента в URL-адрес:
Эта функция поддерживается в большинстве браузеров и не требует дополнительной работы JavaScript или CSS.
What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what background
images or background colors are to be used, different displays for different devices
and screen sizes, and much more!
Tip: The word cascading means that a style
applied to a parent element will also apply to all children elements within the
parent. So, if you set the color of the body text to «blue», all headings,
paragraphs, and other text elements within the body will also get the same color (unless you specify
something else)!
Просмотр кода элемента в браузере MozillaFirefox
На мой взгляд, данный этот браузер лучше всего подходит для данной цели особенно если на него ещё установить расширение Fire Bug, но для начала нам и стандартного функционала хватит.
В этом браузере есть такая замечательная штука как инспектор элементов страницы, который отображает подсвеченный код нужного вам элемента на странице.
Для того чтобы узнать ID или CSS класс элемента достаточно выполнить несколько шагов:
- 1.Щёлкаем правой кнопкой мышки по странице и в открывшемся меню выбираем пункт «Исследовать элемент» (в зависимости от версии браузера этот пункт может называться немного по другому)
- 2.После этого у вас внизу экрана появится горизонтальная панель, в которой будет отображаться код страницы. Если вы будете наводить курсор мышки на разные участки этого кода, то у вас на странице будут подсвечиваться элементы, которые соответствуют данному коду. Таким образом, водя курсором мышки по коду и подсвечивая элементы можно вычислить нужный участок кода и скопировать его название класса или идентификатора.
Но можно сделать ещё проще!
3.Находим на нижней панели инспектора в левом верхнем углу значок со стрелочкой и нажимаем на него. Далее нам нужно щёлкнуть мышью по тому элементу на сайте, для которого мы хотим определить класс или ID и нам автоматически подсветится его код из которого мы можем скопировать то что нам нужно.
В случае с формой Contact Form 7 для того чтобы узнать её идентификатор нам нужно в коде найти участок подобный тому что на скриншоте в красной рамке и там найти значение id=”идентификатор”, то что указано в кавычках и есть название идентификатора. Аналогично и с классом. Находим запись class=”название класса” и копируем то, что в кавычках.
4.Для того чтобы скопировать название класса лучше всего щёлкнуть по нему 2 раза левой кнопкой мышки, а уже потом выделить и скопировать.
5.После того как инспектор стал вам не нужен вы можете закрыть эту панель щёлкнуть на крестик в верхнем правом углу.
CSS Exam — Get Your Diploma!
W3Schools’ Online Certification
The perfect solution for professionals who need to balance work, family, and career building.
More than 25 000 certificates already issued!
The HTML Certificate documents your knowledge of HTML.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The Python Certificate documents your knowledge of Python.
The jQuery Certificate documents your knowledge of jQuery.
The SQL Certificate documents your knowledge of SQL.
The PHP Certificate documents your knowledge of PHP and MySQL.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The Bootstrap Certificate documents your knowledge of the Bootstrap framework.
❮ Home
Next ❯
HTML и CSS
CSS и HTML — это два разных языка для разных целей.
При написании html-кода для CSS, выбирая теги, ориентируйтесь на роль, которую играет фрагмент текста на веб странице, а не на внешний вид, который текст приобретает благодаря этому тегу.
Применяя CSS для дизайна веб-страницы, вы используете HTML только по его прямому назначению, то есть именно для разметки веб-страницы на логические фрагменты, не заботясь о форматировании и внешнем виде страницы.
Небольшой пример использования CSS:
С помощью стилей, картинка была позиционирована с левой стороны, а для текста был изменен размер, цвет и добавлена тень.
В браузере Internet Explorer 9 и в более ранних версиях не поддерживается свойство, добавляющее тень к тексту.
Часть 3. Медиа-запросы
Медиа-запросы в CSS — это база для создания отзывчивой верстки, позволяющая стилизовать элементы в зависимости от размера экрана или устройства, на котором отображается веб-сайт. Технически Медиа-запрос — это простое логическое выражение, которое может быть или истинным или ложным. Условиями для такого выражения являются либо параметры устройства, на котором отображается веб-страница, либо размер экрана в пикселах.
В данном руководстве мы рассмотрим базовые возможности медиа-запросов, которые необходимы для адаптивной верстки сайтов и практически полезны.
Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:
Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.
Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:
Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.
Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.
Размещение свойств в медиа-запросе не дает никакого приоритета, поэтому логичней размещать медиа-запросы в конце CSS документа, либо загружать тегом link внешний CSS файл с медиа-запросами после загрузки основных стилей сайта для правильного переопределения последних на разных разрешениях или на различных устройствах.
Стили элемента
В DOM у каждого элемента есть свойство , с помощью которого мы можем управлять его стилями. Значение данного свойства — это объект, который доступен только для чтения. Установка стилей элементу в этом случае осуществляется посредством добавления к нему соответствующих свойств.
Пример, как можно к элементу добавить стили через DOM-свойство :
<div class="square">Квадрат</div>
<script>
var square = document.querySelector('.square');
square.style.width = '170px';
square.style.height = '170px';
square.backgroundColor = 'green';
</script>
Имена свойств объекта обычно совпадают с названиями CSS-свойств. Исключение составляют только те CSS-свойства, в которых используется дефис. Например, . В этом случае дефис и следующая за ним буква заменяется на прописную. Например, CSS-свойство для объекта будет указывать как . А, например, CSS-свойство с браузерным префиксом — как .
Удаление стилей
Например, установим некоторый цвет фона:
document.body.style.backgroundColor = '#eee';
Если теперь данный стиль нужно убрать, то чтобы это выполнить мы должны просто присвоить ему пустую строку:
document.body.style.backgroundColor = '';
Примеры использования DOM-свойства style для установки стилей элементам.
<p id="introtext" style="font-weigth: bold;">...</p>
<p>...</p>
<p>...</p>
<script>
// установим элементу с id = "introtext" с использованием style красный цвет текста
document.querySelector('#introtext').style.color = 'red';
// установим всем элементам p на странице с использованием style зелёный цвет текста
var paragraphs = document.querySelectorAll("p");
for (var i = 0, length = paragraphs.length; i < length; i++) {
paragraphs.style.backgroundColor = 'green';
}
// выведем в консоль все CSS свойства элемента с идентификатором "introtext"
var styleElem = document.querySelector('#introtext').style;
for (var i = 0, length = styleElem.length; i < length; i++) {
console.log(styleElem);
}
</script>
Свойство cssText
Кроме индивидуального установления стилей элементу мы можем установить их сразу с помощью специального свойства . Осуществляется это посредством присваивания этому свойству строки, состоящей из набора стилей, разделённых между собой с помощью точки с запятой. Т.е. выполняется это аналогично тому, как мы устанавливаем стили в HTML-атрибуте .
Пример, в котором установим стили элементам с классом :
<p class="intro">...</p>
<script>
//получим элементы с классом intro
var intro = document.querySelectorAll("intro");
//установим "font-size:40px; color:blue;" всем элементам в коллекции, содержащейся в intro
for (var i = 0, length = intro.length; i < length; i++) {
intro.style.cssText = "font-size:40px; color:blue;";
}
</script>
При установке стилей с помощью свойства нужно быть осторожным. Эти связано с тем, что при установке это свойство удаляет все стили, которые есть у элемента. Т.е. те, которые мы установили ему с помощью атрибута и в соответствующем ему DOM-свойстве.
Выполнить операцию, аналогичную той которую выполняет свойство , можно ещё через метод .
Например:
<p class="info">...</p>
<script>
//получим первый элемент с классом intro
var info = document.querySelector("info");
//установим ему стиль "margin: 10px; padding: 10px; border: 1px solid green;"
info.setAttribute('style', 'margin: 10px; padding: 10px; border: 1px solid green;');
</script>
