WEB start

Компьютеры. Интернет. Заочное профессиональное обучение. 055-966-10-17

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения
  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Защита информации.
  • Интернет. Планирование, создание WEB-сайтов. Дизайн, программирование. CEO, продвижение сайтов в интернет.
  • Основы современных IT - технологий.

Наши преимущества

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


Курсы WEB

Закончив наш курс, вы научитесь самостоятельно строить коммерческие интернет сайты любой сложности, управлять их размещением на WEB - хостинге, оптимизировать их и "продвигать" в Интернете.

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

hit 
counter

Узнать подробнее


Введите текст с картинки

Регистрация на сайте

CSS - работа со шрифтами

Для внешнего вида WEB - сайта большое значение имеет то, как и какие шрифты (fonts) Вы используете. Шрифт определяет начертание букы текста.

Все шрифты, которые сайт использует, должны быть всегда доступны браузеру клиента, откуда бы он ни смотрел сайт (Windows, Linux, Android, Mac , ...).

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

Указания браузеру, какие именно шрифты использовать, даются с помощью CSS - директивы font-family.

Например - для двух CSS - классов (.MySansSerif и .MyMonospace ) :

.MySansSerif { font-family: Arial, Helvetica, sans-serif; } .MyMonospace { font-family: "Courier New", Courier, monospace; }

Для этой директивы (font-family) в качестве значения задаётся список имён шрифтов (через запятую, в порядке приоритета), из которых браузер выбирает доступные шрифты (Arial, Helvetica, sans-serif).


Универсальные WEB - шрифты (Safe web fonts)

Это те шрифты, которые практически наверняка есть на любом компьютере, с которого заходит посетитель Вашего сайта

По типу шрифтов.

Шрифты Serif

font-family Пример шрифта
Georgia, serif Пример шрифта
"Times New Roman", Times, serif Пример шрифта
"Palatino Linotype", Palatino, "Book Antiqua", serif Пример шрифта

Шрифты Sans-Serif

font-family Пример шрифта
Arial, Helvetica, sans-serif Пример шрифта
"Arial Black", Gadget, sans-serif Пример шрифта
Impact, Charcoal, sans-serif Пример шрифта
Tahoma, Geneva, sans-serif Пример шрифта
"Trebuchet MS", Helvetica, sans-serif Пример шрифта
Verdana, Geneva, sans-serif Пример шрифта

Шрифты Monospace

font-family Пример шрифта
Courier, monospace Пример шрифта
"Courier New", Courier, monospace Пример шрифта
"Lucida Console", Monaco, monospace Пример шрифта

Шрифты Cursive

font-family Пример шрифта
"Comic Sans MS", cursive Пример шрифта
"Courier New", Courier, monospace Пример шрифта
"Lucida Console", Monaco, monospace Пример шрифта


Сохранение шрифтов на сервере

WEB - шрифты можно хранить на сервере, вместе с WEB сайтом. Для этого нужно:

  • сохранить файлы шрифтов на сервере
  • при помощи CSS директивы  @font-face описать шрифты, которые предполагается использовать в документе
  • при помощи директивы CSS  font-family закрепить шрифты за HTML - элементами.

Файлы - описания шрифтов можно купить у разработчика, можно скачать бесплатные (например - Google Fonts).

В директиве @font-face указывается имя, под которым далее шрифт будет использоваться в HTML - документе, путь к папке со шрифтами на сервере и имя файла, содержащего конкретный шрифт.

Например:

@font-face { font-family: Molle-Regular; src: url(Molle-Regular.ttf);

Далее этот шрифт можно использовать через CSS директиву font-family. Например директива:

.MyMonospace { font-family: Molle-Regular; }

назначает классу .MyMonospace шрифт из файла: Molle-Regular.ttf


Использование шрифтов из библиотек (CDN - Content Delivery Network)

Существует ряд online- ресурсов, на которых хранятся шрифты, и с которых эти шрифты можно подгружать в HTML документ.

Например, команда:

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

подключает к HTML документу шрифт "Open Sans"; . И далее его можно использовать через CSS - директиву 

font-family: "Open Sans";


В удобной форме посмотреть доступные Google-шрифты и сразу получить ссылку на нужный можно, например, по этой ссылке:   fontcdn.org


Дополнительные свойства шрифтов

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

Свойства CSS font

Свойство  Описание
font Задаются все свойства шрифта в одном параметре
font-family Задаёт шрифт
font-size Размер шрифта
font-style Стиль шрифта
font-variant Модификация шрифта
font-weight Толщина линии

Например:

style=" font-size :200%; font-style :italic; font-variant :small-caps; font-weight :bold; "
Показывает отформатированный текст:
Отформатированный текст.


Свойства CSS text

Свойство Описание
color Цвет текста
direction Направление текста / направление написания
letter-spacing Увеличивает или уменьшает пространство между символами в тексте
line-height Устанавливает высоту строки
text-align Определяет горизонтальное выравнивание текста
text-decoration Определяет декорацию текста
text-indent Определяет отступ первой строки в текстовом блоке
text-shadow Определяет эффект тени добавляется к тексту
text-transform Управляет капитализации текста
unicode-bidi Используется вместе с направлением собственности , чтобы установить или вернуться , должен ли текст быть перекрыты для поддержки нескольких языков в одном документе
vertical-align Устанавливает вертикальное выравнивание элемента
white-space Определяет, как обрабатываются пробелы
word-spacing Увеличивает или уменьшает пространство между словами в тексте


Пример1

style=" color: rgb(217, 217, 217); font-size: 30px; background-color: rgb(186, 186, 186); text-shadow: rgb(46, 46, 46) 0px 2px 3px; text-align:center; font-weight:bolder; line-height:150%; "
Показывает отформатированный текст:
Отформатированный текст

Пример2

style=" color: #CEF0D4; font-family: 'Rouge Script', cursive; font-size: 30px; font-weight: normal; line-height: 10px; text-align: center; text-shadow: 1px 1px 2px #082b34;"> "
Показывает отформатированный текст:
Отформатированный текст

Пример3

style=" padding: 20px; text-align: center; text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8); color: #cdcdcd; background-color:#cdcdcd; opacity: 0.4; font-size: 6em; font-weight: bold; font-family: Helvetica; "
Показывает отформатированный текст:
TEXT

Пример4

style=" color: #fff; text-align: center; font-size: 6em; font-weight: bold; font-family: Helvetica; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); "
Показывает отформатированный текст:
TEXT