Негодное vote php. Бесповоротный

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

Как подключить шрифт на сайт в CSS

Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках(h1 ) нашего сайта. Для этого выполняем следующие действия:

h1 { font-family : "RalewayRegular" ; }

Теперь все заголовки 1-го уровня на сайте отображаются с нужным нам шрифтом.

Если вы хотите подключить несколько шрифтов(или их начертаний), то просто добавьте их под предыдущим:

@font-face { font-family : "RalewayRegular" ; src :url("../fonts/RalewayRegular.ttf" ) format("truetype" ) ; font-style : normal ; font-weight : normal ; } @font-face { font-family : "RalewayBold" ; src :url("../fonts/RalewayBold.ttf" ) format("truetype" ) ; font-style : normal ; font-weight : normal ; }

Вы могли заметить, что есть разные форматы шрифтов - .ttf, .woff, .eot, .svg и др. Еще существует формат для современных браузеров.woff2 , но о нем мы расскажем в одной из следующих статей. Обычно каждый шрифт подключается сразу в 3х форматах. Это сделано, чтобы шрифт правильно отображался во всех браузерах в т.ч. и старых. Выглядит это так:

@font-face { font-family : "RalewayRegular" ; src :url("../fonts/RalewayRegular/RalewayRegular.eot" ) ; src :url("../fonts/RalewayRegular/RalewayRegular.eot?#iefix" ) format("embedded-opentype" ) , url("../fonts/RalewayRegular/RalewayRegular.woff" ) format("woff" ) , url("../fonts/RalewayRegular/RalewayRegular.ttf" ) format("truetype" ) ; font-style : normal ; font-weight : normal ; }

Здесь следует обратить внимание на порядок подключения - это важно!

Не будем вдаваться в подробности, просто запомните вид этой конструкции.

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

Как подключить шрифт с помощью различных сервисовТакже можно воспользоваться сервисом fonts4web для подключения шрифтов:

Самый простой способ подключения шрифтов

Как подключить шрифт к шаблону Moguta CMS

Как добавить ссылку с Google fonts в шаблон Moguta CMS
Теперь вы знаете как подключить шрифт на сайт в CSS и не только. Мы с радостью ответим на все ваши вопросы

Приветствую всех читателей данной статьи и подписчиков моего блога! Сегодняшнюю публикацию я хочу посвятить теме, без знаний которой ваши интернет-ресурсы не будут читабельными и привлекательными: «Как в html задать шрифт». Сама по себе тема является легкой, и я уверен, что вы быстро ее освоите.

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

Шрифты бывают разные

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

• Helvetica;
• Futura;
• Garamond;
• Bodoni;
• Bembo;
• Rockwell;
• Times New Roman.

Их главные отличия состоят в отношении к определенным семействам. Существуют антиквенные (с засечками), рубленные, декоративные, курсивные и моноширинные семейства.

Также хочу подчеркнуть, что существует 5 единиц размерностей шрифтов.

Начнем с языка html и его «творческих способностей»

Форматирование текста при помощи тегов html Название первого заголовка Подзаголовок с красной буквы!

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

Напомню, что атрибут align = « center» задает отображение текста по центру.

А теперь пришел час css хвастаться своими умениями

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

Основные свойства, применяемые для форматирования контента, это font и его составляющие: text-decoration .

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

Название свойства	Ключевые слова
font-family	Можно устанавливать как стандартные семейства шрифтов: · без засечек (sans-serif); · антиквенные (serif); · декоративные (fantasy); · курсивные (cursive); · моноширинные (monospace), Так и стандартные существующие стили (Arial, Calibri и т.д.).
font-size	Для установки абсолютной размерности символов используются обозначения: xx-small, x-small, small, medium, large, x-large, xx-large. Также можно задать уникальное значение.
font-weight	Отвечает за насыщенность текстового начертания. Изменяется в диапазоне или задается при помощи слов normal, bold, lighter или bolder.
font-variant	Задает представление буквам, используя ключевые слова: small-caps, normal или inherit.
font-style	Устанавливает обычное (normal), наклоненное (oblique), курсивное (italic) начертание или наследует родителя (inherit).
font-stretch	Указывает плотность расположения букв. Можно указать такие значения: ultra-condensed, ultra-expanded, extra-condensed, extra-expanded, semi-condensed, semi-expanded, normal, expanded, condensed и inherit.

Свойство text-decoration помогает украсить текст дополнительными элементами, такими как подчеркивание (underline ), зачеркивание (line-through ), надчеркивание (overline ), а также наследовать параметры родителя (inherit ) или отменить все оформление (none ).

