Самым крупным на странице будет заголовок, заключенный в тэг

Пожалуйста, войдите или зарегистрируйтесь для публикации ответа на этот вопрос.

решение вопроса

Связанных вопросов не найдено

Обучайтесь и развивайтесь всесторонне вместе с нами, делитесь знаниями и накопленным опытом, расширяйте границы знаний и ваших умений.

поделиться знаниями или
запомнить страничку

• Все категории
• экономические 43,679
• гуманитарные 33,657
• юридические 17,917
• школьный раздел 612,508
• разное 16,911

Популярное на сайте:

Как быстро выучить стихотворение наизусть? Запоминание стихов является стандартным заданием во многих школах.

Как научится читать по диагонали? Скорость чтения зависит от скорости восприятия каждого отдельного слова в тексте.

Как быстро и эффективно исправить почерк? Люди часто предполагают, что каллиграфия и почерк являются синонимами, но это не так.

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

• Обратная связь
• Правила сайта

отчеты по лабораторным работам / лабораторная работа 5 (html, css, js) / HTML

35 req.send(null); // отослать запрос 36 37 // (5) 38 statusElem.innerHTML = ‘Ожидаю ответа сервера. ‘ 39 > Поток выполнения, использованный vote, довольно типичен и выглядит так: Функция создает объект XmlHttpRequest назначает обработчик ответа сервера onreadystatechange открывает соединение open отправляет запрос вызовом send (ответ сервера принимается срабатывающей в асинхронном режиме функцией onreadystatechange) показыает посетителю индикатор состояния процесса Серверный обработчик, к которому обращен AJAX-запрос (в примере это vote.php) по сути ничем не отличается от обычной страницы. AJAX-запрос, отправляемыйXmlHttpRequest, ничем не отличается от обычного запроса. Просто текст, который возвращает сервер, не показывается как HTML, а читается и обрабатывается функцией onreadystatechange. Пример: vote.php для примера с голосованием

Код, который это обеспечивает, работает следующим образом. Активируется примерно при каждом нажатии клавиши Время посылки последнего запроса отслеживается Для «обычной» скорости печати — запрос отсылается при каждом нажатии Для «программистской» скорости — каждые несколько нажатий Создается скрытый DIV, который показывается при начале печати DIV заполняется ответом сервера Текущий результат подсвечен, можно перемещаться и выбирать При нажатии правой стрелки, поиск в подрезультатах Результаты кэшируются при нажатии на «удалить», обращения к серверу не происходит Время на осуществление запроса отслеживается для управления частотой запросов к серверу Обычный модем будет обращаться к серверу меньше, Подключение по выделенной линии — запросы идут чаще. Пример. Gmail. Раз уж взялись за Google — рассмотрим почтовый сервис той же компании, http://gmail.com . На момент его появления он явился единственным открытым почтовым сервисом, использующим AJAX для следующих фич. Проверка ошибок ввода формы ДО сабмита На сервер передается имя пользователя, результат проверки возвращается на страницу. «Мгновенная» загрузка Браузер обращается к серверу только за данными, а не обновляет весь громоздкий интерфейс Автоматическая «доставка» писем в открытую папку Время от времени отправляется запрос на сервер и, если пришли новые письма, они появляются в браузере. Автодополнение Достаточно ввести первые буквы имени адресата, и остальные дополняются автоматически, как в десктоп-приложениях. Результат: обширная популярность, высокий спрос на account’ы с момента открытия. Синхронная модель VS Асинхронная модель В обычном программировании все операции носят синхронный характер, т.е выполняются одна за другой. Условно говоря, мы действуем так: закидываем удочку ждем, когда клюнет клюнуло — включаем подтяжку спиннинга При асинхронном подходе мы: вешаем на удило специальный детектор клева, задаем ему тянуть спиннинг, когда клюнет закидываем удочку занимаемся другими делами детектор клева срабатывает, запуская подтяжку спиннинга Т.е, в синхронном случае удочка постоянно приковывает наше внимание. Ловля рыбы — последовательный процесс. В асинхронном варианте — мы сначала задали программу, что делать при клеве, а затем опустили удочку ловить и занялись другими делами. Например, поставили еще 5 таких удочек. Асинхронное программирование сложнее, чем синхронное, и поначалу непривычно, т.к в нем заранее задается то, что сработает после . Т.е, программу «что делать, когда клюнет» нужно задать до того, как клюнуло, и вообще неизвестно, есть ли в водоеме рыба. Существуют приемы, облегчающие асинхронное программирование, например, отложенный объект Deferred (Twisted,Dojo,Mochikit), но об этом — в отдельной статье. Синхронная и асинхронная модель в AJAX Вернемся к нашим баранам: браузеру, серверу и, скажем, базе данных. В синхронной модели браузер отправляет запрос на сервер и висит, ждет, пока тот совершит всю необходимую работу. Сервер выполняет запросы к базе данных, заворачивает ответ в необходимый формат и выводит его. Браузер. получив ответ, вызывает функцию показа. Все процессы выполняются последовательно, один за другим. Сетевые задержки включены во время ожидания, обозначенное на схеме серым цветом. Пользователь не может заниматься чем-то другим на этой же странице, пока происходит синхронный обмен данными.

В асинхронной модели запрос отсылается («удочка поставлена»), и можно заняться чем-то другим. Когда запрос выполнился («клюнуло») — запускается заранее подготовленная программистом функция («подтянуть спиннинг») показа сообщения сервера.

