Селекторы тегов | 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, css, javascript и php
Сеть Интернет уже давно стала для нас чем-то необходимым, каждодневным и универсальным. В сети каждый находит для себя что-то нужное, интересное или даже необходимое. Обилие Интернет сайтов, сервисов социальных сетей, форумов и многих других, полезных и не очень, ресурсов просто поражает. В сети можно найти все: от списка ресторанов и кинотеатров, куда бы вы хотели пойти, до подробного описания принципа работы адронного коллайдера, с подробными примерами и чертежами по его созданию.
Но как это работает, что нужно сделать, чтобы построить свой собственный сайт?
Если Вас интересуют именно эти вопросы — Вы зашли по адресу. Сайт www.puzzleweb.ru — это универсальный самоучитель и справочник по
Как пользоваться сайтом?
Для удобства восприятия и изучения материала сайт разделен на четыре основных раздела, в каждом из которых вы найдете всю необходимую информацию по интересующей вас теме:
HTMLСамоучитель HTML — это подробное руководство по языку разметки HTML, включая все обновления и дополнения к языку в версии HTML 5. Полезно знать, что на каком бы языке программирования ни был бы написан сайт, для браузера пользователя его структура всегда подается в виде HTML. Справочник html также поможет вам свободно ориентироваться в данном языке. |
CSSСамоучитель CSS, а также удобный справочник CSS, откроют перед вами практически безграничные возможности по оформлению интернет сайта. Перед вами предстанет интереснейший мир разнообразия форм и цветов, какими может обладать ваш сайт. |
JavaScriptСамоучитель JavaScript — это удобнейшее онлайн пособие для начинающего программиста, после изучения которого вы научитесь создавать интерактивные интернет сайты. |
PHPЕсли вы хотите научиться создавать динамические веб-сайты, уже знакомы с основами разметки HTML, но не представляете себе, как использовать для этих целей язык программирования PHP, то наш раздел по PHP станет вашим незаменимым помощником. |
Для кого создан сайт www.puzzleweb.ru?
Сайт будет полезен не только для начинающих WEB-программистов, но и для тех, кто уже умеет создавать сайты и приложения. Благодаря наличию на нашем ресурсе удобных справочников по CSS и HTML, вы всегда сможете быстро определить значение интересующего вас тега или свойства, не теряя времени на поиски информации в книгах или в Интернете. На страницах наших самоучителей вы найдете множество практических примеров исходного кода страниц, скриптов, которые вы с легкостью сможете применить для создания собственного проекта.
Учебное пособие по 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 — CSS имеет гораздо более широкий набор атрибутов, чем HTML, поэтому вы можете придать HTML-странице гораздо лучший вид по сравнению с HTML-атрибутами.
Совместимость с несколькими устройствами — Таблицы стилей позволяют оптимизировать содержимое для более чем одного типа устройств. Используя один и тот же HTML-документ, разные версии веб-сайта могут быть представлены для портативных устройств, таких как КПК и сотовые телефоны, или для печати.
Глобальные веб-стандарты — Теперь атрибуты HTML устарели, и рекомендуется использовать CSS. Поэтому было бы неплохо начать использовать CSS во всех HTML-страницах, чтобы сделать их совместимыми с будущими браузерами.
Аудитория
Этот учебник CSS поможет как студентам, так и профессионалам, которые хотят сделать свои веб-сайты или личные блоги более привлекательными.
Предпосылки
Вы должны быть знакомы с:
- Базовая обработка текста в любом текстовом редакторе.
- Как создавать каталоги и файлы.
- Как перемещаться по разным каталогам.
- Работа в Интернете с использованием популярных браузеров, таких как Internet Explorer или Firefox.
- Разработка простых веб-страниц с использованием HTML или XHTML.
Если вы новичок в HTML и XHTML, то мы рекомендуем вам сначала пройти наше руководство по HTML или XHTML.
Предыдущая страница Печать страницы Следующая страница
Учебное пособие по CSS — javatpoint
следующий → Учебное пособие по CSS Учебное пособие по или CSS 3 содержит базовые и расширенные концепции технологии CSS. Наш учебник по CSS разработан для начинающих и профессионалов. Основные моменты CSS приведены ниже:
Пример CSS с редактором CSS В этом руководстве вы получите множество примеров CSS, вы можете редактировать и запускать эти примеры с помощью нашего онлайн-инструмента для редактирования CSS. <голова> <стиль> h2{ белый цвет; цвет фона: красный; отступ: 5px; } п{ цвет синий; } стиль> голова> <тело> Напишите свой первый пример CSSЭто абзац. тело>Выход: Напишите свой первый пример CSSЭто абзац. Индекс CSSУчебное пособие по CSS
Свойства CSS
Усовершенствованный CSS
Дизайн CSS
Вопросы для интервью
Учебное пособие по CSS 3 В этом уроке мы изучим свойства CSS 3 для разработки блочной модели, применения непрозрачности, радиуса и т. |