Среда, 13.11.2019, 23:42
ЗАРАБОТОК В СЕТИ
WWW.ZARABOTKII.RU
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
...
Меню сайта
вечная ссылка
Статьи
Вебмастеру
Форма входа
Мини чат
200
Новости сайта
Block content
Помощь сайту
Помогите сайту!
ЯндексЯндекс. ДеньгиХочу такую же кнопку
Наш опрос
Оцените мой сайт
Всего ответов: 62
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс.Метрика
Рейтинг@Mail.ru
Поиск
 Тег style в html

Тег style в html

В третьем уроке мы рассмотрели все самые распространенные html теги. К каждому из них можно было приписывать параметр style и мы постоянно ссылались на это. Настало время поговорить о том, что именно можно прописать в этом параметре, но для начала расскажу о теге style.

Синтаксис тега <STYLE>

  <head>

       ...

                 <style type="text/css">

      ...

              </style>

             ...

                            </head>

Между <style> и </style> могут прописываться стили. Это написание равносильно таблице стилей CSS, о которой мы пока ничего не говорили.

Пример. Html код:

<head>

  <style type="text/css">

 .styletest {color: blue; font-size:12px; font-family:Arial}

</style>

   </head>

<body>

<font class="styletest">Этот текст будет синим, шрифт Arial

  и размером 12 пикселей

  </font>

      </body>

Преобразуется на странице в следующее:

Этот текст будет синим, шрифт Arial и размером 12 пикселей

Обратите внимание, что в class мы указали styletest - потому что именно так называется наш стиль. Поскольку в style мы не указали конкретно для какого тега он сделан, то мы может применять его не только для тегов <font>, но и для других. Например, для <b>, <u> и т.д. - для всех тегов, которые поддерживают параметр class.

Выше разобранный пример можно сделать по-другому (не используя class):

<font style="color: blue; font-size:12px; font-family:Arial"> Этот текст будет синим</font>

Результат будет таким же как и предыдущий пример.

В чем же тогда разница? А разница в том, что допустим, у Вас есть на сайте 50 страниц (это считается маленьким сайтом). На всех 50 страницах у Вас для какого-то текста в тегах прописано style="color: blue; font-size:12px; font-family:Arial". Теперь представим такую ситуацию, что синий цвет Вам больше не по душе и Вы захотели сменить его на черный. В этом случае Вам нужно будет редактировать 50 страниц. Но 50 страниц это ещё не так уж и много. Тем неменее это все равно лишняя работа, которую можно было легко избежать. Поэтому я советую пользоваться классами (class="какой-то класс"). В этом случае Вам бы пришлось поменять всего лишь в одном месте цвет и на всех страницах бы все поменялось.

Теперь о том как это реализовать. Вам необходимо создать и подключить таблицу стилей CSS. Подключается она с помощью тега

<link rel="stylesheet" type="text/css" href="адрес таблицы стилей"/>

Причем подключается таблица стилей в заголовке:

<head>

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

</head>

В данном случае таблица стилей (назовем её style.css) должна содержать следующее:

styletest {color: blue; font-size:12px; font-family:Arial}

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

<head>

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

</head>

<body> <font class="styletest">Этот текст будет синим, шрифт Arial

и размером 12 пикселей</font>

  </body>

Результат будет таким же:

Этот текст будет синим, шрифт Arial и размером 12 пикселей

Надеюсь, что Вы поняли всю прелесть таблиц стилей. Стиль нужно написать только в таблице стилей .css, а там где нужно его применить писать class="имя стиля".

Использование стилей html через ID

Теперь рассмотрим как можно использовать стили через ID. Для начала, необходимо в таблице стилей (назовем её primerid.css) написать следующее:

font#yellow{color:yellow}

font#orange{color:orange}

b#niz{font-size:12px;}

b#verh{font-size:11px;}

b#slash{color:blue}

p#center{font-size:12px}

b#map{font-size:18px; color:navy}

Обратите внимание, что сначала пишется название тега, далее #, далее название и потом аргументы стиля. В этом случае мы не сможем, например, для тега font использовать стиль center, поскольку он прописан для тега b.

Для использования ID, код html страницы должен содержать примерно следующее:

<head>

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

</head>

<body>

<font id="yellow">Желтый текст через ID</font>

<b id="verh">Этот текст имеет размер 11 пикселей</b>

</body>

Вместо class нужно всего лишь написать id.

Теперь расскажу о том, какие аргументы можно задавать в стилях. Их довольно много.

Аргументы в style

1) background: цвет - задает цвет фона. Цвет можно выбрать любым. Аналогом является: background-color: цвет. Цвет может быть задан в виде шестизначного кода (например, #53A32B;) или конкретное название цвета (например, red). Выбрать подходящий цвет можно на странице: коды и названия html цветов.

2) background-image: url(images/bg.png); - фоном будет картинка. В скобках указывается адрес фона изображения.

3) background-repeat: repeat - использовать фоновую картинку многократно. Другие возможные параметры:
repeat-x - повторять фоновое изображение только по горизонтали
repeat-y - повторять фоновое изображение только по вертикали
no-repeat - не повторять фоновое изображение

4) border: 1px solid red; - вся область объекта будет в красной рамке, ширина которой 1 пиксель. Возможны и другие параметры вместо solid:
dotted - рамка будет покрыта не сплошной линией, а точками
dashed - рамка будет покрыта тире, пробел, тире и т.д.

5) color: #fc0ab1; - задает цвет текста. Цвет можно выбрать любым. С этим аргументом Вы уже были знакомы.

