Основы HTML и CSS

Как вы, надеемся, узнали ранее, HTML является языком разметки, который размечает, как располагается все содержимое веб-страницы, которое вы видите в браузере. Весь текст на этой странице сейчас находится внутри HTML-тегов, которые говорят вашему браузеру, как он (текст) должен быть расположен. Давайте, кликните правой кнопкой на любой элемент на странице и выберите "Проверить объект" (или похожую опцию), чтобы открыть инструменты разработчика, встроенные в ваш браузер, и вы увидите структуру страницы.

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

Пункты для размышления

Постарайтесь ответить на предложенные вопросы. После выполнения задания попробуйте ответить на них ещё раз

  • Почему мы отделяем HTML от CSS?
  • Что такое классы и ID (и в чем их различие?)
  • Что такое элементы?
  • Что такое теги?
  • Что такое атрибуты?
  • Что такое формы?
  • Что такое div?
  • Что такое селекторы?
  • Что такое свойства?
  • Что такое значения?
  • Что такое "строка запроса" в URL и что она делает?
  • В чем разница между "пикселями" и "em"?
  • Как наследуются CSS-стили для конкретного элемента? То есть, как элемент получает свои "стандартные" стили?
  • Какие два CSS-атрибута вы можете изменить, чтобы сдвинуть элемент на странице?
  • Назовите три разных способа включить CSS в ваш проект или использовать CSS для стилизации конкретного элемента
  • Что такое "стандартные стили" или "разметка user agent"?
  • Зачем использовать файл сброса CSS-стилей?

Задания:

  1. Пройдите курс Codecademy по HTML/CSS, чтобы получить фундаментальное понимание HTML и CSS. Возможно, вам будет полезно использовать карточки для запоминания наиболее часто используемых элементов.
  2. Чтобы заполнить пробелы, прочтите руководство по HTML для начинающего от HTML Dog и руководство по CSS для начинающего от него же и HTML Dog intermediate CSS tutorial. Они должны даться вам довольно легко, поскольку вы уже видели многое из них ранее, но так же найдете и новую информацию.
  3. Создайте логотип Android, используя только HTML и CSS, подсматривая в это видео с отличного сайта The Code Player, который похож на туториал, но на самом деле выполняет код по мере того, как автор вводит его. Используйте свой текстовый редактор, JSFiddle или CodePen для создания лого.
    • Замечание: Вы увидите, что border-radius, -moz-border-radius и -webkit-border-radius используются одинаково. Это сделано специально, чтобы все выглядело одинаково во всех браузерах. Вам, скорее всего, нужно будет использовать только border-radius, чтобы получить желаемый эффект.
  4. Узнайте о простых формах из этого видео от Treehouse и используйте эту страницу w3 в качестве справочника.
  5. Опционально: Узнайте о стандартных стилях вашего браузера и ресет-файлах CSS в этом видео(ресеты начинаются на отметке 2:00). Именно из-за стандартных стилей вы иногда можете видеть в браузере пробелы там, где вы их не ставили или стили, которых вы не писали. Разработчики практически всегда используют CSS-ресеты, чтобы избавиться от стандартных стилей и писать внешний вид с нуля. Если вам все еще любопытно, вот длинное видео про ресеты...

Дополнительные ресурсы

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

Поделиться уроком: