- HTML Стили
- Способы добавления CSS стилей
- Внешняя таблица стилей
- Пример: Внешняя таблица стилей
- Внутренняя таблица стилей
- Пример: Внутренняя таблица стилей
- Встроенный стиль
- Пример: Приоритетность стилей
- Задачи
- Выравнивание текста по центру
- Задача HTML:
- Цвет фона страницы
- Задача HTML:
- Тип шрифта для страницы
- Задача HTML:
- Внешняя таблица стилей
- Задача HTML:
- Базовые стили и полезные CSS-сниппеты
- 1. Базовая HTML5 конструкция
- 2. Сброс стандартных стилей браузеров
- 3. CSS3 градиенты
- 4. CSS3 Transform
- 5. Свой @font-face
- 6. Мета-теги адаптивной верстки
- 7. HTML5-медиа
- 8. Классы для упрощения верстки
- 9. Сниппеты дизайна
- 10. Сниппеты разработки
- 11. Подготовка страницы для печати
- Базовые CSS-стили различных элементов
- Базовая конструкция
- Тени
- Градиенты
- Закругленные углы
- Ссылки
- Input
HTML Стили
CSS (Cascading Style Sheets), или каскадные таблицы стилей, используются для описания внешнего вида веб-документа, написанного языком разметки. CSS устанавливает стилевые правила, которые изменяют внешний вид элементов, размещенных на веб-страницах, выполняют тонкую настройку их деталей, таких как цвет, шрифт, размер, границы, фон и местоположение в документе.
Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).
Вот как это выглядит для элемента
:
Пример: применение стилей к элементу
Способы добавления CSS стилей
Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:
- Внешняя таблица стилей — определение правил таблицы стилей в отдельном файле .css, с последующим подключением этого файла в HTML-документ с помощью тега .
- Внутренняя таблица стилей — определение правил таблицы стилей с использованием тега , который обычно располагается в разделе HTML-документа .
- Встроенный стиль — это способ вставки языка таблицы стилей прямо в начальный тег HTML-элемента.
Давайте познакомимся со всеми тремя способами на конкретных примерах.
Внешняя таблица стилей
Давайте поместим эти три строки CSS в новый файл в любом текстовом редакторе (например Notepad++), а затем сохраним файл как style.css в папке styles. Чтобы применять CSS к нашему HTML-документу, вставьте следующую строку в шапку, то есть между тегами
и :Пример: Внешняя таблица стилей
Текст первый
Текст второй
Текст третий
Текст первый
Текст второй
Текст третий
Внутренняя таблица стилей
Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, стили разполагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента , который обычно находится в элементе , но фактически может быть помещен в любом месте документа. Этих тегов на странице может быть несколько.
Тег позволяет записывать внутри себя код в формате CSS:
Пример: Внутренняя таблица стилей
Заголовок
Текст первый
Текст второй
Текст третий
body < background-color:palegreen; >h1 < color: blue; font-family:verdana; >p Заголовок
Текст первый
Текст второй
Текст третий
В данном примере мы с помощью CSS установили цвет фона для элемента : background-color:palegreen, цвет и тип шрифта для заголовков : color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов
: font-size:20px; color:red; text-align:center.
Встроенный стиль
Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style. Например:
Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе .
В следующем примере к HTML-документу подключены все три рассмотренные стиля форматирования:
Пример: Приоритетность стилей
Заголовок
Текст первый
Текст второй
Текст третий
body < background-color:palegreen; >h1 < color: blue; font-family:verdana; >p Заголовок
Текст первый
Текст второй
Текст третий
Чем ближе описание стиля находится к элементу, тем более высокий приоритет имеет этот стиль при выборе браузером конечного правила оформления. |
Задачи
Выравнивание текста по центру
Задача HTML:
Это параграф.
Цвет фона страницы
Задача HTML:
body h1 p Заголовок
Параграф
Тип шрифта для страницы
Задача HTML:
body h1 p Заголовок
Параграф
Внешняя таблица стилей
В папке styles находится файл со стилями style.css. Подключите стилевой файл (внешняя таблица стилей) к HTML-документу.
Задача HTML:
Параграф первый
Параграф второй
Параграф третий
Базовые стили и полезные CSS-сниппеты
В этой статье собраны полезные и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.
1. Базовая HTML5 конструкция
Основной код любой страницы, которому многие разработчики уделяют недостаточно внимания. Подключены jQuery 1.8.2 и HTML5shiv для корректного отображения в старых браузерах.
2. Сброс стандартных стилей браузеров
один и тот же код в разных браузерах может отображаться по-разному. Сброс стилей поможет избежать таких проблем.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; >html < height: 101%; >/* always display scrollbars */ body < font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; >article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >strong < font-weight: bold; >input < outline: none; >table < border-collapse: collapse; border-spacing: 0; >img < border: 0; max-width: 100%; >a < text-decoration: none; >a:hover
3. CSS3 градиенты
Представленный ниже код поможет кроссбраузерно отображать CSS-градиенты. Добавляется в нужный селектор, можно использовать rgba() для прозрачности.
background-color: #000; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000'); background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000)); background-image: -webkit-linear-gradient(top, #bbb, #000); background-image: -moz-linear-gradient(top, #bbb, #000); background-image: -ms-linear-gradient(top, #bbb, #000); background-image: -o-linear-gradient(top, #bbb, #000); background-image: linear-gradient(top, #bbb, #000);
4. CSS3 Transform
Не очень популярное свойство из-за проблем в старых браузерах. Однако достаточно перспективное. Можно делать всплывающие подсказки или фигуры.
-webkit-transform: perspective(250) rotateX(45deg); -moz-transform: perspective(250) rotateX(45deg); -ms-transform: perspective(250) rotateX(45deg); -o-transform: perspective(250) rotateX(45deg); transform: perspective(250) rotateX(45deg);
5. Свой @font-face
Позволяет добавить собственные шрифты на страницу. Для конвертации в различные форматы полезно использовать сервис Font2Web.
6. Мета-теги адаптивной верстки
Важные мета-теги для корректной работы адаптивного макета
7. HTML5-медиа
Конструкция подгрузки нескольких форматов видео и аудио для универсальной работы медиа-контента (убрать пробел в «s ource»)
8. Классы для упрощения верстки
Следующие сниппеты помогут сократить синтаксис при верстке. Техника широко применяется в различных CSS-фреймворках. Например управление свойством float:
.float-left /* Or whatever name you like */ < float: left; >.float-right /* Or whatever name you like */
Или отображением элементов:
9. Сниппеты дизайна
Позволяют упрощать отображать контент. Простой пример: объявление в CSS-файле стилей шрифтов в зависимости от места на сайте, где располагается контент. Эта, вроде бы простая техника, часто игнорируется разработчиками.
10. Сниппеты разработки
Сниппеты, помогающие более грамотно организовать верстку сайта. Вот очень простой пример, который позволяет правильно считать ширину какого-нибудь блока:
Еще один полезный инструмент — это clearfix, помогающий избавиться от несоответствий отображения элементов верстки в разных браузерах:
.clearfix:before, .clearfix:after < content: " "; display: table; >.clearfix:after < clear: both; >/* IE6/7 support */ .clearfix
Слишком длинные URL могут ломать верстку страницы. Чтобы избежать этого, можно применять следующий сниппет (подробнее на css-tricks.com), не работает в Opera и IE ниже восьмой версии:
Переносы текста в теге pre:
11. Подготовка страницы для печати
Перевод контента в черно-белые цвета, отображение подчеркивания у ссылок, отображение URL рядом в скобках:
@media print < * < background: none !important; color: black !important; box-shadow: none !important; text-shadow: none !important; /* Images, vectors and such */ filter: Gray(); /* IE4-8: depreciated */ filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */ -webkit-filter: grayscale(100%); /* Chrome + Safari 6 */ -moz-filter: grayscale(100%); /* Future proof */ -ms-filter: grayscale(100%); /* Future proof */ -o-filter: grayscale(100%); /* Future proof */ filter: grayscale(100%); /* Future proof or polyfilled */ >a < text-decoration: underline; >a[href]:after < content: " (" attr(href) ")"; >a[href="#"], a[href="javascript:"] < content: ""; >>
Базовые CSS-стили различных элементов
В этом топике представлены лаконичные базовые стили для различных элементов: кнопок, ссылок, форм, теней, градиентов, которые можно использовать в своих проектах. Да и просто разобраться в принципах работы таких конструкций проще на несложных примерах.
Базовая конструкция
В примерах базовая конструкция блока выглядит так:
Тени
Блок отбрасывает тень в разные стороны:
.drop-shadow < background: #9479fa; >.drop-shadow.top < box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4) >.drop-shadow.right < box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4) >.drop-shadow.bottom < box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4) >.drop-shadow.left
div[class*="emphasize-"] < background: #69D2E7; >.emphasize-dark < box-shadow: 0 0 5px 2px rgba(0,0,0,.35) >.emphasize-light < box-shadow: 0 0 0 10px rgba(255,255,255,.25) >.emphasize-inset < box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5) >.emphasize-border
div[class*="embossed"] < background: #8ec12d; color: #333; text-shadow: 0 1px 1px rgba(255,255,255,0.9); >.embossed-light < border: 1px solid rgba(0,0,0,0.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); >.embossed-heavy
Градиенты
div[class*="gradient"] < background-color: #DEB8A0; box-shadow: 0 0 0 1px #a27b62; >.gradient-light-linear < background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); >.gradient-dark-linear
Закругленные углы
div[class*="rounded"] < background: #fca1cc; >.light-rounded < border-radius: 3px; >.heavy-rounded < border-radius: 8px; >.full-rounded < border-radius: 50%; >.barrel-rounded < border-radius: 20px/60px; >
Ссылки
Несколько примеров стилей для ссылки в тексте:
.inline-link-1 < display: inline-block; margin: 0 0.2em; padding: 3px; background: #97CAF2; border-radius: 2px; transition: all 0.3s ease-out; /* Font styles */ text-decoration: none; font-weight: bold; color: white; >.inline-link-1:hover < background: #53A7EA >.inline-link-1:active < background: #C4E1F8 >.inline-link-1:visited
.inline-link-2 < display: inline-block; border-bottom: 2px dashed rgba(0,0,0,0.9); /* Font styles */ text-decoration: none; color: #777; >.inline-link-2:hover < border-bottom-style: dotted; >.inline-link-2:active < border-bottom-style: solid; >.inline-link-2:visited
.inline-link-3 < display: inline-block; position: relative; padding-left: 6px; /* Font styles */ text-decoration: none; color: #6AB3EC; text-shadow: 0 1px 1px rgba(255,255,255,0.9); >.inline-link-3:hover < color: #3C9CE7; >.inline-link-3:before < content: "\25BA"; font-size: 80%; display: inline-block; padding-right: 3px; pointer-events: none; >.inline-link-3:hover:before
.metro.three-d < position: relative; box-shadow: 1px 1px #53A7EA, 2px 2px #53A7EA, 3px 3px #53A7EA; transition: all 0.1s ease-in; >.metro.three-d:active
.bordered-link < display: inline-block; padding: 8px; border: 3px solid #FCB326; border-radius: 6px; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2), inset 0 2px 1px rgba(0, 0, 0, 0.2); /* Font styles */ text-decoration: none; font-size: 14px; text-transform: uppercase; color: #222; >.bordered-link:hover < border-color: #FDD68B >.bordered-link:active
.embossed-link < box-shadow: inset 0 3px 2px rgba(255,255,255,.22), inset 0 -3px 2px rgba(0,0,0,.17), inset 0 20px 10px rgba(255,255,255,.12), 0 0 4px 1px rgba(0,0,0,.1), 0 3px 2px rgba(0,0,0,.2); >.modern.embossed-link < box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.3), 0 0 4px 1px rgba(0,0,0,0.2), inset 0 3px 2px rgba(255,255,255,.22), inset 0 -3px 2px rgba(0,0,0,.15), inset 0 20px 10px rgba(255,255,255,.12), 0 0 4px 1px rgba(0,0,0,.1), 0 3px 2px rgba(0,0,0,.2); >.modern.embossed-link:active
Input
Добавляет border-radius по клику:
.simple-input < display: block; padding: 5px; border: 4px solid #F1B720; border-radius: 5px; color: #333; transition: all 0.3s ease-out; >.simple-input:hover < border-radius: 8px >.simple-input:focus
Вместо формы ввода просто линия: