Css урок 2. использование классов

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; }

В противоположность first-child, last-child выделит последний пункт родителя элемента.

Пример

Давайте построим простой пример для демонстрации одного из возможных способов использования этих классов. Создадим элемент списка, имеющий стили.

Разметка

XHTML

<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; }

Эти стили установят фон, удалят отступ браузера по умолчанию в 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; }

Вот так; все исправлено!

X[href^=»http»]

CSS

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }

Когда-нибудь интересовались, каким образом некоторые веб сайты могут отображать маленькую иконку рядом с внешними ссылками? Я уверен, вы такое уже видели; они отлично напоминают о том, что ссылка направит вас на совершенно другой веб сайт.

Это легко делается при помощи знака ^ («карат»). Чаще всего он используется в регулярных выражениях для обозначения начала строки. Если нужно выбрать все тэги-зацепки, имеющие href, начинающийся с http, можно применить селектор, подобный вышеуказанному фрагменту.

Обратите внимание, что мы не ищем http://; он не нужен и не несет ответственности за url’ы, начинающиеся с https://. Теперь, если бы нам было нужно вместо этого определить стиль всем привязкам, которые ссылаются на, скажем, фотографию? В этом случае давайте поищем конец строки

Теперь, если бы нам было нужно вместо этого определить стиль всем привязкам, которые ссылаются на, скажем, фотографию? В этом случае давайте поищем конец строки.

1.*

CSS

* { margin: 0; padding: 0; }

Давайте перед тем, как перейти к более продвинутым селекторам CSS, мы с новичками одолеем самые простые и очевидные.

Знак звездочки выберет каждый отдельный элемент страницы. Многие разработчики используют этот прием для обнуления margin и padding. Хотя он, безусловно, хорош для быстрых проверок, я бы советовал вам никогда не пользоваться им в продуктивном коде. Он добавляет слишком много веса браузеру и не является необходимым.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Звездочку * также можно использовать для дочерних селекторов.

CSS

#container * { border: 1px solid black; }

Он выберет каждый отдельный элемент, являющийся дочерним 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; }

Разница между обычным 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>

Селектор #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.

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; }

А вот особенность, которой можно удивить своих друзей. Об этом приеме знает не так уж много людей. Знак «тильда» (~) позволяет выбрать своей целью атрибут со списком значений, разделенным пробелами.

Согласно вышеприведенному пользовательском атрибуту из номера пятнадцать мы могли бы создать атрибут data-info, который может получить разделенный пробелами список чего угодно, что нужно пометить. В этом случае мы отметим внешние ссылки и ссылки на изображения — просто для примера.

XHTML

<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; }

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>

Теперь, не читая дальше, попробуйте догадаться, как выбрать только «List Item 2″. Когда придете к решению (или сдадитесь), продолжите чтение.

Решение 1

Решить эту контрольную работу можно многими способами. Мы рассмотрим некоторые из них. Давайте начнем с использования first-of-type.

CSS

ul:first-of-type > li:nth-child(2) { font-weight: bold; }

Этот отрывок, по сути, говорит: «Найдите первый неупорядоченный список на странице, затем найдите только прямые дочерние элементы, являющиеся пунктами списка. Далее отфильтруйте все до второго пункта списка в наборе».

Решение 2

Второй возможный вариант будет использовать смежный селектор.

CSS

p + ul li:last-child { font-weight: bold; }

В этом сценарии мы находим ul, непосредственно следующий за тэгом p, а затем найдем самый последний его дочерний элемент.

Решение 3

Можно вредить им или играть с этими селекторами, как угодно.

CSS

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

На этот раз мы берем первый 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. Приведем несколько примеров написания таких правил:

1. Основной текст с выравниванием по ширине, абзацный отступ 30px, гарнитура (шрифт) — Serif, кегль (размер шрифта) — 14px:

p {
    text-align justify;
    text-indent 30px;
    font-family Serif;
    font-size 14px;
    }

Это правило будет применено ко всем тегам <p>.

1. Синий цвет для заголовков с первого по третий уровень:

h1, h2, h3 {
    color blue; /* тоже самое, что и #0000FF */
}

1. Таблицы и изображения выводить без обрамления:

table, img {border none;}

1. Ссылки в элементах списков показывать без подчеркивания:

li a {text-decoration none;}

1. Внутренние отступы слева и справа для блоков (<div>), заголовков таблиц и ячеек таблиц установить в 10px и залить фон желтым цветом:

div, th, td {
    padding-left 10px;
    padding-right 10px;
    background-color yellow;
}

1. Все ссылки в документе отображать черным цветом и полужирным шрифтом, а в основном тексте и списках — обычным, а также выделять их зеленым цветом и подчеркивать только при наведении курсора (в описании правил использован псевдоэлемент 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.

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.

С этим читают

• Background-color
• :first-child
• Цвета в css
• Свойство content
• How to add border to html table
• Css 3d transforms
• Свойство background: все настройки фона в одном месте
• Background-position: позиционирование фона
• Advanced & beautiful html5 / javascript color picker
• Bootstrap text/typography