Свой текстовый редактор: делаем красиво

Собственный текстовый редактор: делаем красиво

Самое простое и полезное введение в CSS.

В прошлый раз мы написали собственный текстовый редактор. Он уже работает, но выглядит пока не очень. Сегодня мы добавим красоты в проект и научимся оформлять любые страницы. Для этого мы будем использовать CSS.

Разбираемся с CSS

Чтобы страницы выглядели красиво, программисты используют CSS — Cascading Style Sheets, они же — каскадные таблицы стилей. Мы про них уже писали в статье про список задач, а сейчас будем разбираться подробнее, как они работают и что можно с их помощью сделать.

Главное, что нужно помнить о CSS, — это правила, по которым браузер «красит» страницу: какого цвета у него фон, какого — текст, какие заголовки и так далее. Правила живут отдельно от контента: в одном месте документа мы говорим «заголовки надо красить вот так», а в другом — «вот тут стоит заголовок, в нем написано то-то».

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

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

Весь код стилей на странице располагается между тегами <style> и </style>. Они говорят браузеру: тут у нас правила оформления. Сначала пишут название элемента, а потом в фигурных скобках — правила. Например, вот этот код отвечает за настройки внешнего вида всей страницы, потому что начинается со слова body. Он как бы говорит: «Всё тело страницы выровняй по центру, используй отступы по 10, шрифт „Вердана“ или „Ариал“ размером 16 пикселей»:

body {
  text-align: center;
  margin: 10;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}

А вот этот код определяет только абзацы текста, которые на странице размечены тегом <p>. Он говорит: «Всё, что на странице является абзацем, рисуй шрифтом 14-го размера».

p {
font-size: 14px;
}

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

margin-top: 15px; // — 15 пикселей 
margin-top: 15em; // — 15 размеров текущего шрифта
margin-top: 15vw; // — 15% от ширины страницы

Иногда стили вписывают не отдельно от основного кода страницы, а прямо внутри кода для конкретного элемента. Для этого используют команду style внутри тега. Например, так:

<div style=»height: 50%; width: 100%;”>

Это значит, что конкретно этот элемент <div> получит половинную высоту и полную ширину. Другие элементы на странице этот стиль не затронет.

Сразу скажем, что прописывать CSS внутри отдельных элементов считается дурным тоном, потому что потом такой код трудно поддерживать. Поэтому всеми силами старайтесь прописывать CSS либо в блоке <style>, либо в отдельном файле.

Фон и шрифт

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

<!DOCTYPE html>
<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Текстовый редактор</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
  <style type="text/css">
    /*задаём общие параметры для всей страницы: шрифт и отступы*/
    body {
      text-align: center;
      margin: 10;
      font-family: Verdana, Arial, sans-serif;
      font-size: 16px;
    }

    /*закончили со стилями*/
  </style>
  <!-- закрываем служебную часть страницы -->
</head>
<!-- началось содержимое страницы -->

<body>
  <!-- началась видимая часть -->
  <!-- заголовок страницы -->
  <h2>Текстовый редактор с автосохранением</h2>
  <!-- большой блок для ввода текста: высота в половину, а ширина — во весь экран, назвывается "text_area", обведено рамкой толщиной в 1 пиксель, выравнивание текста — по левому краю -->
  <div id="editor" contenteditable="true"
    style="height: 50%; width: 100%; border: solid; border-width: 1px; text-align: left">
  </div>
  <!-- закончилась видимая часть -->
  <!-- пишем скрипт, который будет постоянно сохранять наш текст -->
  <script>
    // если в нашем хранилище уже что-то есть…
    if (localStorage.getItem('text_in_editor') !== null) {
      // …то отображаем его содержимое в нашем редакторе
      document.getElementById('editor').innerHTML = localStorage.getItem('text_in_editor');
    }
    // отслеживаем каждое нажатие клавиши и при каждом нажатии выполняем команду
    document.addEventListener('keydown', function (e) {
      // записываем содержимое нашего редактора в хранилище
      localStorage.setItem('text_in_editor', document.getElementById('editor').innerHTML);
    });
 // закончился скрипт
  </script>
  <!-- закончилось содержимое страницы -->
</body>
<!-- конец всего HTML-документа -->

</html>

По умолчанию все стили мы применяем в разделе <style>:

Посмотрим, что у нас уже есть в разделе body:

body {
  /* текст на странице выравнивается по центру */
  text-align: center;
  /* внешние отступы у каждого элемента — 10 пикселей */
  margin: 10;
  /* везде используем шрифт Verdana, если его нет — то Arial */
  font-family: Verdana, Arial, sans-serif;
  /* размер шрифта для страницы — 16 пикселей */
  font-size: 16px;
}

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

Для начала поменяем цвет фона и добавим в этот раздел такую строку:

background-color: lightgray;

Это значит, что фоновый цвет для всей страницы теперь светло-серый. Точно такого же эффекта можно добиться, если написать шестнадцатеричный код этого цвета:

background-color: #d3d3d3;

Генераторов шестнадцатеричных кодов цвета полно в интернете. Например, на W3Schools

Теперь сделаем выравнивание по левому краю во всём документе:

text-align: left;

Теперь поменяем шрифт, которым будем писать текст в редакторе. Заменим Verdana на Courier New, сделаем его побольше и напишем такое:

font-family: Courier New, Courier;
font-size: 20px;