6) font-family: Arial; - задает шрифт текста. Существует очень много различных шрифтов. Например, самые распространенные шрифты:
Verdana (я пользуюсь этим шрифтом),
Times New Roman
Arial
Courier New
Comic Sans MS
Georgia
Impact.

Советую также прочесть: Какой выбрать шрифт для сайта.

7) font-size: 15px; - задает размер текса, в данном примере 15px. Можете вместо px так же писать другие единицы размерности em, om.

8) font-weight: bold; - задает толщину текста (насыщенность). Возможные значения:
bold - полужирное
bolder - жирное
lighter - светлое
normal - обычный
→ 100, 200, 300, 400, 500, 600, 700, 800, 900.

9) height: 100%; - задает высоту. Можно задавать в %, а можно в пикселях (px).

10) padding-top: 5px; - отступ сверху. Возможно задать значение auto. Аналогичный тег: margin-top.

11) padding-right: 4px; - отступ справа. Возможно задать значение auto. Аналогичный тег: margin-right.

12) padding-bottom: 5px; - отступ снизу. Возможно задать значение auto. Аналогичный тег: margin-bottom.

13) padding-left: 4px; - отступ слева. Возможно задать значение auto. Аналогичный тег: margin-left.

13) width: 100%; - задает ширину. Можно задавать в %, а можно в пикселях (px).

14) overflow: scroll; - область видимости содержания блочного элемента, которое не помещается в нем. Возможные значения параметра:
visible - отображается все содержание элемента, даже за пределами установленной высоты и ширины
hidden - отображается только область внутри элемента, остальное будет обрезано
scroll - всегда добавляются полосы прокрутки
auto - полосы прокрутки добавляются только при необходимости

15) text-align: left; - выравнивание текста. Возможные значения параметра:
left - по левому краю
right - по правому краю
center - по центру
justify - выравнивание по левому и правому краю
auto - автоматически
inherit - наследование значения предка

16) float: left; - определяет сторону, по которой будет выравниваться какой-то элемент, а остальные элементы будут обтекать его с других сторон. Возможные значения параметра:
left - по левому краю
right - по правому краю
none - отсутствует
inherit - наследование значения предка

17) line-height: 22px; - устанавливает межстрочный интервал.

18) white-space: nowrap; - задает отображение между пробелами. Возможные значения:
normal - обычное значение
nowrap - пробелы не учитываются, переносы строк в коде HTML игнорируются
pre - текст показывается с учетом всех пробелов и переносов, в случае длинной строки будет добавлена полоса прокрутки
pre-line - пробелы не учитываются, текст автоматически переносится на следующую строку
pre-wrap - сохраняются все пробелы и переносы, автопереход на следующую строку
inherit - наследование значения предка

19) display: block; - определяет способ показа элемента. Имеет довольно много параметров:
block - элемент показывается как блочный
inline - элемент отображается как встроенный
inline-block - создает блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу
inline-table - элемент является таблицей
list-item - элемент выводится как блочный и добавляется маркер списка
none - временно удаляет элемент из документа. С помощью скриптов можно сделать его появление
run-in - устанавливает элемент как блочный или встроенный в зависимости от контекста
table - элемент является блочной таблицей
table-caption - задает заголовок таблицы подробно
table-cell - элемент представляет собой ячейку таблицы
table-column - назначает элемент колонкой таблицы
table-column-group - элемент является группой одной или более колонок таблицы
table-footer-group - используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы
table-header-group - элемент предназначен для хранения одной или нескольких строк ячеек
table-row - элемент отображается как строка таблицы
table-row-group - создает структурный блок, состоящий из нескольких строк таблицы

20) text-decoration: none; - опция для редактирования внешнего вида текста. Имеет несколько параметров:
blink - мигающий текст
line-through - перечеркнутый текст
overline - верхнее подчеркивание текста
underline - нижние подчеркивание текста
none - выводит обычный текст
inherit - наследуется у предка

21) text-transform: capitalize; - преобразование текста в заглавные или прописные буквы.
capitalize - первый символ каждого слова в предложении будет заглавным
lowercase - перевод всего текста в нижний регистр
uppercase - перевод всего текста в верхний регистр
none - не менять ничего
inherit - наследование предка

22) letter-spacing: 2px; - задает расстояние между буквами.

Так же стоит обратить внимание на возможности стилей для тега <a>, но они будут рассмотрены отдельно здесь: HTML тег а.

Уважаемый читатель, теперь Вы имеете представление о стилях в html. Вы можете делать Ваши странички более красивыми. Рассмотренные выше возможности стилей являются поверхностными и для профессионального использования Вам понадобятся более глубокие знания. В следующих уроках мы рассмотрим самые важные из этих тегов во всех подробностях. Теперь советую перейти к следующему уроку.

Ссылка на следующий урок: Урок 5. HTML тег а - подробное описание с примерами

Перейти в каталог html уроков и советов

 


О

 

Copyright MyCorp © 2019
Календарь
«  Ноябрь 2019  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Архив записей
Валюта

Яндекс кошелек
Если не видно картинку, то включите ява скрипт и обновите страницу код с картинки →

Обмен валют currex.ru и spasibo.kz

...
Друзья сайта
Модная - женская одежда Заработок в интернете
Бесплатные программы ПК Гороскоп на сегодня
Заработок на рекламе
Заработок в сети
Гламур
Салон красоты
Работа на себя
Работа на дому
Мои услуги
BitCoin
вечная ссылка
Купить ссылку здесь за руб.
Поставить к себе на сайт
Так.ру
Сайт создан в системе uCoz