Здесь сервер сразу же уведомляет браузер о том, что запрос принят в обработку и освобождает его для дальнейшей работы. Когда ответ будет готов — сервер перешлет его, и на браузере будет вызвана соответствующая функция показа, но пока этот ответ формируется и пересылается — браузер свободен. Пользователь может написать комментарии, заполнить и отослать форму и т.п: Могут производиться новые асинхронные запросы. Асинхронная модель характеризуется почти мгновенной реакцией на действия пользователя, так что создается впечатление удобного и быстрого приложения. Например, в примере с голосованием выше — кнопка срабатывает сразу, хотя реальный учет голоса происходит позднее, после обработки сообщения сервером. Из-за такого разрыва между действием и реальным результатом приложение становится гораздо более чувствительно к ошибкам. Особенно в случае нескольких одновременных асинхронных запросов, нужно заботиться об очередности выполнения и ответа (race-conditions) и, в случае ошибки, оставлять приложение в целостном (consistent) состоянии. Особенности асинхронной модели Сложность в реализации Недостаточные возможности браузера (javascript) Асинхронная модель сложнее для отладки Race conditions Неопределена последовательность выполнения Можно делать много одновременных задач («удочек»), но задача, начатая первой, может окончиться последней. Реакция тут же, но неизвестно, какой будет результат. Усложнена обработка ошибок Ошибок коммуникации — разрыв связи, и т.п. Пользовательских ошибок — например, не хватило привилегий Контроль целостности (bugproof) Например, редактор отправил асинхронный запрос на удаление ветки дерева. Добавление в нее нужно отключить, пока не придет ответ сервера. Если вдруг не хватило привилегий, то операция не удалась. Интерактивность Быстрый интерфейс Плюсов всего два, зато какие! Овчинка стоит выделки. Асинхронный drag’n’drop. Иногда для асинхронных операций необходимо делать различные «финты ушами». Например, хочется сделать drag’n’drop в дереве, т.е перетаскивать статьи из одного раздела в другой мышкой, и чтобы они на сервере в базе данных меняли родителя. Drag’n’drop — это «взял мышей объект — положил куда надо — готово». Но в асинхронной модели не может быть все прям сразу «готово». Надо проверить привилегии на сервере, проверить, существует ли еще объект, вдруг его удалил другой пользователь. Надо как-то показать, что процесс пошел, но результат «ща будет..». А как? В асинхронной модели указатель мыши не может просто так зависнуть над объектом, превратившись в часики. В таком случае применяют либо синхронные запросы к серверу — и тогда все действительно подвисает, либо оригинальный выход — положить объект, как будто он перенесен, и проинформировать анимированной иконкой об ожидании ответа. Если ответ отрицателен — обработчик ответа переносит объект обратно. Stale context, устаревший контекст В примере с drag’n’drop также затронута проблема «stale context» — устаревшего контекста. Веб — многопользовательская среда. Если для навигации используется, скажем, дерево статей, то над ним работают много человек. Один из них может удалить ветку дерева, над которой работает другой: конфликт. Как правило, для преодоления таких казусов используются следующие средства: Политика редактирования Это когда все знают кто чего делает и на уровне деления полномочий и личного общения такие удаления согласовывают. Вариант заведомо небезопасный, но обычно работающий. Локинг и/или версионный контроль Локинг — блокирование редактируемых документов. Версионный контроль — каждый новый документ становится версией, так что изменения никогда не теряются. Версионность влечет за собой конфликты, когда Петя начал редактировать документ раньше Васи, а сохранил — позже. При этом в последней версии изменения Васи оказались потеряны, хотя предпоследняя (Васина) версия в системе обязательно есть. Более подробно о локинге и версионности можно почитать, например, в документации к системе версионного контроля Subversion . Автообновление контекста Проблема устаревшего контента может быть на 99% решена при помощи мгновенного автообновления. Браузер держит постоянное соединение с сервером (или делает время от времени корректирующие запросы) — и нужные изменения отсылаются по этому каналу. Например, в раскрытую ветку дерева иногда подгружаются новые статьи, в открытый почтовый интерфейс — новые письма.

