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


Окошки для кода или текста и Текст в ФЛЕЙМЕ с прокруткой 10-11-2016 21:42 к комментариям - к полной версии - понравилось!


Окошко для вставки кода или текста (без прокрутки)
с использованием тэга input

size="10" -
size="40" -
Атрибут size - определяет ширину текстового поля
- код окошка без прокрутки

Окошко для вставки кода или текста (с прокруткой)
с использованием тэга textarea


Атрибуты определяющие площадь окна:
cols - определяет ширину текстового поля
rows - определяет высоту (кол-во строк) текстового поля
- код окошка с прокруткой

При желании, окошко можно залить цветом, т.е. сделать фон.

Атрибуты встречающиеся в ниже приведенных кодах:
background-color:цвет фона
border: 2px solid #CC0000; бордюр, где:
2px - толщина бордюра,
solid – вид линии,
#CC0000 – цвет бордюра.


или изменить цвет бордюра(обводки) окошка:

border-right: yellow 2px solid; - параметры правого бордюра
border-top: red 2px solid; - параметры верхнего бордюра
border-left: lime 2px solid; - параметры левого бордюра
border-bottom: blue 2px solid; - параметры нижнего бордюра
color:white; - цвет текста
width: 30%; - ширина окошка

Важное дополнение.

Все коды окошек, которые приведены выше,- позволяют пользователю не только брать код из окошка, но и писать самому в этом окошке. В этом нет ничего страшного.
Но если вдруг, пользователь нечаянно чего-нибудь сотрет или видоизменит код, а потом скопирует его себе, то код может и не сработать…
Чтобы этого избежать, тегу добавляется атрибут readonly (от англ. "read only" ‒ «только для чтения»).
readonly="readonly" - указывает, что текстовый элемент формы имеющий данный атрибут не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий.(копировать можно!)
И вот результат:

Изменить текст в этом окошке пользователю уже не удастся


font-size:20px; - задает размер шрифта и окошка:

- font-size: 10px

- font-size: 15px

- font-size: 20px

- код здесь

text-align: center; - расположение текста в окошке

- код здесь

Важное пояснение:
Такие окошки подходят для написания кодов или текста в один абзац.
При разделении текста на разные абзацы будет выскакивать и виден значок <br />, обозначающий конец абзаца и например текст:
«Проблемы множатся в геометрической прогрессии,
На сердце увеличивая груз,
Но не впадаю я от этого в депрессию,
В прострации, поскольку, нахожусь.»
будет выглядеть в окошке вот так:

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

Текст в ФЛЕЙМЕ с прокруткой

Если Вы хотите добавить в свой пост много текста, но так чтобы пост не занимал много места и его не нужно было убирать под КАТ, а читать его прокручивая:

Фразочки из интернета:
  • Чем больше знаешь, тем больше знаешь лишнего.
  • Умно отвечают только тому, кто умно спрашивает.
  • Ума будет больше, если его не расходовать.
  • Не ищите отговорок, они должны быть под руками.
  • Думает ли тот, кто говорит что думает?
  • Ваша борьба за показатели может кончиться борьбой врачей за вашу жизнь.
  • Коллектив единомышленников: каждый думает о себе.
  • Не обижайся на шутку - возьми шутника на заметку.
  • Чем хуже жизнь, тем прекраснее мечты.
  • Чтобы казаться умным, прикиньтесь дураком.
  • Чем ленивее человек, тем больше его труд похож на подвиг.
  • Мысли покидают голову, не выдерживая одиночества.
  • Всякое решение старых проблем порождает новые.
  • Книгу мы любим потому, что она самый молчаливый друг.
  • Прозаик пишет обдуманное, лирик - пережитое, программист - прочитанное.
  • Если у тебя есть совесть, то и сто способов не помогут тебе разбогатеть.
  • Как бы ты ни был скромен, людям все равно хочется, чтобы ты был еще скромнее.
  • Чтобы любить людей, нужно иметь большое больное сердце.
  • Будь самоучкой, не жди, пока жизнь научит.
  • Предпоследняя ошибка выявляется при демонстрации работы начальнику.
  • Скромность украшает человека, но плохо одевает.
  • Нужно бороться со старыми предрассудками, чтобы победили новые.
  • Подчиненные тоже люди и тоже не хотят думать.
  • Многое можно заставить человека сделать по собственному желанию.
  • Сделай словам тесно и мыслям не поздоровится.
  • Если ничто другое не помогает, прочтите, наконец, инструкцию!
  • Не тратьте силы, возьмите молоток побольше.
  • Шутки надо понимать быстро, хотя не обязательно правильно.





