Тег 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 уроков и советов
О
|
