Селекторы тегов | htmlbook.ru
В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т. д. Правила задаются в следующем виде.
Тег { свойство1: значение; свойство2: значение; … }
Вначале указывается имя тега, оформление которого будет переопределено, заглавными или строчными символами не имеет значения. Внутри фигурных скобок пишется стилевое свойство, а после двоеточия — его значение. Набор свойств разделяется между собой точкой с запятой и может располагаться как в одну строку, так и в несколько (пример 7.1).
Пример 7.1. Изменение стиля тега абзаца
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Селекторы тегов</title> <style> P { text-align: justify; /* Выравнивание по ширине */ color: green; /* Зеленый цвет текста */ } </style> </head> <body> <p>Более эффективным способом ловли льва в пустыне является метод золотого сечения.При его использовании пустыня делится на две неравные части, размер которых подчиняется правилу золотого сечения.</p> </body> </html>
В данном примере изменяется цвет и выравнивание текста абзаца. Стиль будет применяться только к тексту, который располагается внутри контейнера <p>.
Следует понимать, что хотя стиль можно применить к любому тегу, результат будет заметен только для тегов, которые непосредственно отображаются в контейнере <body>.
Вопросы для проверки
1. В какой строке содержится ошибка?
- h2 { margin-left: 20px; }
- p { margin-left: 20px; padding-left: 20px; }
- h3 { margin-right: 20px; }
- head { color: #rob; }
- body { font-size: 11pt; color: #aaa; }
2. Таня для фона веб-страницы и цвета текста выбрала цвета #ffe9f2 и #6e143b и в стилях использовала следующий код, однако нужные цвета не проявились. В чем причина?
body {
background-color: #ffe9f2
color: #6e143b
}
- body написан строчными буквами.
- Свойство background-color неверное, следует писать background.
- Значения цветов указаны неправильно.
- В качестве селектора применять body некорректно.
- Не хватает точки с запятой.
3. Какая строка написана правильно?
- <P> { color: #333; }
- P { color: #333; }
- P: { color: #333;}
- P { color: 333; }
- P { color: #3333; }
4. К какому селектору следует применить свойство margin, чтобы изменить отступы на веб-странице?
- !DOCTYPE
- A
- HEAD
- TITLE
- BODY
5. Как добавить фоновый цвет ко всем элементам <h2>?
- h2 { background-color: white }
- h2.all { background-color: white }
- h2:all { background-color: white }
- h2[all] { background-color: white }
- h2#all { background-color: white }
Ответы
1. head { color: #rob; }
2. Не хватает точки с запятой.
3. P { color: #333; }
4. BODY
5. h2 { background-color: white }
селекторы
Статьи по теме
- Селекторы тегов
Изучение HTML: руководства и уроки — Изучение веб-разработки
Чтобы создавать веб-сайты, вы должны знать о HTML — фундаментальной технологии, которая используется для определения структуры веб-страницы. HTML применяется для того, чтобы определить как должен отображаться ваш контент: в виде абзаца, списка, заголовка, ссылки, изображения, мультимедийного проигрывателя, формы или же в виде одного из множества других доступных элементов, а также возможного нового элемента, который вы сами создадите.
В идеале вы должны начать своё учебное путешествие с изучения HTML. Начните с прочтения раздела «Введение в HTML». Затем вы можете перейти к изучению более продвинутых тем, таких как:
- «CSS (Каскадные таблицы стилей)», и как их использовать для оформления (стилизации) HTML-документа (например, изменение шрифта и его размера, добавление границы и теней для элементов, разбиение страницы на несколько столбцов, добавление анимации и других визуальных эффектов).
- «JavaScript», и как его использовать для придания динамической функциональности веб-страницам (например, определение вашего местоположения и отображение его на карте, создание элементов, которые будут появляться/исчезать при нажатии на кнопку, сохранение данных пользователей локально на их компьютерах и многое другое).
Прежде чем приступить к этой теме, вы должны иметь хотя бы базовое представление об использовании компьютеров вообще и уметь «пассивно» использовать Интернет (т.е. уметь просматривать веб-страницы, быть потребителем контента). У вас должна быть базовая рабочая среда, описанная в разделе «Установка базового программного обеспечения», а также вы должны понимать, как создавать файлы и управлять ими, что подробно описано в разделе «Работа с файлами» — обе статьи являются частью нашего модуля для новичков — «Начало работы с вебом».
Перед тем, как начать эту тему, рекомендуется пройтись по разделу «Начало работы с вебом», однако это необязательно; многое из того, что описано в статье «Основы HTML», также рассматривается и во «Введении в HTML», причём даже более подробно.
Данный раздел содержит модули, которые расположены в порядке, наиболее оптимальном для их изучения. Вам определённо следует начать с первого модуля.
- Введение в HTML
Этот модуль даёт основу, которая позволит вам использовать важные понятия и синтаксис, вы рассмотрите применение HTML к тексту, узнаете как создать гиперссылки и как использовать HTML для структурирования веб-страницы.
- Мультимедиа и встраивание
В этом модуле рассматривается использование HTML для подключения мультимедиа-контента к вашим веб-страницам, включая различные способы встраивания изображений, видео и аудио и даже других веб-страниц.
- HTML Таблицы
Представление табличных данных на веб-странице в понятном, доступном образе, может стать проблемой. Этот модуль описывает основы табличной разметки, а также более сложные функции, такие как реализация подписок и резюме.
- HTML Формы
Формы — очень важная часть интернета, они обеспечивают большую часть функциональных возможностей, необходимых для взаимодействия с веб-сайтом, например, регистрация и вход в систему, отправка отзывов, покупка продуктов и многое другое.
Использование HTML для решения общих задач содержит ссылки на разделы контента, объясняющего, как использовать HTML для решения очень распространённых проблем при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение содержимого, создание базовой формы и т.д.
- HTML (HyperText Markup Language) на MDN.
Отправная точка HTML документации на MDN, там вы сможете найти как подробное описание основных элементов и их атрибутов, так и более продвинутые уроки по языку, это отличное место для старта.
Last modified: , by MDN contributors
Учебное пособие по CSS
CSS используется для простого и удобного управления стилем веб-документа.
CSS — это аббревиатура от «Каскадная таблица стилей» . Этот учебник охватывает обе версии CSS1, CSS2 и CSS3 и дает полное представление о CSS, начиная с его основ и заканчивая расширенными концепциями.
Зачем изучать CSS?
Каскадные таблицы стилей , ласково называемые CSS , представляют собой простой язык дизайна, предназначенный для упрощения процесса создания презентабельных веб-страниц.
CSS НЕОБХОДИМО для студентов и работающих профессионалов, чтобы стать отличным инженером-программистом, особенно когда они работают в области веб-разработки. Я перечислю некоторые из ключевых преимуществ изучения CSS:
Создание потрясающего веб-сайта — CSS обрабатывает внешний вид веб-страницы. Используя CSS, вы можете управлять цветом текста, стилем шрифтов, расстоянием между абзацами, размерами и расположением столбцов, используемыми фоновыми изображениями или цветами, дизайном макета, вариантами отображения для разных устройств и размеров экрана. а также множество других эффектов.
Стать веб-дизайнером — Если вы хотите начать карьеру профессионального веб-дизайнера, проектирование HTML и CSS является обязательным навыком.
Веб-управление — CSS прост в освоении и понимании, но обеспечивает мощный контроль над представлением HTML-документа. Чаще всего CSS сочетается с языками разметки HTML или XHTML.
Изучайте другие языки — Как только вы поймете основы HTML и CSS, вам станет легче понять другие связанные технологии, такие как javascript, php или angular.
Hello World с помощью CSS.
Просто чтобы дать вам немного удовольствия от CSS, я собираюсь дать вам небольшую обычную программу CSS Hello World. Вы можете попробовать ее, используя демо-ссылку.
Живая демонстрация
<голова>Это название документа <стиль> ч2 { цвет: #36CFFF; } <тело>Привет, мир!
Применение CSS
Как упоминалось ранее, CSS является одним из наиболее широко используемых языков стилей в Интернете.
Я собираюсь перечислить некоторые из них здесь:CSS экономит время — Вы можете написать CSS один раз, а затем повторно использовать один и тот же лист на нескольких HTML-страницах. Вы можете определить стиль для каждого элемента HTML и применить его к любому количеству веб-страниц.
Страницы загружаются быстрее — Если вы используете CSS, вам не нужно каждый раз прописывать атрибуты тегов HTML. Просто напишите одно правило CSS для тега и примените его ко всем вхождениям этого тега. Таким образом, меньше кода означает более быстрое время загрузки.
Простое обслуживание — Чтобы внести глобальное изменение, просто измените стиль, и все элементы на всех веб-страницах будут обновлены автоматически.
Улучшенные стили по сравнению с HTML
Совместимость с несколькими устройствами — Таблицы стилей позволяют оптимизировать содержимое для более чем одного типа устройств. Используя один и тот же HTML-документ, разные версии веб-сайта могут быть представлены для портативных устройств, таких как КПК и сотовые телефоны, или для печати.
Глобальные веб-стандарты — Теперь атрибуты HTML устарели, и рекомендуется использовать CSS. Поэтому было бы неплохо начать использовать CSS во всех HTML-страницах, чтобы сделать их совместимыми с будущими браузерами.
Аудитория
Этот учебник CSS поможет как студентам, так и профессионалам, которые хотят сделать свои веб-сайты или личные блоги более привлекательными.
Предпосылки
Вы должны быть знакомы с:
- Базовая обработка текста в любом текстовом редакторе.
- Как создавать каталоги и файлы.
- Как перемещаться по разным каталогам.
- Работа в Интернете с использованием популярных браузеров, таких как Internet Explorer или Firefox.
- Разработка простых веб-страниц с использованием HTML или XHTML.
Если вы новичок в HTML и XHTML, то мы рекомендуем вам сначала пройти наше руководство по HTML или XHTML.
Предыдущая страница Печать страницы Следующая страница
Интернет — это сложно | Учебники по веб-разработке для начинающих
(но это не обязательно)
Дружественный Интернет учебные пособия по разработке для полных новичков
HTML и CSS
(Начните здесь)
Обучение программированию не должно быть тяжело. Мы делаем это проще, составляя комплексный набор учебных пособий по веб-разработке, которые помогут превратить начинающих в Талантливые интернет-специалисты. У нас есть учебная программа, все, что вам нужно это мотивация начать читать.
Полная учебная программа
Наше руководство по HTML и CSS является единственным введением в веб-разработку. что вам когда-нибудь понадобится. Более дюжины глав охватывают все аспекты создания качественного веб-страница, тысячи примеров кода объясняют каждый элемент HTML и CSS имущество, а слова, достойные учебника, обеспечивают важные реальные контекст вокруг того, когда и почему вы хотите использовать каждый из них.
Изучайте HTML и CSS бесплатно
Красивые диаграммы
Наш учебник содержит 250 диаграмм, представляющих сложный HTML и концепции CSS простыми и наглядными способами. Возьмем, к примеру, нашу главу «Селекторы CSS». Вместо того, чтобы создавать собственную ментальную модель того, как селекторы CSS подключаются к HTML-элементы, вы можете визуализировать их так же, как и мы:
Мы думаем, что красота имеет значение, и наша страсть к красивым вещам пронизывает в примеры проектов, над которыми вы будете работать. Если вы хотите построить красивые веб-сайты, вам нужно учиться у людей, которые заботятся о дизайне. Мы уделяла столько же внимания цветам, типографике, макету и иллюстрациям в наших примерах, как мы делали с HTML и CSS, которым мы пытаемся научить ты.
Современные методы
- Flexbox
- Адаптивный дизайн
- Адаптивные изображения
- Семантический HTML
- Веб-типографика
Наше руководство по HTML и CSS охватывает современные методы, которые в настоящее время считается передовым опытом среди профессиональных веб-разработчиков.
Независимо от того, являетесь ли вы полным новичком или штатным веб-разработчиком, который только хочет освежить в памяти состояние отрасли, эти главы предназначены для ты.
Практические примеры
Лучший способ изучить flexbox — использовать его для перемещения нескольких ящиков. около. Итак, это именно то, что мы будем делать в главе о Flexbox, как вы можете видеть ниже. Однако это относится не только к макетам — весь учебник следует эта практическая философия, от базовых веб-страниц до веб-типографики.
Ваш браузер не поддерживает HTML-видеоМы тщательно разработали наши примеры проектов, чтобы помочь вам через новый аспект HTML и CSS, по-прежнему демонстрируя концепции с конкретными сценариями.