Вообще, проблема устаревшего контекста напрямую относится к задаче целостности данных. За конечную проверку целостности, как и при валидации форм, в любом случае несет ответственность сервер. CSS ( англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки . Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML , но может применяться с любыми видами документов в формате XML , включая SVG и XUL . [ править ]Обзор CSS используется создателями веб-страниц для задания цветов , шрифтов , расположения и других аспектов представления документа . Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки ) и представления документа (написанного на CSS). Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля . CSS при отображении страницы может быть взята из различных источников (порядок иерархии от сильного к слабому): Авторские стили (информация стилей, предоставляемая автором страницы) в виде: Inline-стилей, когда в HTML-документе информация стиля для одного элемента указывается в его атрибуте style. Встроенных стилей — блоков CSS внутри самого HTML-документа. Внешних таблиц стилей, то есть отдельного файла .css, на который делается ссылка в документе. Пользовательские стили Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам. Стиль браузера Стандартный стиль, используемый браузером по умолчанию для представления элементов. Таблица стилей состоит из набора правил . Каждое правило, в свою очередь, состоит из одного или нескольких селекторов , разделѐнных запятыми, и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений. Схематически это можно показать так: селектор , селектор < свойство : значение ; свойство : значение ; свойство : значение ; >Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят свойства нескольких правил одновременно (или, в редких случаях, в одном правиле есть одноименные свойства). Это называется «каскадом», в котором для свойств рассчитываются приоритеты или «веса», что делает результаты предсказуемыми. Приоритеты рассчитываются таким образом (от большего к меньшему): свойство задано при помощи !important; стиль прописан напрямую в теге; количество идентификаторов (#id) в селекторе (чем больше, тем больше приоритет); количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе; количество имѐн тегов в селекторе. Кроме того, имеет значение относительный порядок расположения свойств — свойство, указанное позже, имеет приоритет. Пример таблицы стилей: p < font-family : "Garamond" , serif ; >h2 < font-size : 110 % ; color : red ; background : white ; >.note < color : red ; background : yellow ; font-weight : bold ; >p #paragraph1 < margin : 0 ; >a :hover

text-decoration : none ; > #news p < color : blue ; >Здесь приведено шесть правил с селекторами p, h2, .note, p#paragraph1, a:hover и #news p. В первых двух правилах HTML-элементам p (абзацу) и h2 (заголовку второго уровня) назначаются стили. Абзацы будут отображаться шрифтом Garamond , или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками (« serif »). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем . Третье правило будет применено к элементам, атрибут class которых содержит слово ‘note’. Например:

Этот абзац будет выведен полужирным шрифтом красного цвета на желтом фоне.

Четвѐртое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin). Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберѐт подчеркивание, когда указатель мыши находится над этими элементами. Последнее, шестое правило, применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным «news». [ править ]CSS-вѐрстка До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счѐт этого нововведения стало возможным лѐгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления. Преимущества: Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым. Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и могут быть закешированы . Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл. Дополнительные возможности оформления. Например, с помощью CSS-вѐрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы. Недостатки: Различное отображение вѐрстки в различных браузерах (особенно устаревших), которые по разному интерпретируют одни и те же данные CSS. Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования. Стили и таблицы стилей На самом простом уровне, стиль является всего лишь правилом, сообщающим браузеру, как интерпретировать отдельные теги HTML. С каждым тегом связан ряд свойств, значения которых определяют его вид при выводе браузером. Так, например, у большинства тегов ( , , и т. д.) есть свойство COLOR , значение которого определяет цвет, используемый для отображения содержимого тега. Таблица (лист) стилей CSS — набор правил отображения, применяемых в документе, к которому присоединяется соответствующая таблица стилей. Все свойства, использующиеся в таблицах стилей, условно можно разделить на несколько групп: управляющие видом шрифта (гарнитура, кегль, цвет, наклон, жирность. ); управляющие форматированием абзаца (отступ красной строки, выравнивание, интерлиньяж, расстояние между словами. ); управляющие свойствами блока (отступы слева-сверху-справа-снизу, местоположение блока в документе, видимость блока. ); другие (цвет ссылок, изменение внешнего вида курсора. ). Классы стилей При написании HTML-документов довольно часто встречается необходимость каким-либо образом выделять блоки информации, подчеркивать их уникальность или логическую нагрузку. Например, в учебнике по математике кроме обычного описания материала могут присутствовать теоремы, задания, примеры и др. Стандартный HTML предоставляет нам теги логической разметки, например, тег предназначен для длинных цитат. CSS дает возможность самим придумывать логические конструкции и описывать их внешний вид. Допустим, мы хотим создать страницу, на которой будет два вида абзацев (тег ), причем оба вида будут постоянно чередоваться и часто повторяться. Типичный пример такой страницы — интервью, в котором чередуются вопросы
журналиста и ответы интервьюируемого. Естественно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга. Сначала выделим абзацы (вопросы журналиста и ответы интервьюируемого) с помощью селектора класса CLASS . . .

Вопрос журналиста

Ответ интервьюируемого

. В разделе HEAD документа зададим стиль каждого класса. P.ask < font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; text-align: justify; color: gray; margin-left: 100px; font-weight: bold; >P.answer < font-family: Times, serif; font-size: 14pt; color: black; text-align: justify; margin-left: 20px; >Вопросы журналиста будут отображаться шрифтом серии sans-serif серого цвета, полужирным начертанием, размером 12 пунктов, с отступом 100 пикселов от левого края страницы, с выравниванием по ширине. Ответы же будут отображены шрифтом Times , размером 14 пунктов черного цвета, с отступом 20 пикселов от левого края страницы, с выравниванием по ширине. Вложенные элементы наследуют правила, заданные для родительских элементов. Так, например, если в абзац, содержащий вопрос журналиста, включить фрагмент текста, выделенный курсивным начертанием, то этот фрагмент при отображении браузером уже будет иметь выделение как курсивом, так и полужирным шрифтом. Это связано с тем, что текст, заключенный между тегами и , входит в состав абзаца и наследует его свойства. Каскадные таблицы стилей Одной из основных особенностей таблиц стилей является каскадность. Она означает, что при обработке стилей используется специальный механизм каскадирования . Для одного документа могут быть заданы различные правила. Один набор правил может определяться разработчиком документа, другие правила могут быть заданы пользователем. Кроме того, в каждом браузере имеется набор правил, используемых по умолчанию; они используются, если какое-либо из свойств явно не определено. Средства каскадирования собирают и объединяют различные правила, а также разрешают возникающие при этом конфликты. Свойство каскадности тесно связано со способом подключения стилей к HTML-документу, которое возможно осуществить тремя способами: inline-описание , описание в секции заголовка и использование внешнего файла. Самый простой способ — это, так называемое, inline-описание или описание, встроенное в тег. При помощи дополнительного атрибута STYLE можно определить нужные стилевые параметры в любом теге. Основной недостаток этого способа в том, что определение стиля действует лишь в пределах одного тега. Представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если указывать стиль у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания внешнего вида при помощи тега . Пример

Этот параграф переопределен стилем

