Содержание
- 1 CSS Tutorial
- 2 X:last-child
- 3 X[href^=»http»]
- 4 1.*
- 5 HTML Tutorial
- 6 CSS Tutorial
- 7 Универсальный селектор
- 8 X>Y
- 9 Селекторы элементов
- 10 Атрибуты
- 11 The CSS class Selector
- 12 X[foo~=»bar»]
- 13 Multiple Style Sheets
- 14 X:first-of-type
- 15 Setting The Viewport
- 16 Общий синтаксис таблиц стилей¶
- 17 Селектор class
- 18 Тип ввода отправить
- 19 HTML Tutorial
- 20 Relative Lengths
CSS Tutorial
CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL
CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand
CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
CSS Margins Margins Margin Collapse
CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand
CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples
CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar
CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity
X:last-child
CSS
ul > li:last-child { color: green; }
1 2 3 |
ul > li:last-child { colorgreen; } |
В противоположность first-child, last-child выделит последний пункт родителя элемента.
Пример
Давайте построим простой пример для демонстрации одного из возможных способов использования этих классов. Создадим элемент списка, имеющий стили.
Разметка
XHTML
<ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>
1 2 3 4 5 | <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> |
Здесь нет ничего особенного; всего лишь простой список.
CSS
CSS
ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0; }
li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c; }
1 2 3 4 5 6 7 8 9 10 11 12 13 |
ul { width200px; background#292929; colorwhite; list-stylenone; padding-left; } li { padding10px; border-bottom1pxsolidblack; border-top1pxsolid#3c3c3c; } |
Эти стили установят фон, удалят отступ браузера по умолчанию в ul, и применят к каждому li рамки для обеспечения глубины.
Для добавления в свои списки глубины примените border-bottom к каждому li, на оттенок или два темнее, чем цвет фона li. Затем примените border-top на пару оттенков светлее.
Как видно на изображении вверху, единственная проблема состоит в том, что рамка будет применяться к самому верху и низу неупорядоченного списка – это выглядит странно. Давайте для устранения этой проблемы используем псевдоклассы :first-child и :last-child.
CSS
li:first-child { border-top: none; }
li:last-child { border-bottom: none; }
1 2 3 4 5 6 7 |
li:first-child { border-topnone; } li:last-child { border-bottomnone; } |
Вот так; все исправлено!
X[href^=»http»]
CSS
a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }
1 2 3 4 |
a { backgroundurl(path/to/external/icon.png)no-repeat; padding-left10px; } |
Когда-нибудь интересовались, каким образом некоторые веб сайты могут отображать маленькую иконку рядом с внешними ссылками? Я уверен, вы такое уже видели; они отлично напоминают о том, что ссылка направит вас на совершенно другой веб сайт.
Это легко делается при помощи знака ^ («карат»). Чаще всего он используется в регулярных выражениях для обозначения начала строки. Если нужно выбрать все тэги-зацепки, имеющие href, начинающийся с http, можно применить селектор, подобный вышеуказанному фрагменту.
Обратите внимание, что мы не ищем http://; он не нужен и не несет ответственности за url’ы, начинающиеся с https://. Теперь, если бы нам было нужно вместо этого определить стиль всем привязкам, которые ссылаются на, скажем, фотографию? В этом случае давайте поищем конец строки
Теперь, если бы нам было нужно вместо этого определить стиль всем привязкам, которые ссылаются на, скажем, фотографию? В этом случае давайте поищем конец строки.
1.*
CSS
* { margin: 0; padding: 0; }
1 2 3 4 |
* { margin; padding; } |
Давайте перед тем, как перейти к более продвинутым селекторам CSS, мы с новичками одолеем самые простые и очевидные.
Знак звездочки выберет каждый отдельный элемент страницы. Многие разработчики используют этот прием для обнуления margin и padding. Хотя он, безусловно, хорош для быстрых проверок, я бы советовал вам никогда не пользоваться им в продуктивном коде. Он добавляет слишком много веса браузеру и не является необходимым.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Звездочку * также можно использовать для дочерних селекторов.
CSS
#container * { border: 1px solid black; }
1 2 3 |
#container * { border1pxsolidblack; } |
Он выберет каждый отдельный элемент, являющийся дочерним div’у #container. И еще раз, старайтесь не пользоваться этим приемом слишком часто, или вообще не пользуйтесь.
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 Tutorial
CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL
CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand
CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
CSS Margins Margins Margin Collapse
CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand
CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples
CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar
CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity
Универсальный селектор
Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы.
Для обозначения универсального селектора применяется символ звёздочки (*).
В данном случае для всех элементов задаётся нормальное начертание текста. Таким образом, элементы с жирным начертанием по умолчанию (вроде <h1>) теряют свою «жирность».
Универсальный селектор, как правило, применяется для сброса CSS. Цель сброса — приведение стилей разных браузеров к одному виду. Для каждого элемента браузер задаёт стиль по умолчанию, при этом возможны небольшие различия в отображении элемента в разных браузерах. Чтобы убрать эти различия и применяется сброс. На деле вопрос, использовать сброс CSS или нет, спорный, каждый решает его по своему.
В примере 6 показано обнуление свойства margin для всех элементов веб-страницы.
Пример 6. Использование универсального селектора
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Универсальный селектор</title> <style> * { margin: 0; /* Обнуляем значение */ } header { background: navy; /* Цвет фона */ color: white; /* Цвет текста */ padding: 10px; /* Поля */ } </style> </head> <body> <header><h1>Амфифильный суглинок</h1></header> </body> </html>
Результат данного примера показан на рис. 6.
X>Y
CSS
div#container > ul { border: 1px solid black; }
1 2 3 |
div#container > ul { border1pxsolidblack; } |
Разница между обычным X Y и X > Y состоит в том, что последний выберет только прямые дочерние элементы. Например, рассмотрите следующую разметку.
XHTML
<div id=»container»> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id=»container»> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div> |
Селектор #container > ul выберет своей целью только те ul’ы, которые являются прямыми потомками div’а с id container. Он не выберет, например, ul –потомок первого li.
По этой причине преимущества производительности имеются в использовании дочернего комбинатора. Собственно, он чрезвычайно рекомендуется при работе с движками селекторов CSS, основанных на JavaScript.
Селекторы элементов
В качестве селектора выступает имя любого элемента HTML, но без написания угловых скобок. К примеру, селектор p задаёт стиль всех элементов <p>, которые встречаются в коде HTML. В примере 1 показано изменение цвета фона и текста веб-страницы с помощью селектора body.
Пример 1. Использование селектора body
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Селекторы</title> <style> body { background: #f6e8d7; /* Цвет фона */ color: #d6562b; /* Цвет текста */ } </style> </head> <body> <p>Более эффективным способом ловли льва в пустыне является метод золотого сечения. При его использовании пустыня делится на две неравные части, размер которых подчиняется правилу золотого сечения.</p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Изменение цвета фона и текста веб-страницы
Следует понимать, что хотя стиль можно применить к любому элементу, результат будет заметен только для тех элементов, которые непосредственно отображаются в <body>.
Атрибуты
= Новое в HTML5.
Атрибут | Значение | Описание |
---|---|---|
accept | file_extension audio/* video/* image/*media_type | Указывает типы файлов, которые принимает сервер (только для type=»file») |
align | left right top middle bottom | Не поддерживается в HTML5. Задает выравнивание входного изображения (только для type=»image») |
alt | text | Задает альтернативный текст для изображений (только для type=»image») |
autocomplete | on off | Указывает, должен ли элемент <input> включать Автозаполнение |
autofocus | autofocus | Указывает, что элемент <input> должен автоматически получать фокус при загрузке страницы |
checked | checked | Указывает, что элемент <input> должен быть предварительно выбран при загрузке страницы (для type=»checkbox» or type=»radio») |
dirname | inputname.dir | Указывает, что направление текста будет отправлено |
disabled | disabled | Указывает, что элемент <input> должен быть отключен |
form | form_id | Указывает одну или несколько форм, к которым принадлежит элемент <input> |
formaction | URL | Задает URL-адрес файла, который будет обрабатывать элемент управления вводом при отправке формы (для type=»submit» and type=»image») |
formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Указывает, как данные формы должны кодироваться при отправке на сервер (для type=»submit» and type=»image») |
formmethod | getpost | Определяет метод HTTP для отправки данных в URL-адрес действия (для type=»submit» and type=»image») |
formnovalidate | formnovalidate | Определяет, что элементы формы не должны проверяться при отправке |
formtarget | _blank _self _parent _topframename | Указывает, где отображать ответ, полученный после отправки формы (для type=»submit» and type=»image») |
height | pixels | Задает высоту элемента <input> (только для type=»image») |
list | datalist_id | Ссылается на элемент <datalist>, содержащий предварительно определенные параметры для элемента <input> |
max | number date | Задает максимальное значение для элемента <input> |
maxlength | number | Указывает максимальное число символов, допустимое в элементе <input> |
min | number date | Задает минимальное значение для элемента <input> |
multiple | multiple | Указывает, что пользователь может ввести более одного значения в элементе <input> |
name | text | Задает имя элемента <input> |
pattern | regexp | Задает регулярное выражение, которое проверяется значением <input> элемента |
placeholder | text | Задает краткую подсказку, описывающую ожидаемое значение элемента <input> |
readonly | readonly | Указывает, что поле ввода предназначено только для чтения |
required | required | Указывает, что поле ввода должно быть заполнено перед отправкой формы |
size | number | Задает ширину (в символах) элемента <input> |
src | URL | Указывает URL-адрес изображения для использования в качестве кнопки отправки (только для type=»image») |
step | number | Задает юридические интервалы номеров для поля ввода |
type | button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week | Указывает тип <input> элемент для отображения |
value | text | Задает значение элемента <input> |
width | pixels | Задает ширину элемента <input> (только для type=»image») |
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
Example
In this example all HTML elements with class=»center» will be red and center-aligned:
.center { text-align: center; color: red;}
You can also specify that only specific HTML elements should be affected by a class.
Example
In this example only <p> elements with class=»center» will be center-aligned:
p.center { text-align: center; color: red;}
HTML elements can also refer to more than one class.
Example
In this example the <p> element will be styled according to class=»center» and to class=»large»:
<p class=»center large»>This paragraph refers to two classes.</p>
Note: A class name cannot start with a number!
X[foo~=»bar»]
CSS
a { color: red; }
a { border: 1px solid black; }
1 2 3 4 5 6 7 |
a { colorred; } a { border1pxsolidblack; } |
А вот особенность, которой можно удивить своих друзей. Об этом приеме знает не так уж много людей. Знак «тильда» (~) позволяет выбрать своей целью атрибут со списком значений, разделенным пробелами.
Согласно вышеприведенному пользовательском атрибуту из номера пятнадцать мы могли бы создать атрибут data-info, который может получить разделенный пробелами список чего угодно, что нужно пометить. В этом случае мы отметим внешние ссылки и ссылки на изображения — просто для примера.
XHTML
<a href=»path/to/image.jpg» data-info=»external image»> Click Me, Fool </a>
1 | <a href=»path/to/image.jpg»data-info=»external image»> Click Me, Fool </a> |
При помощи готовой к работе разметки мы теперь можем выбрать любые тэги с любыми из этих значений, используя прием селектора атрибутов ~.
CSS
/* Target data-info attr that contains the value «external» */ a { color: red; }
/* And which contain the value «image» */ a { border: 1px solid black; }
1 2 3 4 5 6 7 8 9 | /* Target data-info attr that contains the value «external» */ a { colorred; } /* And which contain the value «image» */ a { border1pxsolidblack; } |
Multiple Style Sheets
If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.
Assume that an external style sheet has the following style for the <h1> element:
h1 { color: navy; }
Then, assume that an internal style sheet also has the following style for the <h1> element:
h1 { color: orange; }
Example
If the internal style is defined after the link to the external style sheet, the <h1> elements will be «orange»:
<head><link rel=»stylesheet» type=»text/css» href=»mystyle.css»> <style>h1 { color: orange;}</style></head>
Example
However, if the internal style is defined before the link to the external style sheet, the <h1> elements will be «navy»:
<head><style>h1 { color: orange;}</style><link rel=»stylesheet» type=»text/css» href=»mystyle.css»> </head>
X:first-of-type
Псевдокласс first-of-type позволяет выбирать первые сиблинги (элементы одного уровня) своего типа.
Проверка
Для лучшего понимания давайте проведем тест. Скопируйте в свой редактор кода следующую разметку:
XHTML
<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul>
<ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>
1 2 3 4 5 6 7 8 9 10 11 12 | <div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div> |
Теперь, не читая дальше, попробуйте догадаться, как выбрать только «List Item 2″. Когда придете к решению (или сдадитесь), продолжите чтение.
Решение 1
Решить эту контрольную работу можно многими способами. Мы рассмотрим некоторые из них. Давайте начнем с использования first-of-type.
CSS
ul:first-of-type > li:nth-child(2) { font-weight: bold; }
1 2 3 |
ul:first-of-type > li:nth-child(2) { font-weightbold; } |
Этот отрывок, по сути, говорит: «Найдите первый неупорядоченный список на странице, затем найдите только прямые дочерние элементы, являющиеся пунктами списка. Далее отфильтруйте все до второго пункта списка в наборе».
Решение 2
Второй возможный вариант будет использовать смежный селектор.
CSS
p + ul li:last-child { font-weight: bold; }
1 2 3 |
p + ul li:last-child { font-weightbold; } |
В этом сценарии мы находим ul, непосредственно следующий за тэгом p, а затем найдем самый последний его дочерний элемент.
Решение 3
Можно вредить им или играть с этими селекторами, как угодно.
CSS
ul:first-of-type li:nth-last-child(1) { font-weight: bold; }
1 2 3 |
ul:first-of-type li:nth-last-child(1) { font-weightbold; } |
На этот раз мы берем первый ul на странице, затем находим самый первый пункт списка, но начинаем с конца!
Setting The Viewport
The viewport is the user’s visible area of a web page. It varies with the device — it will be smaller on a mobile phone than on a computer screen.
You should include the following element in all your web pages:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
This gives the browser instructions on how to control the page’s dimensions and scaling.
The part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.
Without the viewport meta tag With the viewport meta tag
Общий синтаксис таблиц стилей¶
Таблицы стилей строятся в соответствии с определенным порядком (синтаксисом), в противном случае они не могут нормально работать. Таблицы стилей составляются из определенных частей (рис. 1):
Рис. 1. Синтаксис описания стиля CSS
- Селектор (Selector). Селектор — это элемент, к которому будут применяться назначаемые стили. Это может быть тег, класс или идентификатор объекта гипертекстового документа.
- Свойство (Property). Свойство определяет одну или несколько характеристик селектора. Свойства задают формат отображения селектора: отступы, шрифты, выравнивание, размеры и т.д.
- Значение (Value). Значения — это фактические числовые или строковые константы, определяющие свойство селектора.
- Описание (Declaration). Совокупность свойств и их значений.
- Правило (Rule). Полное описание стиля (селектор + описание).
Таким образом, таблица стилей — это набор правил, задающих значения свойств селекторов, перечисленных в этой таблице. Общий синтаксис описания правила выглядит так:
селектор] {свойство: значение;}
Регистр символов значения не имеет, порядок перечисления селекторов в таблице и свойств в определении не регламентирован.
Правила CSS
Итак, каскадная таблица стилей — это набор правил форматирования тегов HTML. Приведем несколько примеров написания таких правил:
- Основной текст с выравниванием по ширине, абзацный отступ 30px, гарнитура (шрифт) — Serif, кегль (размер шрифта) — 14px:
p { text-align justify; text-indent 30px; font-family Serif; font-size 14px; }
Это правило будет применено ко всем тегам <p>.
- Синий цвет для заголовков с первого по третий уровень:
h1, h2, h3 { color blue; /* тоже самое, что и #0000FF */ }
- Таблицы и изображения выводить без обрамления:
table, img {border none;}
- Ссылки в элементах списков показывать без подчеркивания:
li a {text-decoration none;}
- Внутренние отступы слева и справа для блоков (<div>), заголовков таблиц и ячеек таблиц установить в 10px и залить фон желтым цветом:
div, th, td { padding-left 10px; padding-right 10px; background-color yellow; }
- Все ссылки в документе отображать черным цветом и полужирным шрифтом, а в основном тексте и списках — обычным, а также выделять их зеленым цветом и подчеркивать только при наведении курсора (в описании правил использован псевдоэлемент a:hover).
a {color black; font-weight bold;} p a, li a {font-weight normal; text-decoration none;} p ahover, li ahover { color #00FF00; text-decoration: underline; }
Классы
Стандарт CSS представляет возможности создания именованных стилей — стилевых классов. Это позволяет ответить на такой, например, вопрос: Как применить разные стили к одному и тому же селектору?
Предположим, что в документе вам нужны два различных вида основного текста — один без отступа, второй — с левым отступом и шрифтом красного цвета. Для этого нужно создать правила для каждого из них, например так:
p {margin-left ;} p.warn {margin-left 40px; color #FF00;}
Для применения созданного класса его имя нужно указать в атрибуте class для выбранных абзацев:
<p class=”warn”>Красный текст с отступом слева</p>
Общий синтаксис описания класса:
селектор.имя_класса {описание}
При создании класса селектор можно не указывать, тогда это правило можно применять к любому селектору, поддерживающему тот же набор свойств.
Вот несколько примеров:
Правило:
.solid_blue {color blue;}
Использование:
<p class=”solid_blue”>Синий текст абзаца</p> <li class=”solid_blue”>Синий текст элемента списка</li>
Правило:
h1.bigsans {font-family Sans; font-size 1.5em;} h1.smallserif {font-family Serif; font-size .84em;}
Использование:
<h1 class=”bigsans”>Большой, но рубленый</h1> <h1 class=”smallserif”>Маленький, но с засечками</h1>
Идентификаторы
В качестве селектора может выступать идентификатор элемента гипертекста, указанный в атрибуте id. Для назначения стилей таким элементам используется синтаксис, аналогичный описанию классов, но вместо точки ставится знак # (“решетка”). Например:
div#content { position absolute; top 10px; left 10%; right 10%; border solid 1px silver; } ... <div id="content">Текст</div>
Следует помнить, что идентификаторы элементов должны быть уникальны в пределах документа.
Селектор class
CSS селектор позволяет также как и селектор стилизовать конкретный элемент страницы, но в отличие от , селектор позволяет применить свой стиль к нескольким элементам на веб-странице, а не только к одному.
Для использования селектора , нужно указать, к какому элементу на странице вы хотите его применить, для этого надо всего лишь добавить атрибут к HTML тегу, который нужно стилизовать, и указать в качестве значения нужное имя класса.
Правила для имен классов:
- в CSS коде все обозначения селекторов класс должны начинаться с точки, с ее помощью браузеры опознают селектор класс в таблице стилей CSS
- в имени класса разрешается использовать только буквы, числа, дефис и знак подчеркивания
- имя класса после точки всегда должно начинаться с буквы
- имена классов чувствительны к регистру, например и будут рассматриваться в CSS, как два разных класса
CSS код для классов ничем не отличается от CSS кода для других селекторов. После имени класса идет блок объявлений, содержащий все необходимые свойства:
.menu { color: #33CCFF; font-family: sans-serif; }
Если атрибут , с одним и тем же именем, добавлен к нескольких разным тегам, а вам нужно чтобы стиль применялся только к определенным тегам, то в селекторе перед обозначением класса нужно указать тег, к которому должен быть применён стиль:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> p.center { text-align: center; } </style> </head> <body> <h1 class="center">Стиль не будет применен.</h1> <p class="center">Абзац будет выровнен по центру.</p> </body> </html>
Попробовать »
Как вы уже заметили из примера, писать точку перед именем класса в HTML коде (в значении атрибута class) не нужно. Она требуется только в обозначении селектора в таблице стилей.
С этой темой смотрят:
- CSS селекторы
- Глобальные атрибуты HTML
- CSS селектор класса
- CSS селектор идентификатора
Тип ввода отправить
Определяет кнопку для Отправка данных формы в обработчик форм.
Обработчик форм обычно является серверной страницей со сценарием для обработки входных данных.
Обработчик формы указан в атрибуте формы:
Пример
<form action=»/action_page.php»> First name:<br> <input type=»text» name=»firstname» value=»Mickey»><br> Last name:<br> <input type=»text» name=»lastname» value=»Mouse»><br><br> <input type=»submit» value=»Submit»></form>
Таким образом, HTML-код выше будет отображаться в браузере:
Если опустить атрибут value кнопки Submit, кнопка получит текст по умолчанию:
Пример
<form action=»/action_page.php»> First name:<br> <input type=»text» name=»firstname» value=»Mickey»><br> Last name:<br> <input type=»text» name=»lastname» value=»Mouse»><br><br> <input type=»submit»></form>
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
Relative Lengths
Relative length units specify a length relative to another length property. Relative length units scale better between different rendering medium.
Unit | Description | |
---|---|---|
em | Relative to the font-size of the element (2em means 2 times the size of the current font) | Try it |
ex | Relative to the x-height of the current font (rarely used) | Try it |
ch | Relative to the width of the «0» (zero) | Try it |
rem | Relative to font-size of the root element | Try it |
vw | Relative to 1% of the width of the viewport* | Try it |
vh | Relative to 1% of the height of the viewport* | Try it |
vmin | Relative to 1% of viewport’s* smaller dimension | Try it |
vmax | Relative to 1% of viewport’s* larger dimension | Try it |
% | Relative to the parent element | Try it |
Tip: The em and rem units are practical in creating perfectly scalable layout!* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.
С этим читают