А теперь настало время для второго примера. Я взял предыдущий код и оформил его при помощи средств css. Так, заголовок был оформлен с тенью (при помощи свойства text- shadow ) и с контуром вокруг (border- color ). При этом одно слово я сделал крупнее. Также мне захотелось использовать параметр opacity для задания прозрачности подзаголовку.

Форматирование текста при помощи свойств css h1 { border-color: blue white; border-style: solid; font-family: Calibri, fantasy; color: gold; text-shadow: black 3px 0 9px; } h3 { font-size: x-large; opacity: 0.6; color: blue; text-decoration: underline; } em, strong { color: red; text-decoration: overline; } Название первого заголовка Полупрозрачный подзаголовок!

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

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

С уважением, Роман Чуешов

Прочитано: 420 раз

Здравствуйте. Предлагаю Вашему вниманию инструкцию по созданию системы голосования на сайте.
Итак, давайте рассмотрим, что же представляет из себя система голосования на сайте.
Пользователь видит на странице форму, в которой присутствуют заголовок голования, варианты ответов, из которых можно выбрать один, тот, за который пользователь хочет проголосовать.
После выбора пользователь нажимает кнопку "проголосовать" и система засчитывает его голос в пользу того или иного варианта ответа.
"Снаружи" вроде всё просто: обычная форма, обычная кнопка, обычные radio-кнопки. Но давайте заглянем "за кулисы" работы скрипта голосования. Там нашему взору откроется более интересная картина.

Что же представляет из себя система голосования изнутри?
Как можно запоминать выбор пользователя и не давать ему голосовать повторно?
Как создавать вопросы и варианты ответов?
На эти вопросы мы сейчас попробуем получить развёрнутый ответ. Нам нужно где-то хранить вопросы и варианты ответов. Для этого нам потребуется создать базу данных MySQL и пару таблиц в ней.
Давайте создадим такие таблицы:
voting - таблица, в которой будут храниться вопросы и варианты ответов.
voted - таблица, в которой будут храниться выбранные варианты ответов и IP адреса проголосовавших.

В таблице voting нам нужно создать три поля:
1. id - тип INTEGER, AUTOINCREMENT.
В поле будет содержаться идентификатор вопросов и ответов.
2. parent_id - тип INTEGER.
В поле будет содержаться идентификатор родительской записи (т.е. по отношению к ответам, родительской записью будет вопрос).
3. title - тип VARCHAR.
В поле будет содержаться текст вопросов и ответов.

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

В таблице voted нам нужно создать два поля:
1. answer_id - тип INTEGER.
В поле будет содержаться идентификатор выбранного пользователем ответа (т.е. ответа, за который он проголосовал).
2. ip - тип VARCHAR. UNIQUE.
В поле будет содержаться IP-адрес пользователя, который проголосовал. В данном поле будут только уникальные значения IP.

На этом моменте остановимся поподробнее. Почему мы запоминаем IP пользователя? Ведь IP бывают динамическими, скажете Вы. И пользователь, сменив IP, сможет проголосовать несколько раз. Я с Вами полностью согласен, но ещё не придумано 100% надёжного варианта запонимания неавторизованного пользователя.
Почему я упомянул авторизацию: если мы хотим, чтобы пользователь гарантированно не смог проголосовать несколько раз, нам нужно сделать систему авторизации и заместо IP пользователя использовать для учёта его голоса идентификатор его аккаунта.
И сделать открытым голосование только для авторизованных пользователей. Но создание голосования для авторизованных не входит в планы данной статьи, поэтому для учёта голоса будем запоминать IP.

Итак, мы создали таблицы, теперь давайте перейдём непосредственно к реализации php-скрипта системы голосования. Давайте разберём вот такой класс:

"/>

Как мы видим, в коде проводится проверка, голосовали ли пользователь ранее:

Если пользователь уже голосовал (т.е. его IP есть в таблице voted ), то ему выводится на экран статистика голосов, т.е. ответы и количество пользователей, проголосовавших за тот или иной ответ. Тут Вы можете подключить фантазию и доработать скрипт, например, сделав вывод статистики в виде графика.
Если же пользователь не принимал участие в данном голосовании, то ему выводится форма, в которой он может выбрать необходимый вариант ответа и проголосовать за него.
В цикле мы проходим по всем вариантам ответов и выводим их на экран. В качестве значения в поля "radio" вставляются их идентификаторы: