Основы css и html: основы CSS — Основы CSS — HTML Academy

основы CSS — Основы CSS — HTML Academy

CSS-правила

CSS — это язык для оформления структурированных документов, например, HTML- документов. Синтаксис — это плоский список CSS-правил. CSS-правило состоит из селектора и перечня свойств и их значений:

селектор {
  свойство: значение;
  свойство: значение;
}

Для комментариев в CSS используются символы /* и */.

Селекторы

Селектор находится в начале CSS-правила, до фигурных скобок, и определяет, к каким HTML-элементам применятся свойства и значения из правила.

.feature-kitten {
  padding-top: 60px;
}

Простейшие (и самые популярные) селекторы — это селекторы по тегам и по классам. Селекторы по тегам содержат имя тега без символов < и > и применяются ко всем подходящим тегам. Селекторы по классам начинаются с точки, за которой идёт имя класса, и применяются ко всем тегам с подходящим атрибутом class.

h2 { color: red; }
. info { color: blue; }

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

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

Также можно комбинировать любые типы селекторов через пробел. Такие селекторы называются вложенными или контекстными и читаются справа налево. Например:

nav a {…}
  .menu ul {…}
  .post .title {…}

Свойства и значения

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

.feature-kitten {
  padding-top: 60px;
}

Каждый раз, когда мы добавляем новое свойство или изменяем его значение, мы меняем что-то на странице.

Наследование

Наследование в CSS — это механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам. Стили, присвоенные одному элементу, наследуются всеми потомками (вложенными элементами), но только в том случае, если они где-то явно не переопределены.

Составные свойства

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

font: 16px/26px "Arial", sans-serif;

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

Типы значений: абсолютные и относительные

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

font-size: 1cm;
font-size: 10mm;
font-size: 38px;

Относительные единицы измерения описывают значения, которые зависят от других значений. Например, ширина элемента в процентах зависит от ширины родительского элемента, а ширина элемента в em зависит от размера шрифта самого элемента. К относительным единицам относятся em, rem, vh, vw и некоторые другие, ну и, конечно же, проценты.

Стили по умолчанию

Некоторым элементам можно не задавать никаких стилей, но у них всё равно будет какое-то оформление. Например, у списка <ul> есть отступы и маркеры. Такие стили называются стилями по умолчанию и задаются внутри браузерных стилей изначально. Их можно переопределить или сбросить, задав другие значения свойств элементу.

Каскадирование

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

<p>Зелёный - мой любимый цвет</p>

Заданные стили:

.beloved-color { color: green; }

Браузерные стили:

margin: 1em 0;

Итоговые стили:

color: green;
margin: 1em 0;

Конфликт свойств

На один элемент могут действовать несколько CSS-правил. Если в этих правилах есть одинаковые свойства с разными значениями, то возникает конфликт. Например:

ul { list-style: disc; }
.blog-navigation ul { list-style: none; }

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

  1. Сравниваются приоритеты стилевых файлов, в которых находятся конфликтующие свойства. Например, авторские (то есть наши) стили приоритетнее браузерных.
  2. Сравнивается специфичность селекторов у CSS-правил с конфликтующими свойствами. Например, селектор по классу более специфичен, чем селектор по тегу.
  3. Побеждает то свойство, которое находится ниже в коде.

Каскад работает и внутри CSS-правил.

Встраивание и подключение внешних стилей

Внешние стили подключаются через тег <link>

<link rel="stylesheet" href="style.css">

Встраивание стилей в тег <style>. Его обычно размещают внутри <head>:

<head>
  <style>
    CSS-код
  </style>
</head>

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

Встраивание в атрибут style:

<div>&lt/div>

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

Обычно использование этого способа считается плохой практикой. Но иногда в виде исключения бывает удобнее воспользоваться встраиванием стилей в атрибут style, чем писать отдельные CSS-правила. Например, когда нужно управлять стилями именно из разметки, и создавать отдельные классы при этом будет излишне. Так бывает, когда какие-то стилевые параметры устанавливаются с помощью сторонних программ или другими людьми, например, через CMS.

Продолжить

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

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Видео может быть заблокировано из-за расширений браузера. В статье вы найдете решение этой проблемы.

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

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

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

Стили CSS

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

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

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

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

p {
  color: red;
  font-size: 20px;
}

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

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

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

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

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

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

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

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

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

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

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

site/
├── css/
│   ├── main.css
├── html/
│   ├── index.html

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

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
  </head>
  <body></body>
</html>

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

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
    <link rel="stylesheet" href="../css/main.css">
  </head>
  <body></body>
</html>

Дополнительно разберем эту запись: ../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 является использование стилей в специальном теге <style>. Для этого нет необходимости создавать отдельный файл и подключать его к HTML. В этом случае тег <style> обычно указывается внутри секции <head>. Хоть это и не обязательное правило, но желательно придерживаться именно такой структуры.

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

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

