Мобильный LiveInternet Без заголовка

Авторизация

Дневник tatjana_946 Лента друзей - Дневник - Полная версия

Без заголовка 29-01-2010 09:46 к комментариям - к полной версии - понравилось!

Это цитата сообщения FlashStudio Оригинальное сообщение

Ставим в пост прокрутку текста

Для того чтобы в вашем посте прокручивался текст (к примеру, как здесь), нужно нажать кнопку "Источник" в левом верхнем углу редактора и в самом начале кода вставить такую строчку:

<div style="width: 100%; height: 300px; margin-top: 5px; margin-left: 5px; text-align: justify; font-size: 14px; overflow: auto">

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

width:

Описание

Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <IMG>). Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Синтаксис

width: значение | проценты | auto

Аргументы

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. Аргумент auto устанавливает ширину исходя из типа и содержимого элемента.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>width</title>
<style type="text/css">
   .layer1 {
    width: 300px; /* Ширина блока */
    background: #fc0; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */
    border: 1px solid #ccc; /* Параметры рамки */
   }
   .layer2 {
    width: 400px; /* Ширина текстового блока */
   }
</style>
</head>
<body>

<div class="layer1">
   <p class="layer2">Lorem ipsum dolor sit amet,consectetuer
   adipiscing elit,seddiem nonummy nibh euismod tincidunt ut
   lacreet dolore magna aliguam erat volutpat.</p>
</div>

</body>
</html>

Результат данного примера, как он отображается в бразере Opera показан ни рис. 1.

[431x195]

Рис. 1. Ширина блока в браузере Opera

height:

Описание

Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <IMG>). Высота не включает толщину границ вокруг элемента, значение отступов и полей.

Синтаксис

height: значение | проценты | auto

Аргументы

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. Аргумент auto устанавливает высоту исходя из содержимого элемента

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>height</title>
<style type="text/css">
   .layer {
    height: 50px; /* Высота блока */
    width: 150px; /* Ширина блока */
    overflow: scroll; /* Добавляем полосы прокрутки */
    background: #fc0; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */
    border: 1px solid #333; /* Параметры рамки */
   }
</style>
</head>
<body>

<div class="layer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

</body>

</html>

Результат данного примера показан ни рис. 2.

[338x163]

Рис. 2. Применение параметра height

margin-top:

Описание

Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 3).

[338x174]

Рис. 3. Отступ от верхнего края элемента

Синтаксис

margin-top: значение | auto

Аргументы

Величину верхнего отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>margin-top</title>
<style type="text/css">
   DIV {
    background: #fc3; /* Цвет фона */
    border: 2px solid black; /* Параметры рамки */
    padding: 20px; /* Поля вокруг текста */
    margin-top: 20%; /* Отступ сверху */
   }
</style>
</head>
<body>

<div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
   ut aliquip ex ea commodo consequat.
</div>

</body>
</html>

Результат данного примера показан ни рис. 4.

[396x301]

Рис. 4. Применение параметра margin-top

margin-left:

Описание

Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента (рис. 5).

[235x238]

Рис. 5. Отступ от левого края элемента

Синтаксис

margin-left: значение | auto

Аргументы

Величину левого отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>margin-left</title>
<style type="text/css">
   .layer1 {
    background-color: #D36037; /* Цвет фона */
   }
   .layer2 {
    margin-left: 20%; /* Отступ слева */
    background-color: #ccc; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
</style>
</head>
<body>

<div class="layer1">
   <div class="layer2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
    euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
    ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
    ut aliquip ex ea commodo consequat.
   </div>
</div>

</body>
</html>

Результат данного примера показан ни рис. 6.

[396x233]

Рис. 6. Применение параметра margin-left

text-align:

Описание

Определяет горизонтальное выравнивание текста в пределах элемента. Этот атрибут наследуется, поэтому может быть установлен для целого блока для воздействия на все вложенные в него элементы.

Синтаксис

text-align: center | justify | left | right

Аргументы

center: Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
justify: Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
left: Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
right: Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>text-align</title>
<style type="text/css">
   div {
    border: 1px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
    margin-bottom: 5px; /* Отступ снизу */
   }
   #left { text-align: left; }
   #right { text-align: right; }
   #center { text-align: center; }
   .content {
    width: 75%; /* Ширина слоя */
    background: #fc0; /* Цвет фона */
   }
</style>
</head>
<body>

<div id="left"><div class="content">Выравнивание по левому краю</div></div>
<div id="center"><div class="content">Выравнивание по центру</div></div>
<div id="right"><div class="content">Выравнивание по правому краю</div></div>

</body>
</html>

Результат данного примера показан ни рис. 7.

[398x235]

Рис. 7. Выравнивание текста в браузере Opera

Браузер Internet Explorer несколько иначе трактует данный пример, чем Opera и Firefox, выравнивая не только текст, но и блоки (рис. 8).

[398x230]

Рис. 8. Выравнивание текста в браузере Internet Explorer

font-size:

Описание

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задают размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.

В конечном итоге, размер шрифта сильно зависит от значения этого параметра у родителя элемента.

Синтаксис

font-size: абсолютный размер | относительный размер | значение | проценты

Аргументы

Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Соответствие этих аргументов с размером шрифта в HTML приведено в табл. 1.

Табл. 1. Размер шрифта в CSS и HTML
CSS(HTML)	xx-small(1)	x-small(2)	small(3)	medium(4)	large(5)	x-large(6)	xx-large(7)

Относительный размер шрифта задается аргументами larger и smaller.

Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>font-size</title>
<style type="text/css">
   H1 {
    font-family: 'Times New Roman', Times, serif; /* Гарнитура текста */
    font-size: 250%; /* Размер шрифта в процентах */
   }
   P {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11pt; /* Размер шрифта в пунктах */
   }
</style>
</head>
<body>

<h1>Duis te feugifacilisi</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Результат данного примера показан ни рис. 9.

[399x293]

Рис. 9. Применение параметра font-size

oveflow:

Описание

Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

Синтаксис

overflow: auto | hidden | scroll | visible

Аргументы

visible

Отображается все содержание элемента, даже за пределами установленной высоты и ширины.

hidden

Отображается только область внутри элемента, остальное будет обрезано.

scroll

Всегда добавляются полосы прокрутки.

auto

Полосы прокрутки добавляются только при необходимости.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>overflow</title>
<style type="text/css">
   .layer {
    overflow: scroll; /* Добавляем полосы прокрутки */
    width: 300px; /* Ширина блока */
    height: 150px; /* Высота блока */
    padding: 5px; /* Поля вокруг текста */
    border: solid 1px black; /* Параметры рамки */
   }
</style>
</head>
<body>

<div class="layer">
   <h2>Duis te feugifacilisi</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Результат данного примера показан на рис. 10.

[396x242]

Рис. 10. Применение параметра oveflow

вверх^ к полной версии понравилось! в evernote

Вы сейчас не можете прокомментировать это сообщение.

Дневник Без заголовка | tatjana_946 - ГАРМОНИЯ | Лента друзей tatjana_946 / Полная версия Добавить в друзья Страницы: раньше»