HTML Стили
CSS (Cascading Style Sheets), или каскадные таблицы стилей, используются для описания внешнего вида веб-документа, написанного языком разметки. CSS устанавливает стилевые правила, которые изменяют внешний вид элементов, размещенных на веб-страницах, выполняют тонкую настройку их деталей, таких как цвет, шрифт, размер, границы, фон и местоположение в документе.
Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).
Вот как это выглядит для элемента </p>:
Пример: применение стилей к элементу <p>
Текст с атрибутом style
<p>
Текст с атрибутом style</p>Способы добавления CSS стилей
- Внешняя таблица стилей — определение правил таблицы стилей в отдельном файле .
css, с последующим подключением этого файла в HTML-документ с помощью тега <link>. - Внутренняя таблица стилей — определение правил таблицы стилей с использованием тега <style>, который обычно располагается в разделе <head> HTML-документа .
- Встроенный стиль — это способ вставки языка таблицы стилей прямо в начальный тег HTML-элемента.
css, с последующим подключением этого файла в HTML-документ с помощью тега <link>.Давайте познакомимся со всеми тремя способами на конкретных примерах.
Внешняя таблица стилей
Внешняя таблица стилей хранится в отдельном файле с расширением CSS. Это самый эффективный способ, т. к. он полностью отделяет правила форматирования от ваших HTML-страниц. Он также позволяет легко применять одни и те же правила ко многим страницам.
Отдельный файл с таблицей стилей прикрепляется к HTML-документу с помощью тега <link>. Это одинарный тег, который располагается внутри элемента <head>. Элемент должен использовать три следующих атрибута. В атрибуте href указывается абсолютный или относительный URL-адрес файла CSS.
Атрибут rel определяет отношение между НТМL-страницей и связанным файлом. При создании ссылки на файл CSS он должен иметь значение stylesheet, показывающее, что присоединяемый таким образом документ содержит таблицу стилей. Атрибут type определяет тип документа, на который указывает ссылка. В нем должно быть указано значение text/css.
CSS, как и HTML, не является языком программирования. Это язык каскадных таблиц стилей, то есть он позволяет выборочно применять нужные стили к элементам в HTML-документах. Например, чтобы выбрать все элементы <p>, т.е. параграфы на HTML-странице и окрасить их текст в красный цвет, вы должны написать на CSS следующее:
p {
color: red;
}
Давайте поместим эти три строки CSS в новый файл в любом текстовом редакторе (например Notepad++), а затем сохраним файл как style.css в папке styles.
Чтобы применять CSS к нашему HTML-документу, вставьте следующую строку в шапку, то есть между тегами <head> и </head>:
<link href="styles/style. css" rel="stylesheet" type="text/css">
css" rel="stylesheet" type="text/css">
Пример: Внешняя таблица стилей
Текст первый
Текст второй
Текст третий
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Внешняя таблица стилей</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Текст первый</p>
<p>Текст второй</p>
<p>Текст третий</p>
</body>
</html>
Внутренняя таблица стилей
Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, стили разполагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента <style>, который обычно находится в элементе <head>, но фактически может быть помещен в любом месте документа.
Этих тегов на странице может быть несколько.
Тег <style> позволяет записывать внутри себя код в формате CSS:
<style type="text/css"> body { background-color:palegreen; } h2{ color: blue; font-family:verdana; } p{ font-size:20px; color:red; } </style>
Пример: Внутренняя таблица стилей
Текст первый
Текст второй
Текст третий
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Внутренняя таблица стилей</title>
<style type="text/css">
body {
background-color:palegreen;
}
h2{
color: blue;
font-family:verdana;
}
p{
font-size:20px;
color:red;
text-align:center;
}
</style>
</head>
<body>
<h2>Заголовок</h2>
<p>Текст первый</p>
<p>Текст второй</p>
<p>Текст третий</p>
</body>
</html>
В данном примере мы с помощью CSS установили цвет фона для элемента <body>: background-color:palegreen, цвет и тип шрифта для заголовков <h2>: color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов <p>: font-size:20px; color:red; text-align:center.
Встроенный стиль
Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style. Например:
<p>Параграф</p>Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе <style>.
В следующем примере к HTML-документу подключены все три рассмотренные стиля форматирования:
Пример: Приоритетность стилей
Текст первый
Текст второй
Текст третий
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Встроенный стиль</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color:palegreen;
}
h2{
color: blue;
font-family:verdana;
}
p{
font-size:20px;
color:coral;
}
</style>
</head>
<body>
<h2>Заголовок</h2>
<p>Текст первый</p>
<p>Текст второй</p>
<p>Текст третий</p>
</body>
</html>
Чем ближе описание стиля находится к элементу, тем более высокий приоритет имеет этот стиль при выборе браузером конечного правила оформления. |
Задачи
Выравнивание текста по центру
Используя встроенный стиль к параграфу выровняйте текст по центру.
Задача HTML:
Реши сам »<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Выравнивание текста по центру</title> </head> <body> <p>Это параграф.</p> </body> </html>
Цвет фона страницы
Измените цвет фона всей HTML-страницы на «khaki».
Задача HTML:
Реши сам »<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Цвет фона страницы</title> <style> body {background-color:palegreen;} h2{color: blue;} p{color:coral;} </style> </head> <body> <h2>Заголовок</h2> <p>Параграф</p> </body> </html>
Тип шрифта для страницы
Установите тип шрифта для всех элементов HTML-страницы «verdana».
Задача HTML:
Реши сам »<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Тип шрифта для страницы</title> <style> body {background-color:khaki;} h2{color: blue;} p{color:coral;} </style> </head> <body> <h2>Заголовок</h2> <p>Параграф</p> </body> </html>
Внешняя таблица стилей
В папке styles находится файл со стилями style.css. Подключите стилевой файл (внешняя таблица стилей) к HTML-документу.
Задача HTML:
Реши сам »<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Внешняя таблица стилей</title> </head> <body> <p>Параграф первый</p> <p>Параграф второй</p> <p>Параграф третий</p> </body> </html>
Способы интеграции CSS в HTML
Введение
Привычный нам HTML позволяет задавать структуру веб-документа, изменять внешнее отображение контента с помощью специальных тегов форматирования.
Но представьте ситуацию, когда возникает потребность изменить параметры однотипных элементов на сайте, для решения которой придется редактировать все страницы, на которых встречаются вышеупомянутые элементы, с целью изменения описывающих их тегов.
Для решения проблемы целесообразней использовать CSS от Cascading Style Sheets. При этом стилем называют набор правил форматирования, которые будут применены к определенному элементу документа для изменения правил его отображения. При этом если у вас возникает необходимость быстро изменить внешний вид элементов на разных страницах сайта, созданного с помощью одного из стилей, вам достаточно изменить стиль единожды и все элементы поменяют свой внешний вид.
Кроме этого, использование CSS дает вам намного больше возможностей тонкой настройки форматирования, чем в простом HTML. Также поскольку стили можно хранить во внешних, подключаемых файлах, которые в большинстве случаев кэшируются браузерами , их использование позволит ускорить загрузку вашего сайта на пользовательской машине.
Что касается интеграции CSS на html-страницу, существует три разных способа, которые отличаются между собой не только возможностями, но и приоритетом выполнения инструкций.
Способ 1. Внутренние стили
Частный способ использования атрибута style, при котором правила оформления элемента распространяются лишь на тег, в котором данный атрибут указан. Стоит отметить, что значения атрибута style задаются с учетом особенностей языка таблицы стилей.
<p>Hello My World! p>
<br/>
<p>Первый простой пример p>
Когда используете внутренние стили, будьте готовы к тому, что для изменения ряда элементов придется внести поправки в каждый из открывающихся тегов. Это должно натолкнуть вас на мысль, что внутренние стили предпочтительно использовать лишь в одиночных тегах, тех, которые встречаются лишь раз, или не использовать данный способ, так как он не придерживается концепции структурного документа, когда .html-документ задает структуру текущей веб-страницы, а .
css-документ описывает ее оформление.
Способ 2. Таблицы глобальных стилей – в заглавии самого документа.
При таком варианте использования стили определяются непосредственно в веб-документе и определяются между тегами <head>…</head> веб-страницы внутри тега <style>, можно смело сказать, что этот способ намного превосходит предыдущий в гибкости и по своим возможностям, кроме того он упрощает работу с большим числом стилей на странице.
<head>
<style>
p {
font-family: ‘Segoe UI’;
font-size: 35px;
color: #43e936;
}
style>
head>
<body>
<p>Второй простой пример p>
<div>
<p>Второй простой пример, повтор р>
div>
body>
Теперь достаточно указать на странице только тег p, и его содержимому будут присвоены все те свойства, которые представлены правилами в теге style.
Способ 3. Таблицы связанных стилей – задаем в отдельном файле.
Пожалуй, один из самых мощных и удобных способов использования стилей и правил отображения элементов для многостраничного сайта. При нем стили, предопределённые разработчиком, размещаются в отдельном файле с произвольным названием example.css, который можно использовать для любой веб-страницы на сайте. Для того чтобы подключить этот файл на странице, необходимо в заголовке страницы (в пределах тега <head>…</head>) использовать тег <link>.
<head>
<title>CSS </title>
<
Селекторы CSS
Селектор тегов
Итак мы подключили таблицу стилей. Давайте теперь посмотрим, что же это такое – стиль.
Стиль состоит из двух частей – «селектор» и «свойство: значение;».
В каждом селекторе может быть множество свойств и значений. Вам это ничего не напоминает? Вспомните HTML – < тег атрибут=”значение”>. Опять возникает вопрос: “а зачем?”.
Скоро поймёте.
Селектор {
свойство: значение;
}
Давайте разберём эту запись. Селектор (англ. отобранный, выбранный) указывает, какой элемент HTML кода мы выберем, для придания ему тех, или иных свойств и значений.
Например, захотелось нам изменить цвет всего текста, заключённого в теги <p>, на странице нашего сайта.
Для этого создаём селектор тега р, задаём ему свойство color, и значение #A5260A.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
p{
color:#A5260A;
}
</style>
/head>
body>
<p>Текст абзаца статьи</p>
<p>Текст абзаца статьи</p>
<p>Текст абзаца статьи</p>
</body>
</html>
И смотрим, что выдаст браузер
Как видим всё, что было заключено в тег <p>, приобрело заданный цвет.
Итак, ещё раз вникнем, что мы сделали. В область “селектор” мы поставили тег, свойства которого нам захотелось изменить, вернее изменить свойства того, что заключено в этот тег.
В области “свойства:” указали, какое именно свойство будет меняться, и в области “значение;”, как это свойство будет изменено.
Селектор идентификатор (якорь)
Селектор идентификатор, или якорь, применяется для обозначения элемента, которому нужно задать определённые свойства.
Название этому якорю придумываем самостоятельно. У меня “ab”, а можно “p” или “nev”.
<p>Текст абзаца статьи</p>
<p>Текст абзаца статьи</p>
<p>Текст абзаца статьи</p>
Затем создаём селектор для этого якоря, и зададим цвет.
#ab{
color: #A5260A;
}
И полностью, как это делается в html документе
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
#ab{
color: #A5260A;
}
</style>
</head><body>
<p>Текст абзаца статьи</p>
<p>Текст абзаца статьи</p>
<p>Текст абзаца статьи</p>
</body>
</html>
Посмотрим, как это отобразит браузер.
Как видим, выбранный абзац окрасился в заданный цвет, то есть браузер точно понял, что куда нужно применить, и сделал всё правильно.
Идентификатор очень часто применяется в css. Им отмечаются блоки и другие элементы кода, которым потом, в таблицах стилей, задаются самые разные свойства и значения
Селектор классов
Ещё немного усложним. Допустим, что какому либо элементу, у нас уже задан идентификатор и стили, а внутри этого элемента, есть ещё один, или несколько, вид которых нам хотелось бы сделать отличным от других, или задать им какой-то определённый размер и расположение.
В таком случае применяется селектор классов. Так же как и идентификатор, класс задаётся элементу в коде html. Для примера давайте возьмём нумерованный список, и несколько строк из него, сделаем не похожими на остальные.
Задаём идентификатор и класс элементам html кода
<ol>
<li>Строка списка</li>
<li>Строка списка</li>
<li>Строка списка</li>
<li>Строка списка</li>
<li>Строка списка</li>
<li>Строка списка</li>
</ol>
И создаём селекторы идентификатора и класса
#ab{
color: #A5260A;
}
.
nev{
color: #18a40a;
}
Как видите, в css селектор класса пишется с точкой перед словом. Кстати слово может быть любым, но лучше дать этому слову какую нибудь смысловую нагрузку.
Допустим, собрались Вы задать, при помощи класса, цвет нескольким элементам, значит надо назвать его «.color». Это чтоб лучше ориентироваться потом в том, что написали.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
#ab{
color: #A5260A;
}
.nev{
color: #18a40a;
}
</style>
</head>
<body>
<ol>
<li>Строка списка</li>
<li>Строка списка</li>
<li>Строка списка</li>
<li>Строка списка</li>
<li>Строка списка</li>
<li>Строка списка</li>
</ol></body>
</html>
И смотрим, что нам покажет на это браузер.
Всё как и планировали. Идентификатор задан всему списку, и он коричневый, а две строки согласно классам — зелёные.
Групповые селекторы
Групповые селекторы применяются тех случаях, когда нескольким разным тегам нужно придать одни и те же свойства.
Допустим, у нас на странице есть несколько заголовков, абзацы, и изображение, и всем им нужно сделать рамку. В этом случае все теги, которым нужна рамка, собираются в один селектор.
Пишутся они через запятую, без пробела
h2,p,h4,img{
border: 2px solid #0a29a4;
width: 150px;
}
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
h2,p,h4,img{
border:2px solid #0a29a4;
width:150px;
}
</style>
</head>
<body>
<h2>Заголовок</h2>
<p>Абзац</p>
<img src="http://trueimages. ru/img/9e/70/d2dbf025.jpg">
<h4>Подзаголовок</h4>
<p>Абзац</p></body>
</html>
ru/img/9e/70/d2dbf025.jpg">Посмотрим, что покажет браузер.
Вот, пожалуйста. У всех выбранных тегов, появилась рамочка. Можно станцевать корробори (групповой танец австралийских аборигенов, отражающий радости жизни).
Селекторы потомков
Селектор потомков позволяет задавать какие либо свойства потомкам, через их родителей.
Дело в том, что у тегов очень строгий принцип наследования, то есть все теги, располагающиеся внутри других тегов, являются их потомками, и патриархом у них является тег < html>.
Затем идут его дети — теги <head> и <body>, каждый со своими потомками, и так далее.
Посмотрим на примере списков. В упорядоченном списке, родитель <ol> имеет несколько потомков <li>.
В неупорядоченном, родитель <ul>, так же имеет потомков <li>. Наша задача — задать нужные свойства только потомкам упорядоченного списка.
И сделать это можно через родителя <ol>, не прибегая к идентификаторам и классам. В этом случае родитель и наследник прописываются через пробел.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
ol li{
color: #a40a0d;
}
</style>
</head>
<body>
<ol>
<li>Строка списка</li>
<li>Строка списка</li>
<li>Строка списка</li>
</ol> <ul>
<li>Строка списка</li>
<li>Строка списка</li>
<li>Строка списка</li>
</ul>
</body>
</html>
Смотрим картинку в браузере.
Как видим, окрасились только теги “li”, являющиеся потомками тега “ol”, хотя в следующем неупорядоченном списке, тоже есть теги “li”.
Остаётся добавить, что подобным образом задаётся не только цвет, а и все другие свойства, какие только можно придать контенту, и которые мы вскоре рассмотрим.
И ещё о наследовании. Часто случаются такие ситуации, когда какой либо стиль бывает задан всему тегу <body>, а внутри него, какому-то элементу задаётся другой стиль, и так бывает по нескольку раз в порядке убывания.
Поэтому CSS и называются каскадные таблицы стилей. Так вот, браузер отобразит элемент в том стиле, который находится к нему, элементу, ближе.
Перемена
Еврейская Винда:
После загрузки Windows появляется надпись «Таки я загрузилась! » и в течение 15 минут играет мелодия «Семь сорок», которую нельзя не приостановить, не отменить
При открытии любой папки или файла появляется предупреждающее сообщение: «И оно тебе туда надо? »
Пpи нажатии на клавишу «Стаpт» появляется сообщение «Hу, шо ты тут клацаешь, пошел бы лучше в футбол поиграл …».
Тeги div и span < < < В раздел > > > Шрифты для сайта в CSS
Свойство content • Про CSS
С помощью CSS на страницу можно добавить элементы, несуществующие в разметке страницы. Это делается с помощью псевдоэлементов :before и :after, но не менее важную роль в этом играет свойство content.
Оно определяет содержимое псевдоэлементов. И даже больше, псевдоэлементы не отобразятся, если у них не задано свойство content. Достаточно такой строки:
Спецификация тут: w3.org/TR/css3-content/
Снеговики в примере добавлены с помощью content для псевдоэлементов, сами снеговики — символы юникода:
DIV:before {
content: "\2603";
}Возможные значения свойства:
normal, none — содержимое псевдоэлемента не отображается. Полезно, если нужно скрыть ранее заданный псевдоэлемент.
<string> — текстовый контент.
Можно вставлять простой текст и символы юникода, как в примере выше. Для практических целей очень пригодятся разные варианты стрелок. Символы юникода можно найти, например, тут или тут.
DIV:before {
content: "Hello";
}<uri> — адреса картинок.
DIV:before {
content: url(//img-fotki.yandex.ru/get/5413/5091629.67/0_5ba12_81d03a82_XS.png);
}Практическое применение — иконки перед ссылкам на профили в соцсетях, иконка для обозначения внешней ссылки, буллеты списков.
Правда, тут появляется проблема лишних запросов к серверу.
Варианты решений:
- спрайт, иконки из которого вставляются фоном в саму ссылку или в псевдоэлемент. Второе предпочтительней, потому что тогда псевдоэлемент ограничит область видимости спрайта, таким образом иконки в спрайте могут быть расположены не только вертикально, но и рядами.
Количество запросов к серверу уменьшается до одного, но при этом картинка кешируется у пользователя; - закодировать отдельные картинки в base-64 и вставлять через
content: url(); - закодировать весь спрайт в base-64 и использовать его как фон для псевдоэлемента.
В двух последних вариантах вообще не будет запросов к серверу, но картинки не кешируются и, кроме того, закодированное изображение может весить больше исходного. Способ имеет смысл использовать только для небольших изображений.
Закодировать картинку в base64 можно с помощью онлайн-сервисов. Полученный код вставляется в url() с информацией о формате содержимого, например data:image/png;base64.
Вот так будет выглядеть код для иконки Instagram:
[href*="instagram.com"]:before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQTgwMTE3NDA3MjA2ODExODA4Mzk4RDI3RDIwODg4MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NjAxNEU1NjQyRUExMUUxOEI5MEE1MTY2N0VBMzA1NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NjAxNEU1NTQyRUExMUUxOEI5MEE1MTY2N0VBMzA1NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk3MDc3Njg4MTUyMDY4MTE4MDgzOThEMjdEMjA4ODgyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBBODAxMTc0MDcyMDY4MTE4MDgzOThEMjdEMjA4ODgyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++UbndwAAArdJREFUeNqUk0tME1EUhr+ZDoW2tBS0vLQCkqgLE4X4DBoBFxIXBqNCQI0rF8TEhS5MNC4MLkxcGRb4jonxFVApKBJNZCG+giJddAEoUEEWAikI9t2OMxeKJLrhZE7mPv7vv3fmniud2lN0EKjTspylxWstGxVVVU+szywoNRFkcHMa7nAxiqEYJjo5vtLwX1JjGBkZLXf3fJEVSZJKDcEwUSlELBIiHAkTisYxBkP4ff5/4BPX28X70pFydFbRO9FIBEWJEY/HialxpKkh+NFP0+CMEGdazazJyiDLZsFss6NqY+FAUMwJg0g4jCLFtb3FUIb7yQp+Zn/tYXz+KMHfs+QsT+Pp4wc4fk5SX7lJgNOTE3MGssXIwO9pCECwM0Ce00pZ5TFOnbuIxWpjwjeprTbL5frzdHe94nV3LynaQnrorJLqsLKv7igGay5Njx5SuruCutMXKCutITcnh9Rlybzpc3O24SZ3Lp7hZXsL1TW1xGbGaG2+i6wYZBwZNpwrsvF6h/H0DeFcvY5u93s8X0doedeLkreW6YAk5rxer9DqjM4q8wcjjkZ7SLXbGR8fIxhSCclx+j99YSZ7Pct2HSLZZNbPUGgRv3L+J4q2Npi/yklBpo3v3zyoRgujz64ip6Tz7cVtMvIzKdx7gOH8PKGd55EThaHn9i2baWtzcf/GFaKzPuQkI/6JAZga5NbJI7S6ngiNurAL/n6CnhuKNuLxeGhtacJ1twGf7xfJaQ7Mcpjme9cozHMKTUK/yGAujCkpVFVX8eFtF89dLYz7psS4I91OWclWtpXsEJrFIQzUWAQ1HkOWDVhsNnaWlVNUXEzAP1fKJrOZ1DS7gLXyFVqdSRh0DPX1VBRoDcmQtOBs0u6RyZro+YnN+tHqicSCGqM3O3SDxq6PbrSsWOJ17tDZPwIMAKAIId5/sWegAAAAAElFTkSuQmCC)
}Код длинный и заканчивается где-то за горизонтом.
Кроме того, по коду непонятно что за картинка в нём лежит, и, при необходимости отредактировать, картинку надо будет каждый раз кодировать и вставлять заново, хотя в случае с обычным изображением его надо будет просто перезалить. В то же время есть плагин для гранта, который автоматически кодирует картинки и заменяет в коде адреса картинок на base64.
Подобным же образом можно вставлять SVG.
DIV:before{
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path d="M19.414 27.414l10-10c0.781-0.781 0.781-2.047 0-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828 0-0.781 0.781-0.781 2.047 0 2.828l6.586 6.586h-19.172c-1.105 0-2 0.895-2 2s0.895 2 2 2h29.172l-6.586 6.586c-0.39 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z" fill="#FFF" /></svg>');
}Это очень удобно, но пока что работает не во всех браузерах. Например, Chrome такое поймет и отобразит, а Firefox — нет.
Upd: SVG в CSS будет работать во всех браузерах, если закодировать его как адресную строку. Это можно сделать с помощью URL Encoder.
<counter> — счетчик. С помощью этого значения можно пронумеровать не только списки, но и любые элементы на странице. Например, разделы статьи.
BODY {
counter-reset: h3-counter;
counter-reset: p-counter;
}
DIV {
counter-increment: h3-counter;
}
h3:before {
content: counter(h3-counter) ". ";
}
P:before {
content: counter(p-counter) ". ";
counter-increment: p-counter;
}counter-reset задает имя счетчика.
counter-increment увеличивает значение заданного счетчика.
content: counter(имя счетчика) выводит значение счетчика в качестве содержимого псевдоэлемента.
attr(<identifier>) — это значение выводит содержимое заданного атрибута. Удобно использовать для вывода атрибутов href в версии для печати и для разных интересных эффектов.
A:before {
content: attr(title);
}Много эффектов можно найти тут: tympanus.net/Development/CreativeLinkEffects/
open-quote, close-quote — значения для вывода открывающих и закрывающих кавычек. Символы, которые будут использованы, определяются свойством quotes. Если оно не задано, будут использованы значения по умолчанию, которые зависят от браузера.
BLOCKQUOTE {
quotes: '"' '"' "'" "'";
}
BLOCKQUOTE:before {
content: open-quote;
}
BLOCKQUOTE:after {
content: close-quote;
}no-open-quote, no-close-quote — значение отключает отображение кавычек, но при этом продолжает учитываться уровень их вложенности.
В спецификации есть ещё много интересного вроде псевдоэлемента, представляющего обертку для всего элемента или множественные псевдоэлементы, но в данный момент это нигде не реализовано.
Z-index в CSS разбираем на типичных примерах
Свойство Z-index описывает уровень стека представления элемента на странице относительно остающихся в потоке элементов.
Его значением является число. Вместе с увеличением z-index элемента, близость к пользователю также увеличивается.
Пример кода Z-index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.logo {
position:absolute;
font-family:Century;
font-size:2em;
font-weight:bold;
z-index:20;
}
#logo1 {
left:50px;
top:50px;
color:#00f;
}
#logo2 {
left:52px;
top:52px;
color:#f00;
z-index:10;
}
.box {
position:absolute;
height:100px;
width:100px;
border:15px solid #000;
}
#box1 {
left:150px;
top:150px;
border-color:#f00;
z-index:40;
}
#box2 {
left:185px;
top:185px;
border-color:#00f;
z-index:30;
}
#box3 {
left:185px;
top:150px;
border-color:#060;
z-index:20;
}
#box4 {
left:150px;
top:185px;
border-color:#f60;
z-index:10;
}
</style>
<title>CSS Z-Index</title>
</head>
<body>
<h2>CSS Z-Index</h2>
<div>Webucator</div>
<div>Webucator</div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Обратите внимание, как определенные элементы div расположены поверх других.
Если z-index этих элементов изменяется, расположение их стека изменится также.
Display — когда применять?
Свойство display применяется для установки, должен ли элемент появиться на странице или нет. Самыми популярными значениями для этого элемента являются следующие:
Наиболее типичные примеры применения свойства display:
- Для показа и сокрытия элементов в зависимости от взаимодействия с пользователем. Частый пример – это ниспадающее меню. Такие динамические изменения стилей представлены значениями javascript.
- Чтобы скрыть элементы для определенных типов медиа. Например, можно «отключить» показ картинок, просто указав значение none для свойства display в таблице стилей, которая используется для печати документа
- Конвертация инлайновых элементов, таких как link, в блочные элементы при помощи изменения значения свойства display на block
Пример ниже демонстрирует, как свойство display может применяться для изменения ссылок в элементы block.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Link Buttons</title>
<style type="text/css">
a {
display:block;
padding: 6px 4px;
margin: 4px;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-top-width: 0px;
border-left-width: 0px;
background-color: #eaf1dd;
color:#060;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:1.5em;
}
</style>
</head>
<body>
<h2>Button Links</h2>
<div>
<a href="http://www.washingtonpost.com">WashingtonPost.com</a>
<a href="http://www.webucator.com">Webucator</a>
<a href="http://www.google.com">Google</a>
</div>
</body>
</html>
Visibility (Видимость)
Свойство visibility применяется, когда вы хотите воздействовать на видимость элемента.
Возможные значения этого свойства:
Самое главное различие между visibility и hidden элемента состоит в том, что если указано значение hidden, то скрытый элемент по прежнему может влиять на раскладку вашей страницы. Элементы, у которых свойство display имеет значение none, такого эффекта не имеют.
Оцени статью
Оценить Средняя оценка / 5.
Количество голосов:
Спасибо, помогите другим — напишите комментарий, добавьте информации к статье.
Или поделись статьей
Видим, что вы не нашли ответ на свой вопрос.
Помогите улучшить статью.
Напишите комментарий, что можно добавить к статье, какой информации не хватает.Отправить
Спасибо за ваши отзыв!
HTML-тег заголовка
Пример
Определите заголовок для вашего HTML-документа:
Справочник по элементам HTML
Это заголовок
Это абзац.