Добавим эти команды в раздел <body> в наших стилях и обновим страницу. Поменяется фон и шрифт — как мы и хотели:

Настраиваем редактор

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

<div id=»editor» contenteditable=»true» style=»height: 50%; width: 100%; border: solid; border-width: 1px; text-align: left;»>  </div>

В прошлый раз мы сделали так, чтобы было быстрее, но сегодня исправим это — вынесем стили наверх, в свой раздел. Для этого блоку добавим новый класс, а сам класс опишем в разделе <style>:

/* оформляем окно редактора */
.editorSheet {
  height: 50%;
  width: 100%;
  border: solid;
  border-width: 1px;
  text-align: left;
}

При этом описание самого блока станет таким:

<div id=»editor» contenteditable=»true» class=»editorSheet»> </div>

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

background-color: white;

Теперь сделаем так, чтобы слева и справа у нас всегда было свободное пространство, а само окно редактора было похоже на лист А4. Для этого уберём свойства height: 50% и width: 100%, а вместо них напишем такое:

width: 80vw;
min-height: 100vw;
margin-left: 10vw;

10vw означает, что слева от страницы всегда будет 10 процентов свободного места, если считать от общей ширины страницы.

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

-webkit-box-shadow: 6px 10px 9px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 6px 10px 9px 0px rgba(0,0,0,0.75);
box-shadow: 6px 10px 9px 0px rgba(0,0,0,0.75);

Такое свойство можно сгенерировать на сайте cssmatic.com или в любом другом генераторе CSS-эффектов. Обычно в них можно настроить любые параметры тени, а потом скопировать получившийся код в свою страницу.

Такое сложное описание для тени сделано потому, что разные браузеры делают её по-разному. Поэтому, чтобы наша тень везде выглядела одинаково, мы использовали 3 разные команды.

Следующим шагом уберём чёрную рамку, сделав её нулевой толщины:

border-width: 0px;

Осталось отодвинуть текст от самых границ поля. За это будет отвечать отдельная команда, которая говорит: всё, что внутри поля, отодвигается от границ на 15 пикселей:

padding: 15px;

Сохраняем, обновляем:

Меняем дизайн заголовка

Заголовок у нас прописан тегом <h2>. Меняем его на h1 и в раздел <style> добавляем такой же:

h1{ }

Всё, что будет написано между этими скобками, будет относиться ко всем заголовкам <h1>, но так как он у нас один на странице — всё в порядке.

Давайте сделаем заголовок гораздо больше, жирным шрифтом, не таким, как остальной текст, и поменяем шрифт:

h1 {
  font-size: 40px;
  font-family: Tahoma;
  font-weight: 900;
}

Результат:

<!DOCTYPE html>
<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Текстовый редактор</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->
  <style type="text/css">
    /*задаём общие параметры для всей страницы: шрифт и отступы*/
    body {
      text-align: left;
      margin: 10;
      font-family: Courier New, Courier;
      font-size: 20px;
      background-color: lightgray;
    }

    /* оформляем окно редактора */
    .editorSheet {
      width: 80vw;
      min-height: 100vw;
      margin-left: 10vw;
      border: solid;
      border-width: 0px;
      text-align: left;
      background-color: white;
      -webkit-box-shadow: 6px 10px 9px 0px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 6px 10px 9px 0px rgba(0, 0, 0, 0.75);
      box-shadow: 6px 10px 9px 0px rgba(0, 0, 0, 0.75);
      padding: 15px;
    }

    h1 {
      font-size: 40px;
      font-family: Tahoma;
      font-weight: 900;
    }

    /*закончили со стилями*/
  </style>
  <!-- закрываем служебную часть страницы -->
</head>
<!-- началось содержимое страницы -->

<body>
  <!-- началась видимая часть -->
  <!-- заголовок страницы -->
  <h1>Текстовый редактор с автосохранением</h1>
  <!-- большой блок для ввода текста: высота в половину, а ширина — во весь экран, назвывается "text_area", обведено рамкой толщиной в 1 пиксель, выравнивание текста — по левому краю -->
  <div id="editor" contenteditable="true" class="editorSheet">
  </div>
  <!-- закончилась видимая часть -->
  <!-- пишем скрипт, который будет постоянно сохранять наш текст -->
  <script>
    // если в нашем хранилище уже что-то есть…
    if (localStorage.getItem('text_in_editor') !== null) {
      // …то отображаем его содержимое в нашем редакторе
      document.getElementById('editor').innerHTML = localStorage.getItem('text_in_editor');
    }
    // отслеживаем каждое нажатие клавиши и при каждом нажатии выполняем команду
    document.addEventListener('keydown', function (e) {
      // записываем содержимое нашего редактора в хранилище
      localStorage.setItem('text_in_editor', document.getElementById('editor').innerHTML);
    });
 // закончился скрипт
  </script>
  <!-- закончилось содержимое страницы -->
</body>
<!-- конец всего HTML-документа -->

</html>

Что дальше

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

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

А ещё можно поставить на фон красивую картинку и настроить дизайн в соответствии со своими представлениями о прекрасном. Чтобы поставить картинку на фон, поищите в интернете css background-image, css background-repeat и css background-position — эти три команды говорят браузеру, что ставить на фон и как позиционировать картинку.

Веб-разработка — это новый черный
А мы знаем толк в моде и поможем освоить новую специальность за полгода.
Посмотреть
Фронтенд — это новый черный
medium