Гораздо удобнее заранее определить все нужные стили оформления и впоследствии просто применять их к соответствующим тегам, т. е. воспользоваться способом описания стилей в секции заголовка. Именно этим способом мы пользовались в примерах, рассматривающих форматирование абзаца и оформление интервью. Действие таблицы стилей, подключенной таким образом, распространяется на весь HTML-документ. И наконец, третий способ, — вынесение описания стилей во внешний файл (внешнюю таблицу стилей). Для этого нужно все описание стилей поместить в отдельный файл с расширением .css . В раздел HEAD документа включить строку, аналогичную следующей, где атрибут HREF содержит имя файла со стилями: Диапазон воздействия таблицы в этом случае простирается на все файлы, в которые включено такое описание. Если потребуется изменить внешний вид группы документов, то будет достаточно откорректировать лишь один стилевой
файл. Сравните этот способ с предыдущими: в одном из них придется менять описание стилей в каждом документе, а в другом — даже в каждом теге. На практике приходится пользоваться всеми тремя способами, и здесь в игру вступает «каскадность» стилей, позволяющая переопределять стили. Приведенный выше список способов подключения таблиц стилей соответствует порядку переопределения: вышерасположенный способ может переопределять нижерасположенный. Например, пусть во внешнем стилевом файле определено, что текст в теге

должен выводится шрифтом высотой 10 пунктов. Если при этом в разделе HEAD документа переопределить тег

, указав, что текст должен отображаться шрифтом в 12 пунктов, то он будет выведен именно таким кеглем — стиль, расположенный в заголовке документа, переопределит стиль внешнего файла. В целом, браузер расставляет приоритеты таблиц стилей следующим образом: inline-стили (встроенные с помощью атрибута STYLE непосредственно в теги документа) — наивысший приоритет; будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями; внедренные стили (перечисленные в теге-контейнере в разделе документа) — чуть меньший приоритет; будут применяться во всех случаях, кроме случаев возникновения конфликта с inline-стилями (при возникновении такого конфликта будут применены inline-стили); связанные стили (стили, присоединенные к HTML-файлу посредством тега ) — наименьший приоритет; будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей. Зная, в какой последовательности браузер анализирует таблицы стилей, можно задать одну общую связанную таблицу для всех страниц сайта и при этом гибко управлять стилями отдельных страниц и отдельных элементов на странице. Именно с этой особенностью и связано слово «каскадные» в названии CSS (cascading style sheets) — несколько таблиц стилей, присоединенных к HTML-файлу, прокатываются через анализатор (браузер) неким «каскадом» в порядке их приоритетности. Применение таблиц стилей Подготавливая Web-материал, авторы всегда встают перед выбором, как организовать оформление материала: пользоваться обычными средствами HTML или подключать таблицы стилей? Профессиональные Web-дизайнеры всегда останавливают свой выбор на таблицах стилей. Какие же преимущества имеет этот подход? Во-первых, таблицы стилей позволяют разделить смысловое содержимое документа и его оформление. Согласно идеологии текстовой разметки все оформление рекомендуется вынести во внешний стилевой файл. Основной документ будет содержать только информацию и ссылки на необходимые стили. Такой подход дает возможность конкретному устройству при показе документа задействовать соответствующую таблицу стилей. Для сотового телефона и монитора компьютера они, разумеется, должны быть разными. В первом случае нужно использовать минимальное оформление, которое позволит представить информацию наиболее оптимально и компактно. Во втором же случае допустимо использовать все возможности шрифтового и цветового оформления. Во-вторых, как мы уже убедились, размещение всей стилевой информации в одном внешнем файле позволяет, изменив содержимое только одного (!) стилевого файла, в считанные секунды сменить дизайн целой группы документов. Причем никаких других переделок не понадобится. Разумеется, это верно лишь в том случае, если все документы группы ссылаются на одну и ту же таблицу стилей. В-третьих, таблицы стилей довольно часто используются для достижения единого стиля оформления какого-либо набора документов. Например, члены научного сообщества, готовя материалы к публикации их на WWW-сервере, могут пользоваться стандартными таблицами стилей, которые для них заранее подготовил Web-мастер. Основы CSS Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTMLкода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя. CSS действует другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами. Удобно, не правда ли? Более того, вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Webстраниц. Потрясающе удобно. И еще одно, связанное с этим, преимущество – возможность изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле. Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой. Давайте рассмотрим, как мы можем воплотить столь замечательные возможности в жизнь. Практическое освоение CSS Как вам уже известно, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с

помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега , располагающегося внутри тега ваших страниц: Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://. ») в случае, если файл стилей находится на другом сервере. Второй вариант, при котором описание стилей располагается в коде Webстранички, внутри тега , в теге . В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type=»text/css» является обязательным и служит для указания броузеру использовать CSS. И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим. Давайте рассмотрим механизм, с помощью которого стили присваиваются элементам Webстраниц. Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так: НАЗВАНИЕ_ЭЛЕМЕНТА , Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTMLтега (H1, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений. Более подробно команды языка CSS мы рассмотрим чуть позже. Пример: H1 В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет. Также элементы страниц, созданные с использованием CSS, используют механизм наследования: т. е. если вы располагаете изображение внутри тега

.

, оформленного с помощью CSS, с отступами, так, чтобы параграф занимал только определенную часть ширины страницы, изображение также унаследует значения отступов, указанные для этого параграфа. CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр или идентификатор элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее. Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных). Пример: .b-с – описание стиля для класса b-с Все элементы класса b-с будут отображаться жирным шрифтом с выравниванием по центру страницы (или ячейки таблицы).

Текст параграфа