Inline-стили

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

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

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Основной файл index.html</title>
  </head>
  <body>
    <p>
      Параграф с размером шрифта 20 пикселей.  Текст написан красным цветом.
    </p>
  </body>
</html>

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

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

<h3>Как стать программистом</h3>
<!-- Тут много текста -->
<h3>Какими навыками обладает программист</h3>
<!-- Тут много текста -->

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

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

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

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

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

<h3>Как стать программистом</h3>
<!-- Тут много текста -->
<h3>Какими навыками обладает программист</h3>
<!-- Тут много текста -->
<div>Второго элемента с идентификатором help быть не должно</div>
<div>Второго элемента с идентификатором another-help быть не должно</div>

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

Селекторы

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Основной файл index. html</title>
    <link rel="stylesheet" href="../css/main.css">
  </head>
  <body>
    <main>
      <h2>Заголовок с идентификатором</h2>
      <p>Просто параграф без класса или идентификатора</p>
    </main>
  </body>
</html>

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

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

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

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

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

<section>
  <h3>Новости</h3>
  <article>
    <h3>Новость 1</h3>
    <p>Текст новости</p>
  </article>
  <article>
    <h3>Новость 2</h3>
    <p>Текст новости</p>
  </article>
</section>
<section>
  <h3>Интересные истории</h3>
  <article>
    <h3>История 1</h3>
    <p>Текст истории</p>
  </article>
  <article>
    <h3>История 2</h3>
    <p>Текст истории</p>
  </article>
</section>

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

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

.news article h3 {
  font-size: 32px;
}

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

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

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

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

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

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

<section>
  <h3>Новости</h3>
  <article>
    <h3>Новость 1</h3>
    <p>Текст новости</p>
  </article>
  <article>
    <h3>Новость 2</h3>
    <p>Текст новости</p>
    <section>
      <h3>Похожие новости</h3>
      <article>
        <h3>Похожая новость 1</h3>
        <p>Текст новости</p>
      </article>
    </section>
  </article>
</section>

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

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

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

.news > article > h3 {
  font-size: 24px;
}

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

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

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

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

Учебное пособие по 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.

Предыдущая страница
Печать страницы
Следующая страница

Основы HTML и CSS. Введение в веб-разработку… | Махендра Чоудхари

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

К концу этой статьи вы должны быть в состоянии:

  • Понимать концепции HTML и быть в состоянии создать небольшую HTML-страницу.
  • Понимать основные концепции CSS (селекторы и правила стиля) и уметь применять их на странице HTML.
  • Введение в основы веб-разработки

Научитесь понимать концепции HTML и сможете создать небольшую HTML-страницу.

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

Что такое HTML?

Язык гипертекстовой разметки. Это язык, который веб-браузеры читают для создания веб-страницы. Он действует как «чертеж» для отображения данных на экране пользователя. Это основной строительный блок сети. Каждая страница в Интернете — это всего лишь HTML по своей сути.

Что такое элементы HTML?

Элементы — это то, что мы используем, чтобы сообщить браузеру, как мы хотим отображать предоставленные данные.

Что такое тег?

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

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

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

Каковы основные элементы HTML?

Элементы, о которых мы узнали, это html , head , body , ‘p’, span , div и h2-h6

9014 элементы 9014.

В HTML доступны десятки элементов. Однако лишь немногие из них используются в 90% случаев. В этом уроке я расскажу только о наиболее часто используемых. Вы можете добиться практически всего, что захотите, используя самые основные элементы HTML и немного CSS (о чем мы поговорим позже). Однако важно отметить, что в веб-разработке существует идея, согласно которой ваши HTML-элементы должны соответствовать точной информации, которую вы пытаетесь отобразить. Это называется «семантически правильным», и этот метод использует все доступные элементы HTML. Это делается по ряду причин, включая доступность и SEO. Об этом методе мы не узнаем на уроке, но вы должны знать, что он существует.

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

Элемент «a» («якорь») позволяет нам создавать ссылки на другие веб-страницы (или даже на другие области на нашей собственной веб-странице). Вы всегда будете видеть элемент «a», используемый с href , чтобы указать браузеру, на какой адрес должна указывать ссылка.

Этот элемент будет отображать изображение на экране. Он всегда будет иметь атрибут «src», который указывает на адрес отображаемого изображения. ПРИМЕЧАНИЕ: теги img могут быть самозакрывающимися, так как им не нужны два тега. Просто поставьте / перед закрывающей скобкой в ​​первом теге:

Этот элемент представляет собой «неупорядоченный список». Это родительский элемент, который будет содержать элементы списка. Существует также упорядоченный список

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

    2. Компаньон для

      и

        . Эти элементы представляют элементы, которые должны отображаться в списке. Любые другие элементы могут появляться в ли .

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

        Научитесь понимать основные концепции CSS (селекторы и правила стиля) и сможете применять их на странице HTML.

        HTML великолепен, но HTML сам по себе прост и скучен. Так было на заре Интернета: веб-страницы были очень простыми, текстовыми сайтами. Затем появились CSS (каскадные таблицы стилей), которые позволили нам добавить цвета и стиля на наши веб-страницы! Это как разница между черно-белым и цветным телевизором.

        Прежде чем мы начнем, давайте подумаем об аналогии веб-страницы с домом. Чтобы построить дом, нам понадобится несколько вещей. Во-первых, нам нужно сырье. Тогда нам нужен план. Затем нам понадобятся краски и украшения. Наконец, нам нужно электричество и сантехника, чтобы все работало*. В этой аналогии наш HTML является нашим сырьем. У него такой большой потенциал, но он просто валяется кучей на земле. Нам нужен план и способ украсить его. Вот тут и приходит на помощь CSS.

        *электричество и водопровод представляют собой JavaScript, о котором мы узнаем позже.

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

        Прежде чем мы сможем добавить CSS на нашу веб-страницу, нам нужно сообщить браузеру, что то, что он читает, на самом деле является CSS. Мы можем сказать браузеру, что через элементы HTML, известные как стиль и , связываются элементы . Эти элементы будут находиться между тегами head , так как это не обязательно данные, которые нам нужны для отображения на экране.

        Есть два способа включить CSS в наш HTML.

        1. Мы можем написать наш CSS прямо между двумя стиль теги:

        2. Мы можем сделать ссылку на внешний файл CSS, используя элемент ссылки. Этот элемент будет включать два атрибута: rel и href. rel будет ссылаться на тип файла, на который мы ссылаемся: в данном случае «таблица стилей», а href будет указывать на расположение файла.

        Чтобы применить правила стиля к элементам HTML, мы должны знать, к каким элементам применять правила. Здесь на помощь приходят селекторы. Вы можете выбрать все элементы определенного типа: p , div , body и т. д. Или вы можете применить класс или id к каждому отдельному элементу. Мы применяем эти селекторы к самим тегам HTML в виде атрибута:

        Id s: — это заголовки, которые могут появляться только на одном элементе. Думайте об этом так же, как о номере вашего водительского удостоверения. ТОЛЬКО у вас есть этот номер.

        Класс es: , с другой стороны, может применяться к нескольким элементам. Думайте об этом как о классе. Обычно вы не единственный человек в классе, хотя может быть и так. Класс достаточно большой для многих людей.

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

        Теперь, когда у нас есть селекторы, нам нужно указать браузеру, что делать с этими селекторами. Внутри наших тегов стиля мы вставим правила. Классы всегда будут начинаться с . , а идентификаторы всегда будут начинаться с # . Элементы не будут начинаться ни с одного, а будут иметь только имя элемента. После имени селектора мы будем использовать фигурные скобки («{}»), чтобы сохранить наши правила для этого селектора.

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

        Теперь, когда у нас выбраны некоторые элементы HTML, мы можем начать добавлять стили. Существует МНОГО разных способов стилизовать объект. Вы можете контролировать, насколько оно большое или маленькое, какого оно цвета, где оно расположено на экране, или даже если оно видно или нет. Мы рассмотрим некоторые из наиболее распространенных свойств стилей и способы их использования.

        background или background-color

        Для фона можно задать различные правила. Наиболее распространенным будет установка фона на цвет или изображение. Оба показаны ниже. Если вы хотите быть более явным, вы можете использовать свойство background-color , чтобы установить только цвет фона.

        Цвет используется только для текста. Он установит цвет вашего текста.

        размер шрифта

        Мы не можем использовать ширину или высоту для текста, но мы можем определить размер используемого шрифта. Вы можете использовать здесь любые единицы размера, которые вы бы использовали со шрифтом в текстовом процессоре (px, em, in и т. д.). Px или пиксель является наиболее популярным.

        Мы можем рассматривать все элементы html как блоки. Состав каждого блока — это содержимое, отступы, границы и поля. Это известно как блочная модель.

        высота и ширина

        Мы можем точно сказать браузеру, какой ширины и высоты должен быть наш элемент (контент). Это используется в div s, img s и другие элементы, основанные на высоте (чтобы определить размер текста, нам нужно будет использовать другое свойство стиля). Значения размера могут быть разными, но наиболее распространенным является пиксель («px»).

        поле

        Поле — это невидимая область, окружающая элемент. Это крайняя область в том, что мы называем моделью коробки

        граница

        Граница установит границу вокруг вашего элемента.