Найти в Дзене
Веб-программирование для каждого
68 подписчиков

Стили в веб-программировании

32
3 мин
Всем привет. Сегодня мы рассмотрим еще одну важную тему. И достаточно интересную. Извините не могу часто писать. Занят выживанием. Кто хочет помочь и заработать, простые заработки в интернете Стили текстов в веб-страницах Итак. Снова про тексты. То есть про шрифты. Есть огромное разнообразие шрифтов для подачи текстов в интернете. И есть несколько способов как это дело оформить. Начнем с самого простого. У Гугла есть сервис Google Fonts . Там вы найдете огромное множество шрифтов. Вам надо только выбрать то что вам понравится и вставить в файл со стилями в корневой папке вашего сайта, либо в текст страницы. Сайт Гугл Фонтс вам даст код для вставки. Вам надо просто его вставить. Например вот такой: <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> Вам надо это поместить внутри тега <head> ( смотрите предыдущие уроки ). У вас загружен теперь шрифт. Вам надо теперь его вставить там, где вы задаете стиль конкретного абзаца, заголовка или текстового блока.
Оглавление

Всем привет. Сегодня мы рассмотрим еще одну важную тему. И достаточно интересную. Извините не могу часто писать. Занят выживанием. Кто хочет помочь и заработать, простые заработки в интернете

Стили текстов в веб-страницах

Итак. Снова про тексты. То есть про шрифты. Есть огромное разнообразие шрифтов для подачи текстов в интернете. И есть несколько способов как это дело оформить. Начнем с самого простого.

У Гугла есть сервис Google Fonts . Там вы найдете огромное множество шрифтов. Вам надо только выбрать то что вам понравится и вставить в файл со стилями в корневой папке вашего сайта, либо в текст страницы. Сайт Гугл Фонтс вам даст код для вставки. Вам надо просто его вставить. Например вот такой:

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

Вам надо это поместить внутри тега <head> ( смотрите предыдущие уроки ). У вас загружен теперь шрифт. Вам надо теперь его вставить там, где вы задаете стиль конкретного абзаца, заголовка или текстового блока. Например так :

#header{position: absolute; top: 210px; left: 653px; font-family: 'Open Sans', sans-serif;font-size: 17px;color: hsl(60, 100%, 90%);text-align: center; width: 825px; height: 82px; padding-top: 4px; padding-bottom: 5px; background-color: hsl(24, 100%, 50%); border: 2px solid; border-radius: 25px}

#header это ID элемента ( это может быть ссылка, заголовок, блок, все что угодно ). Об ID в другой раз поговорим.

Или так. Прямо в текст страницы между тегами <body> и </body>:

< h3 style="position: absolute; top: 210px; left: 653px; font-family: 'Open Sans', sans-serif;font-size: 17px;color: hsl(60, 100%, 90%);text-align: center; width: 825px; height: 82px; padding-top: 4px; padding-bottom: 5px; background-color: hsl(24, 100%, 50%); border: 2px solid; border-radius: 25px"> Красивый заголовок </h3>

Нас интересует пока только момент " font-family: 'Open Sans', sans-serif; ", остальное просто для сведения, что еще много чего задается стилями, как видите. Размер шрифта, цвет, ширина текстового блока, радиусы рамки и так далее. Просто скопировал со своего сайта. Это задано семейство шрифтов. sans-serif задается на случай, если основной шрифт не загрузился, запасных шрифтов можно задать несколько.

Другое. Возможно вы создали свой файл стилей. То же самое вы просто помещаете в этот файл. И снова между тегами <head> задаете путь к файлу стилей. Например так:

<link rel="stylesheet" type="text/css" href="../css/style.css" />

Путь к файлу все что прописано в атрибуте href :)))

Все. Со шрифтами разобрались. У вас есть готовый теперь код, который вы можете как угодно изменять, пробуйте!

Цвет в веб-странице.

Так. Цвет на веб-странице это очень важно и притягательно. Как задать цвет фона? Давайте разберемся. Вот пример кода, опять же с моего сайта:

html {

background: red; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(hsl(60, 100%, 85%), hsl(30, 100%, 50%), hsl(12, 100%, 50%)); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(hsl(60, 100%, 85%), hsl(30, 100%, 50%), hsl(12, 100%, 50%)); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(hsl(60, 100%, 85%), hsl(30, 100%, 50%), hsl(12, 100%, 50%)); /* For Firefox 3.6 to 15 */

background: linear-gradient(hsl(60, 100%, 85%), hsl(30, 100%, 50%), hsl(12, 100%, 50%)); /* Standard syntax */

text-align: center;

margin: 5px;

padding: 0;

}

Здесь задан цвет фона для всей страницы. Это видно, в начале стоит тег HTML .Вы можете задать также фон для текстового блока например. Замените HTML на div. Цвет задается как " hsl(60, 100%, 85%) ". Значения можно менять, так вы получите разные оттенки. Конечно утомительно искать наугад. Для этого существуют готовые таблицы . Ну по этой ссылке нет такой записи в hsl, это не страшно, можно вставить #191970 , например. Это все одно.

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

И напоследок. Файлы стилей должны иметь расширение .css, например style.css . Вы можете ( и это предпочтительно ) складывать ваши файлы стилей в папку /CSS/ на вашем сервере, позже указывая путь <link rel="stylesheet" type="text/css" href="../css/style.css" /> .

Фсе. Теперь вы готовый вебмастер. В моих уроках на сегодня я вам дал самые важные понятия. Вы можете легко сделать любую веб-страницу.

Поздравляю. Дальше будем затачивать углы, так сказать... Удачи!

Подписывайтесь на канал. Приглашайте друзей! Обещаю, будет интересно! Вы еще такое увидите!

9