текст с прокруткой в флейме с переменным:
overflow-y: scroll; - прокрутка по высоте видна всегда
height: 100px; - высота блока видимого текста
border:1px solid black; - бордюр: тонкая, сплошная, черная линия



текст с прокруткой в флейме с переменным:
overflow: scroll; ; - прокрутка по высоте и ширине блока видна всегда
height: 130px; - высота блока видимого текста
width: 800px; - ширина блока видимого текста
border:1px solid black; - бордюр: тонкая, сплошная, черная линия
text-indent: 5pt; - устанавливает величину отступа первой строки блока текста
scrollbar-arrow-color: #660000; - цвет треугольника на верхнем и нижнем квадратах
text-align: left – выравнивание текста слева
font face="georgia" – вид шрифта текста
font size="3" – размер шрифта текста
font color="#000000" – цвет шрифта текста



текст с прокруткой в флейме с переменным:
overflow: scroll; - прокрутка по высоте и ширине блока видна всегда
style="width: 800px;" - ширина строки написанного текста
width: 800px; - ширина блока видимого текста
height: 130px; - высота блока видимого текста
border:1px solid black; - бордюр: тонкая, сплошная, черная линия
text-indent: 5pt; - устанавливает величину отступа первой строки блока текста
scrollbar-arrow-color: #660000; - цвет треугольника на верхнем и нижнем квадратах
text-align: left – выравнивание текста слева
font face="georgia" – вид шрифта текста
font size="3" – размер шрифта текста
font color="#000000" – цвет шрифта текста







текст с прокруткой в флейме с переменным:
теми же, кроме
overflow: auto; - полосы прокрутки отображаются при переполнении блока видимости




Запрет переноса строки.
Тег NOBR запрещает перенос строки.
В результате текст, заключенный в этот тег, будет размещаться в одной строке независимо от ее размера.
Это приводит к появлению полосы горизонтальной прокрутки.
Закрывающийся тег обязателен.

В результате текст будет размещаться в одной строке независимо от ее размера. Закрывающийся тег обязателен.




текст с прокруткой в флейме
с разными стилями (шрифтами)
написания текста



Атрибуты встречающиеся в кодах:
width: 100%; - ширина блока видимого текста, задается в % или px
height: 300px; - высота блока видимого текста
margin-top: 0px; - отступ сверху от начала сообщения
margin-left: 0px; - отступ с левой стороны
text-indent: 5pt; - устанавливает величину отступа первой строки блока текста (например, для абзаца < p >). Воздействия на все остальные строки не оказывается.
border:1px solid black; - обводка (бордюр) заданного блока в котором будет виден текст, если поставить 0px бордюра не видно.
overflow - управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую (заданную) длину/ширину.
overflow-x - управляет поведением блока при переполнении по ширине
overflow-y - управляет поведением блока при переполнении по высоте
overflow: auto - полоса прокрутки отображается (становится видимой) при переполнении блока видимости
overflow:scroll - полоса прокрутки видна всегда, даже если переполнения нет
style="width: 800px;" - ширина строки написания текста внутри блока
text-align: left – выравнивание текста: слева - left, справа – right, по центу – center, justify
font size="3" – размер шрифта текста
font color="#000000" – цвет шрифта текста
font face="georgia" – вид шрифта текста
Переменные прокрутки:
scrollbar-face-color - это цвет передней стороны панели прокрутки
scrollbar-shadow-color - это цвет нижней и правой граней панели прокрутки.
scrollbar-highlight-color - это цвет верхней и левой граней панели прокрутки
scrollbar-3dlight-color - это цвет отсвета.
scrollbar-track-color - это цвет полосы, по которой "ходит" панель прокрутки.
scrollbar-arrow-color - это цвет треугольника на верхнем и нижнем квадратах.
#FFFFFF - это коды цвета, которые можно менять.
Не обязательно использовать все теги.

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


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

Дневник Окошки для кода или текста и Текст в ФЛЕЙМЕ с прокруткой | Kuma_1 - Цитатник «Копилочка» - с миру по нитке... | Лента друзей Kuma_1 / Полная версия Добавить в друзья Страницы: раньше»