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

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

Самое про­стое и полез­ное вве­де­ние в 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, а потом открыть этот файл в бра­у­зе­ре.

Осно­ва кода

    
language: 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;
}

Резуль­тат:


Гото­вый код

    
language: 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 — эти три коман­ды гово­рят бра­у­зе­ру, что ста­вить на фон и как пози­ци­о­ни­ро­вать кар­тин­ку.


Ещё по теме