– параграфу присвоен стиль класса b-с. текст – ячейке таблицы присвоен стиль класса b-c. Содержащийся в ячейке текст будет отображаться согласно описанию класса. Таким образом, вы можете присвоить описанный стиль любым текстовым элементам страниц. Обратите внимание, что при написании названия классов необходимо соблюдать регистр символов, согласно тому, как вы назвали класс в описании стиля! Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько – это уже класс. Свойства элементов, управляемых с помощью CSS В настоящее время язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять. Но из-за того, что этот стандарт еще очень молод, в полном объеме его пока не поддерживают наиболее популярные броузеры (Netscape Navigator и Microsoft Internet Explorer). Последние версии этих броузеров могут работать с довольно большим количеством команд CSS, а вот 3-и версии или совсем не поддерживают его (Netscape Navigator 3), или поддерживают, но лишь частично (Microsoft IE 3). Более того, поскольку разработчики из этих компаний никак не могут договориться между собой, последние версии броузеров поддерживают неодинаковый набор свойств CSS. Все это делает малоприемлемым использование CSS в полном объеме, так как, при использовании CSS для форматирования элементов страницы и просмотре ее с помощью броузера версии ниже 4й, есть большая вероятность увидеть нечто такое, что вам не понравится. Поэтому будет разумнее воздержаться от использования CSS для форматирования основной структуры страниц до всеобщего перехода на последние версии броузеров. В то же время, применяя «безопасные», т. е.

совместимые с максимальным количеством броузеров элементы CSS, вы можете сильно облегчить себе жизнь и сделать ваши Web-странички более привлекательными в плане шрифтового оформления, а пользователи, путешествующие по Internet с помощью устаревших броузеров, просто этого не увидят, но также они не увидят и тех кошмаров, которые появляются при использовании CSS для верстки страниц. СВОЙСТВА ШРИФТА

font-family font-weight font-size

Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент. P Определяет степень жирности шрифта с помощью трех параметров: lighter, bold, bolder B Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры) H1 H2 H3

font-size

Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры) H1 H2 H3

ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА

color backgroundcolor

Определяет цвет элемента I Устанавливает цвет фона для элемента – именно для элемента, а не для странички. Обратите внимание, что броузеры отображают это свойство по-разному: Microsoft IE отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator – лишь ширину, занимаемую этим элементом. Посмотрите пример (рис. 3, 4 ), вот его исходный код: H1

Cascading

Style

Sheets

В этом примере в разделе всем элементам на этой страничке был установлен размер 300 % от нормы. Затем каждому из элементов

были присвоены собственные значения цвета фона и цвета символов.

СВОЙСТВА ТЕКСТА

textdecoration
Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст H4 A .wrong

text-align	Определяет выравнивание элемента.
		P
H1

Каскадность в CSS — Основы современной верстки

В прошлом уроке была разобрана вторая часть словосочетания Каскадные таблицы стилей, а именно таблицы стилей. Мы изучили, как записываются и применяются стили к различным HTML элементам. В этом уроке поговорим о значении слова каскадные.

Что такое каскадность? Представьте себе каскад водопадов. В них вода перетекает из одного водопада в другой и так до тех пор, пока это все не уйдет в общий бассейн.

В CSS слово каскадность имеет такое же значение. В качестве воды у нас CSS свойства. Они могут накладываться и перекрывать друг друга. Другими словами каскадность — возможность языка CSS накладывать свойства друг на друга, а также расширять свойства в селекторах.

Возможно такое описание достаточно сложное, но давайте посмотрим на примере. Создадим параграф с двумя классами: text-bold и text-dark . Первый класс будет отвечать за жирное начертание текста, а второй за установку темного цвета шрифта. Также добавим селектор по тегу и укажем размер шрифта 24 пикселя.

 class="text-bold text-dark"> Какой-то очень интересный текст об интересной вещи. Очень интересно. 

В CSS файле укажем следующие стили:

p  font-size: 24px; > .text-bold  font-weight: bold; > .text-dark  color: #333333; > 

Попробуйте воспроизвести этот пример, и вы увидите, что текст выводится темного цвета и с жирным начертанием. Стили от классов text-bold и text-dark сложились и применились к нашему параграфу. Также текст имеет размер 24 пикселя, которые мы указали для селектора по тегу.

Итоговыми стилями для нашего параграфа будут:

 color: #333333; font-weight: bold; font-size: 24px; > 

Это и есть каскадность стилей CSS. Хоть мы и использовали разные селекторы и классы для описания, но в конечном итоге они суммировались.

Приоритет селекторов

Важной чертой CSS является то, что разные типы селекторов имеют разный приоритет. Если стили противоречат друг другу в разных селекторах, то вступает в дело принцип приоритета. Разберем на примере. Возьмем параграф с классом red и идентификатором blue . Установим соответствующие цвета для текста. Для всех же параграфов в тексте установим зеленый цвет.

p  color: green; > .red  color: red; > #blue  color: blue; > 

 id="blue" class="red">Какого же цвета будет параграф? 

Перед тем, как читать дальше попробуйте выполнить этот пример в любом удобном вам месте.

Как вы смогли заметить, текст параграфа будет синим. Но почему так? Может быть, дело в том, что синий цвет в CSS указан самым последним? В данном случае нет. Даже если мы переместим селектор по идентификатору в самый вверх, параграф все равно останется синим.

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

Условно можно расставить селекторы в следующем порядке по приоритету:

