Самоучитель html и css: Самоучитель CSS | htmlbook.ru — Вебджем.рф

Содержание

Селекторы тегов | 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 (англ. HyperText Markup Language) – расшифровывается как «язык гипертекстовой разметки», который является наиболее часто используемым языком.

HTML был создан Тимом Бернерс-Ли в конце 1991 года, но первой стандартной спецификацией HTML стала «HTML 2.0», которая была опубликована в 1995 году. Основной версией HTML была 4.01, и она была опубликована в конце 1999 года. Хоть версия HTML 4.01 широко распространена, но в настоящее время существует версия HTML 5, которая является расширением HTML 4.01 и была опубликована в 2012 году.

Зачем изучать HTML?

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

HTML НЕОБХОДИМО для студентов и работающих профессионалов, чтобы стать отличным инженером-программистом, особенно когда они работают в области веб-разработки. Я перечислю некоторые ключевые преимущества изучения HTML:

Создание веб-сайта. Вы можете создать веб-сайт или настроить существующий веб-шаблон, если хорошо знаете HTML.
Станьте веб-дизайнером. Если вы хотите начать карьеру профессионального веб-дизайнера, проектирование HTML и CSS является обязательным навыком.
Понимание Интернета. Если вы хотите оптимизировать свой веб-сайт, повысить его скорость и производительность, полезно знать HTML для достижения наилучших результатов.
Изучайте другие языки. Как только вы поймете основы HTML, вам станет легче понять другие связанные технологии, такие как Javascript, PHP или Angular.

Привет, мир с помощью HTML

Просто чтобы получить немного понимания HTML, покажу небольшой обычной HTML-код Hello World. Вы можете попробовать его.

<!DOCTYPE html>
<html>
   <head>
      <title>Заголовок документа</title>
   </head>
   <body>
      <h2>Заголовок</h2>
      <p>Привет мир!</p>
   </body>
</html>

Преимущества HTML

Как упоминалось ранее, HTML является одним из наиболее широко используемых языков в Интернете. Я собираюсь перечислить некоторые из них здесь:

Разработка веб-страниц. HTML используется для создания страниц, которые отображаются в Интернете. Почти на каждой веб-странице есть html-теги для отображения деталей в браузере.

Интернет-навигация. HTML предоставляет теги, которые используются для перехода с одной страницы на другую и широко используются в интернет-навигации.
Отзывчивый пользовательский интерфейс. HTML-страницы в настоящее время хорошо работают на всех платформах, мобильных устройствах, вкладках, настольных компьютерах или ноутбуках благодаря стратегии адаптивного дизайна.
Автономная поддержка. HTML-страницы после загрузки могут быть доступны в автономном режиме на машине без необходимости подключения к Интернету.
Разработка игр. HTML5 имеет встроенную поддержку для богатого опыта и теперь также полезен в области разработки игр.

Аудитория

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

Предпосылки

Прежде чем приступать к изучению самоучителя по HTML, Вы должны обладать базовыми знаниями для работы с операционной системой Windows или Linux, кроме того, Вы должны:

иметь опыт работы с любым текстовым редактором, таким как блокнот, notepad++ и другие;
уметь создать каталоги (папки) и файлы на своем компьютере;
уметь перемещаться по различным каталогам;
уметь записывать содержимое в файл и сохранять его на компьютере;
иметь понимание изображений в разных форматах, таких как JPEG, JPG и PNG.

Источник: HTML Tutorial.

Интернет — это сложно | Учебники по веб-разработке для начинающих

(но это не обязательно)

Дружественный Интернет учебные пособия по разработке для полных новичков

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, по-прежнему демонстрируя концепции с конкретными сценариями.

Это означает, что вы вряд ли прочитаете больше одного-двух абзацев без написать код и посмотреть, что он делает (так что вам никогда не будет скучно). В Кроме того, вы получите массу практики работы в текстовом редакторе и проверка кода в браузере, как это делают настоящие веб-разработчики.

Это 100% бесплатно

Никто не должен платить, чтобы начать учиться программированию, особенно если они не уверены, действительно ли они хотят стать сетью разработчик. Наша миссия — сделать веб-разработку доступной как можно большему количеству людей, насколько это возможно. Вот почему мы предлагаем весь наш HTML и CSS учебник бесплатно. Получить к нему!

Начните учиться прямо сейчас

Бесплатный курс — полное руководство по HTML и CSS

1 час 57 мин
Начальный уровень

входит в состав нашего пакета полного доступа.

HTML и CSS являются двумя основными столпами Интернета — они обеспечивают внешний интерфейс всех веб-сайтов, которые вы используете и любите. Изучая HTML и CSS, вы можете легко освоить самые востребованные инструменты веб-разработки, что позволит вам войти в отрасль в качестве разработчика полного стека или создавать интерфейсные веб-страницы в качестве хобби. Вы также сможете быстрее и эффективнее выполнять задачи в обычном программном обеспечении для маркетинга и контента, включая WordPress, MailChimp и Zendesk.

Благодаря HTML и CSS весь мир Интернета у вас под рукой!

С помощью этого бесплатного руководства вы изучите HTML и CSS, всесторонне изучив особенности каждого из них, включая изображения, ссылки, формы, таблицы, размеры, позиционирование, поля и многое другое. Навыки, которые вы приобретете, могут быть легко адаптированы и к вашим собственным проектам, что настроит вас на успех в качестве веб-разработчика и позволит вам создавать все виды веб-страниц!

Узнайте, как:

Настройка текстового редактора для создания веб-страниц
Использование тегов HTML для добавления ссылок и изображений
Создание форм для ввода данных пользователем
Добавление списков и таблиц
Стиль страниц с помощью CSS
Работа с отступами и полями

… и более!

ВАШИ КУРСЫ, ВАШ ПУТЬ

Учитесь с помощью курсов, основанных на проектах, которые разработаны с учетом гибкости — доступ к ним 24 часа в сутки, 7 дней в неделю, подстраивайте их под свой график и выбирайте учебные материалы, которые вам больше всего подходят.

Вы даже можете загружать видеокурсы и смотреть их в автономном режиме с помощью приложения Zenva , доступного для iOS и Android.

✅ Watch video lessons

✅ Read text summaries

✅ Explore interactive lessons

✅ Practice with source code

✅ Build real projects

✅ Earn completion certificates

ДОСТИГАЙТЕ РЕАЛЬНЫХ РЕЗУЛЬТАТОВ

Наше сообщество, состоящее из более чем 1 000 000 учащихся и разработчиков, использовало навыки, полученные вместе с нами, для публикации своих собственных игр и веб-сайтов, получения работы своей мечты и даже открытия собственного бизнеса — и у вас есть потенциал сделать то же самое !

Посмотрите, что думают наши ученики ниже:

⭐⭐⭐⭐⭐

МИХИР ПАТЕЛЬ

продвинутый материал позже в будущем.