1. Селектор по идентификатору ( #blue )
2. Селектор по классу ( .red )
3. Селектор по тегу ( p )

Где 1 — самый высокий приоритет, а 3 — самый низкий.

Разберем еще один пример:

p  color: blue; font-weight: bold; > .important  color: purple; font-style: italic; > #intro  color: green; > 

 class="important" id="intro">Индейские племена Манахаттоу и Канарси. 

Этот текст будет наклонным, жирным и зеленым . И вот почему:

• Селектор по тегу p :
  • Добавит синий цвет
  • Добавит жирное начертание
  • Заменит синий цвет на пурпурный
  • Сделает текст курсивным
  • Заменит пурпурный цвет на зеленый

  После всех таких преобразований итоговые стили для параграфа сложатся следующим образом:

   color: green; font-weight: bold; font-style: italic; > 

  Важно: так как селектор по идентификатору имеет самый высокий приоритет и перебивает все стили классов, то его использование считается не очень хорошей практикой. Указав стили для идентификатора, мы лишаем себя возможности переопределить стили с помощью классов. Это бывает очень важно для создания отзывчивых к действиям пользователя сайтов, когда на его действия мы меняем внешний вид некоторых элементов.

  Переопределение свойств

  Возможно, у вас возник вопрос, а что случится, если элемент будет иметь несколько классов, свойства которых противоречат друг другу? Здесь каскадность работает по принципу «Кто последний, тот и прав». Проще всего это так же посмотреть на примере:

  .alert  color: gray; > .alert-error  color: red; > 

   class="alert alert-error">Важное сообщение! Сообщение красного цвета 

  Отталкиваясь от принципа каскадности, браузер вначале увидит селектор .alert и установит серый цвет текста. Далее ему встретится селектор .alert-error , который говорит установить красный цвет. И браузер просто перезапишет серый цвет на красный. Порядок классов в HTML в данном случае не играет никакой роли. Даже в таком случае

   class="alert-error alert">Важное сообщение! Сообщение красного цвета 

  цвет текста будет красным. Это наглядно показывает независимость CSS от HTML. Если же поменять местами селекторы в CSS, то поменяются и итоговые стили.

  .alert-error  color: red; > .alert  color: gray; > 

   class="alert alert-error">Важное сообщение! Сообщение серого цвета 

  Вес селекторов

  Во время разработки вы будете встречать разные ситуации, при которых одни селекторы будут иметь больший вес, чем другие. Причем их месторасположение в CSS файле не имеет особого значения:

   class="form-input"> 

  .form-input  height: 50px; > textarea  height: 200px; > 

  Какой высоты будет элемент ? Правильный ответ — 50px, так как селектор по классу имеет больший приоритет, чем селектор по тегу. Но как же задать высоту в 200px и не вводить новые классы? Достаточно подставить к тегу еще и название класса:

  .form-input  height: 50px; > textarea.form-input  height: 200px; > 

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

  1. Первая цифра показывает количество идентификаторов в селекторе
  2. Вторая цифра показывает количество классов в селекторе
  3. Третья цифра показывает количество тегов в селекторе

  Может звучать сложно, но концепция простая. Разберем прошлый пример:

   class="form-input"> 

  .form-input  height: 50px; > textarea  height: 200px; > 

  • Селектор .form-input состоит из одного класса, поэтому в качестве второй цифры поставим единицу и получим: 010
  • Селектор textarea состоит из одного тега. Записываем единицу в третий разряд нашего числа: 001

  Визуально понятно, что 010 > 001, поэтому свойства внутри такого правила имеют больший приоритет. Мы захотели это исправить и дополнили наш селектор:

  .form-input  height: 50px; > textarea.form-input  height: 200px; > 

  Теперь порядок сил во вселенной немного изменился:

  • Селектор .form-input состоит из одного класса, поэтому в качестве второй цифры поставим единицу и получим: 010
  • Селектор textarea.form-input состоит из одного класса и тега. Записываем единицу во второй и третий разряд нашего числа: 011

  Получаем, что 010 < 011, а значит свойства внутри селектора textarea.form-input будут иметь больший приоритет.

  Такой подход поможет вам лучше понимать, как действуют те или иные правила, а также почему все разработчики стараются максимально уйти от сложных селекторов. При получении опыта вы все реже будете считать вес таким образом, а уже будете изначально понимать, как расставлены приоритеты.

  Самостоятельная работа

  Создайте файл index.html на своем компьютере.

  Внутри HTML расположите следующую запись:

    lang="en">  charset="UTF-8"> Небольшая вёрстка div  width: 500px; height: 500px; background: #333333; > #main  color: white; width: 750px; > .text-white  color: white; > .alert  height: 350px; color: gray; > div  background: blue; > .alert-warning  background: #000000; color: yellow; >    id="main" class="text-white alert alert-warning">Какой-то текст   

  Проанализируйте получившийся результат

  

  Остались вопросы? Задайте их в разделе «Обсуждение»

  Вам ответят команда поддержки Хекслета или другие студенты

  Об обучении на Хекслете

  • Статья «Как учиться и справляться с негативными мыслями»
  • Статья «Ловушки обучения»
  • Статья «Сложные простые задачи по программированию»
  • Урок «Как эффективно учиться на Хекслете»
  • Вебинар « Как самостоятельно учиться »

  Открыть доступ

  Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

  Наши выпускники работают в компаниях:

  Основы CSS — Основы современной верстки

  В прошлых уроках мы познакомились с разметкой элементов с помощью HTML. Многие из этих элементов уже имеют какое-то свое визуальное оформление: параграфы имеют отступы, ссылки выделяются подчеркиванием и цветом, заголовкам устанавливаются другие значения размера шрифта. Обычно этого недостаточно для создания полноценных современных сайтов. Какие-то стили нам просто не подходят, а какие-то элементы мы хотим стилизовать отдельно.

  Для визуального оформления WEB-страницы создан язык CSS. CSS переводится как каскадные таблицы стилей (Cascading Style Sheets). Именно этот язык отвечает за то, как наши HTML-элементы будут выведены пользователю в браузере.

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

  Стили CSS

  Любые стили CSS, будь то цвет текста или целая анимация, записываются по одной и той же формуле: название свойства: значение; .

  Чтобы добавить стиль к элементу, необходимо использовать селектор. Он указывает, к какому именно элементу или элементам нужно добавить наши стили. Для примера возьмем следующую HTML-разметку:

   Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально. 

  Изменим размер и цвет шрифта в этом предложении. Это можно сделать следующей CSS-записью:

  p  color: red; font-size: 20px; > 

  Что означает эта таинственная запись выше? Ее можно условно разбить на три основные составляющие:

  1. p — это селектор. Здесь мы говорим, чтобы браузер выбрал все параграфы на странице. О том, какие бывают селекторы, мы поговорим чуть позже.
  2. Фигурные скобки < >. Они отделяют селектор от правил. Все правила записываются уже внутри этих фигурных скобок.
  3. Свойства. Они записываются по схеме, которая представлена ниже. Чем больше у вас будет практики, тем больше различных свойств и их значений вы будете знать. Не пытайтесь выучить их все сразу. Всегда используйте документацию. Даже опытные разработчики прибегают к ней, чтобы вспомнить правильные значения того или иного свойства.

  Разберем некоторые свойства, которые помогут вам оформлять текст:

  • font-size . Это свойство позволяет задать размер шрифта. Со временем вы узнаете множество различных единиц, в которых можно записать значение. На начальном этапе используйте значения в пикселях. Это достаточно простая и понятная единица измерения, которая не зависит от того, какие еще стили указаны у текста.
  • color . Это свойство поможет вам установить новое значение цвета для выбранного текста. Цвет может записываться разными способами. Помимо этого есть большой набор цветов, которые можно записать словами. Это отличный способ познакомиться со свойством color . Посмотреть на все такие записи можно здесь .
  • text-align . Свойство, устанавливающее выравнивание текста. Оно может принимать одно из следующих значений: left , right , center , justify .

  Подключение CSS

  Использовать CSS на странице можно с помощью нескольких способов:

  • использование специального файла
  • использование тега внутри HTML-разметки
  • записывая стили непосредственно у нужного тега. Этот способ называется инлайн (inline) записью.

  Разберемся с каждым способом отдельно.

  Использование отдельного CSS-файла

  Данный способ один из самых удобных в реальной разработке. Так как стилей в проекте обычно много, то держать их в HTML-файле не очень удобно. Связано это с тем, что HTML-файл становится очень большим и ориентироваться в нем становится невозможно. Чтобы этого избежать, можно создать отдельный CSS-файл. Этот файл будет иметь расширение .css, имя же может быть произвольным.

  Представим, что на компьютере создана отдельная директория с проектом. Она может выглядеть следующим образом:

  Добавим основную информацию в файл index.html:

    lang="ru">  charset="UTF-8"> Основной файл index.html   

  Теперь необходимо подключить файл main.css в наш файл index.html. Для этого используется специальный тег . У данного тега необходимо указать атрибут href , значением которого будет путь до файла main.css. Тег указывается в секции .

    lang="ru">  charset="UTF-8"> Основной файл index.html  rel="stylesheet" href="../css/main.css">   

  Дополнительно разберем эту запись: ../css/main.css . Ее можно условно разбить на три составляющие:

  1. ../ — переход в директорию выше. Изначально файл index.html находится в директории html/, поэтому мы «выходим» из нее в директорию site/.
  2. css/ — переход в директорию css/.
  3. main.css — указание имени и расширения файла, который мы хотим подключить.

  Если бы наши файлы index.html и main.css находились в одной директории, то подключение выглядело бы следующим образом: href=»main.css» .

  После подключения файла мы можем записывать все нужные стили именно в файле main.css. Они автоматически подключатся на наш сайт.

  Использование тега style

  Вторым способом использования CSS является использование стилей в специальном теге . Для этого нет необходимости создавать отдельный файл и подключать его к HTML. В этом случае тег обычно указывается внутри секции . Хоть это и не обязательное правило, но желательно придерживаться именно такой структуры.

    lang="ru">  charset="UTF-8"> Основной файл index.html p  color: red; font-size: 20px; >    Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.   

  Данный способ не является основным, хотя и рекомендуется для некоторых стилей. Это позволит отобразить некоторые стили еще до того, как загрузится CSS-файл. Какие стили рекомендовано так выносить, вы сможете узнать в процессе становления вас как профессионала.

  Inline-стили

  Последним вариантом использования CSS являются инлайн-стили. Они подключаются с помощью атрибута style у любого тега в разметке. Это наименее предпочтительный способ. Его тяжело читать, особенно если у тега десяток стилей. К тому же вы не сможете записать стили для всех одинаковых тегов. Придется для каждого указывать отдельно. Это приведет к постоянному копированию стилей.

  Возьмем прошлый пример и добавим inline стили:

    lang="ru">  charset="UTF-8"> Основной файл index.html   style="color: red; font-size: 20px;"> Параграф с размером шрифта 20 пикселей. Текст написан красным цветом.   

  Классы и идентификаторы

  При создании разметки разработчикам удобно отделять одинаковые теги друг от друга с помощью имён. Например, на странице есть два заголовка:

   Как стать программистом  Какими навыками обладает программист 

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

  Дать имена тегам позволяют атрибуты class и id . Эти атрибуты принимают произвольные имена, с помощью которых можно обратиться к элементу в CSS.

  Различие класса и идентификатора в количестве использований:

  • class — значение атрибута может устанавливаться сколько угодно раз в рамках одной страницы
  • id — значение атрибута устанавливается у одного элемента на странице. Не может быть двух одинаковых идентификаторов на странице

  Если значений у атрибута несколько, то они указываются через пробел, например:

   class="title title-big">Как стать программистом  class="another-title title-big">Какими навыками обладает программист  id="help">Второго элемента с идентификатором help быть не должно  id="another-help">Второго элемента с идентификатором another-help быть не должно 

  Чтобы обратиться к элементам по их классу или идентификатору, используются специальные селекторы, которые мы сейчас и рассмотрим.

  Селекторы

  Селекторы — краеугольный камень всего CSS.

  «Не так важны стили, как то, к чему они применяются» © Народная мудрость

  Селекторы позволяют выбирать элементы, к которым будут применяться стили. Это очень мощный и многогранный инструмент, который позволяет выбирать не только по тегу, но и по классу, идентификатору, наведению мыши, разным атрибутам, выбирать только четные или нечетные элементы и так далее.

  Разбор каждого селектора — это тема для целого курса. Сейчас нас интересуют три основных селектора, которые можно назвать базовыми:

  1. Селектор по тегу. Такой селектор мы применяли на протяжении всего урока. Цель простая — просто указать тег, для которого будут применяться стили.
  2. Селектор по классу. Если нужно выбрать только конкретные элементы в HTML, то можно дать тегу произвольный класс и, используя конструкцию .название-класса , добавить стили.
  3. Селектор по идентификатору. Еще один случай выборки по дополнительному атрибуту тега. Главная разница заключается в самом HTML — идентификатор не может повторяться в рамках одной страницы. Одно имя может использоваться только один раз. В связи с этим нет возможности задать стили для идентификатора и использовать его на других элементах. Для выбора идентификатора используется конструкция #имя-идентификатора .

  Рассмотрим все три селектора на реальном примере:

    lang="ru">  charset="UTF-8"> Основной файл index.html  rel="stylesheet" href="../css/main.css">   class="content">  id="main-title">Заголовок с идентификатором Просто параграф без класса или идентификатора    

  #main-title  color: white; font-size: 20px; text-align: center; > .content  background-color: black; > p  color: white; > 

  После применения этих стилей получится следующая картина:

  • Черный фон секции . Для этого использовали класс content и селектор .content ;
  • Заголовок первого уровня имеет белый цвет, размер шрифта 20 пикселей и расположение по центру. У заголовка есть идентификатор main-title , поэтому для добавления стилей мы смогли использовать селектор по идентификатору #main-title ;
  • Все параграфы будут иметь белый цвет текста. Для этого использовался селектор по тегу.

  Вложенность селекторов

  В реальной разработке не всегда удается пользоваться только этими тремя видами селекторов в том виде, в котором вы их только что изучили. Зачастую нам необходимо ограничить область, для которой будут применяться стили. Разберем на примере:

   class="news"> Новости  Новость 1 Текст новости   Новость 2 Текст новости    class="stories"> Интересные истории  История 1 Текст истории   История 2 Текст истории   

  Как добиться того, чтобы заголовки новостей были больше? Можно для каждого заголовка в новости добавить свой класс. Это хорошее решение, если новостей немного или нет необходимости для каждой такой секции вводить новые стили для заголовков.

  Более простым решением станет использование вложенности селекторов. Вначале посмотрим, как решить нашу задачу:

  .news article h2  font-size: 32px; > 

  Этот селектор комбинирует два уже известных типа:

  1. Селектор по классу .news
  2. Селекторы по тегу article и h2

  Разделив их пробелом, мы сказали браузеру: «Возьми все заголовки из , который лежит внутри элемента с классом news ». В примере это элемент .

  Читать селекторы стоит именно таким образом — справа налево. Такой подход называется вложенностью селекторов. Можно комбинировать что угодно и с какой угодно глубиной.

  Важно: для удобной работы не стоит использовать очень большую вложенность. Старайтесь использовать комбинацию не более 2 или 3 селекторов

  Важно понимать, что такая запись .news article h2 выберет все заголовки второго уровня во всех , которые лежат внутри блока с классом news . Давайте немного видоизменим верстку, чтобы это проверить.

   class="news"> Новости  Новость 1 Текст новости   Новость 2 Текст новости  Похожие новости  Похожая новость 1 Текст новости     

  Ко второй новости мы добавили блок «Похожие новости». Самое интересное, что наше правило font-size: 32px; применится и к заголовку «Похожие новости», и к заголовку «Похожая новость 1». Так как оба заголовка так или иначе лежат внутри , которые находятся в блоке с классом .news .

  Такой тип селекторов называется контекстным или селектор потомков. С его помощью мы выбираем всех потомков, которые встречаются внутри самого левого селектора.

  Как же нам выбрать только те заголовки, которые относятся непосредственно к новостям, а не к похожим новостям или заголовкам других секций? Здесь нам на помощь придет дочерний селектор. Его суть в выборе только тех элементов, которые непосредственно лежат внутри нужного нам блока. Без учета всех остальных вложенностей. Чтобы указать такой селектор, используется символ > . Укажем, что нам нужны только те , которые лежат внутри .news . И нам нужны заголовки, которые находятся внутри этих . Это делается следующим образом:

  .news > article > h2  font-size: 24px; > 

  Теперь размер шрифта для заголовков «Похожие новости» и «Похожая новость 1» не будет увеличен, так как мы указали более конкретный селектор для заголовков.

  Самостоятельная работа

  • Создайте у себя на компьютере файлы index.html и style.css. Подключите файл стилей. Создайте разметку любого текста и используя свойства, которые мы изучили в этом уроке, оформите текст.
  • Попробуйте скопировать примеры из этого урока.

  

  Остались вопросы? Задайте их в разделе «Обсуждение»

  Вам ответят команда поддержки Хекслета или другие студенты

  Похожие публикации:

  1. В чем состоят отличия процедурного и логического стилей программирования
  2. Возвращаемое значение пропущено scanf как исправить
  3. Как отключить рекламу в kindle paperwhite 2018
  4. Как создать интернет радио