Как спустить текст вниз?
Скрипт написан здесь Блок на css Я вставил туда ссылку и у меня щас пробелма. Я сделал этот блок высотой 50px и щас мне надо опустить на 16px. Я сделал margin-top: 16px; но не работает. (header — это тот самый стиль блока; txt-logo — стили текста)
Как мне опустить текст вниз?
Ответы (2 шт):
Margin не сработал по причине того что тег a является inline он по умолчанию не может двигаться вверх или вниз ОТСТУПАМИ.
Отсюда можно сделать вывод, если хотим сделать отступ сверху нужно чтобы элемент перестал быть inline. Например так:
Так же мы можем позиционировать элемент относительно экрана/родителя/своего места в DOM. с помощью (пример позиционирования элемента относительно родителя, у родителя тоже должен быть position: relative):
Так же мы можем сдвинуть элемент с помощью трансформаций например(сдвинуть по Y Элемент относительно своего места в DOM):
Как спустить текст вниз?
Скрипт написан здесь Блок на css Я вставил туда ссылку и у меня щас пробелма. Я сделал этот блок высотой 50px и щас мне надо опустить на 16px. Я сделал margin-top: 16px; но не работает. (header — это тот самый стиль блока; txt-logo — стили текста)
Как мне опустить текст вниз?
Margin не сработал по причине того что тег a является inline он по умолчанию не может двигаться вверх или вниз ОТСТУПАМИ.
Отсюда можно сделать вывод, если хотим сделать отступ сверху нужно чтобы элемент перестал быть inline. Например так:
Так же мы можем позиционировать элемент относительно экрана/родителя/своего места в DOM. с помощью (пример позиционирования элемента относительно родителя, у родителя тоже должен быть position: relative):
Так же мы можем сдвинуть элемент с помощью трансформаций например(сдвинуть по Y Элемент относительно своего места в DOM):
Как опустить текст вниз html
Начнём с самого простого, с основ.
Для начала откройте Блокнот (Пуск — Все программы – Стандартные — Блокнот).
Каждая веб-страничка имеет основные тэги (метки):
Теперь создадим нашу первую страничку:
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Рада вас видеть! : )
</body>
</html>
В основном, тэги двойные, то есть открывающие : <html>, <body>, <title> и закрывающие: </html>, </body>, </title>. Не забывайте об этом. Но есть такие тэги, которые не требуют закрывающего тэга, например тэг <br>, с помощью которого можно перенести текст (или картинку) на другую строку. Вы можете писать тэги и большими буквами, например <HTML>, <BODY>, но в таком случае закрывающие тэги также пишите большими буквами: </HTML>, </BODY>
Итак, теперь сохраним нашу страничку. Для этого выбираем Файл – Сохранить как…, пишем имя нашей будущей странички по-английски или цифрами, ставим точку и html. После жмём ‘Сохранить’
Посмотрите что у вас получилось. Многие вместо текста могут увидеть непонятные закорючки. Чтобы вам не меня каждый раз кодировку, поставим загадочную строчку, которая определит нам кодировку и текст будет отображаться по-русски:
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
Это мета-тэг, потавьте его после открывающего тэга <head>. Подробно о мета-тэгах поговорим позже.
Итак, у нас всё прекрасно отображается. Теперь можно поменять цвет текста и цвет самой странички. Для этого в тэг <body> поставим соответствующие определения.
bgcolor=»#цвет» – определяет цветовой фон всей страницы
text=»#цвет» – определяет цвет текста
Цвет в HTML пишется шестизначными буквами и цифрами. На многих сайтах есть таблицы цветов, так же как и в различных графических программках. Приведу пару примеров цветов:
000000 – чёрный
FFFFFF – белый
FF0000 – красный
00FF00- зелёный
Писать цвет можно как большими, так и маленькими буквами.
Итак, я сделаю фон странички чёрным, а цвет текста красным:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Моя первая страничка</title>
</head>
<body bgcolor=»#000000″ text=»#ff0000″>
Рада вас видеть! : )
</body>
</html>
Если не вводить в тэг <body> дополнительные тэги, то страничка автоматически будет белого цвета, а текст чёрного.
Мы можем выделить любое слово (или несколько) каким-нибудь другим цветом. В этом нам поможет тэг <font></font>. Давайте слово ‘вас’ сделаем голубого цвета и добавим ещё одну строчку:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Моя первая страничка</title>
</head>
<body bgcolor=»#000000″ text=»#ff0000″>
Рада <font color='#78D2FF'>вас</font> видеть! : )
<br>
Приходите ещё
</body>
</html>
Я уже упоминала тэг <br>, с его помощью мы перенесли строчку. Если вы хотите опустить текст ниже, то поставьте несколько тэгов <br>
Давайте ещё немного поэкспериментируем с текстом. Текст можно выровнять по центру, по левому или правому краю. В этом нам поможет тэг <p>:
<p align=»center»>выравниваем по центру</p>
<p align=»left»>выравниваем по левому краю</p>
<p align=»right»> выравниваем по правому краю</p>
<p align=»justify»>выравниваем по обоим краям </p>
Если не вводить тэг <p></p>, то текст (или картинки) автоматически выравнивается по левому краю.
Выравнивание можно использовать и с другим тэгом, <div></div>:
<div align=»center»>выравниваем по центру</div>
<div align=»left»>выравниваем по левому краю</div>
<div align=»right»> выравниваем по правому краю</div>
<div align=»justify»>выравниваем по обоим краям </div>
Чтобы выровнять текст по центру, можно использовать тэг <center></center>. Но такое исключение есть только у данного тэга, остальные используются вместе с <p></p> или <div></div>
Давайте выровняем наш текст по центру:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Моя первая страничка</title>
</head>
<body bgcolor=»#000000″ text=»#ff0000″>
<div align=»center»>
Рада <font color='#78D2FF'>вас</font> видеть! : )
<br>
Приходите ещё
</div>
</body>
</html>
Текст можно сделать крупнее, меньше, жирнее, сделать его курсивом, подчеркнуть, зачеркнуть. Начнём с заголовков:
<h1>Ваш текст </h1>
<h2>Ваш текст </h2>
<h3>Ваш текст </h3>
<h4>Ваш текст </h4>
<h5>Ваш текст </h5>
<h6>Ваш текст </h6>
<h1> — самый крупный, <h6> — соответственно, самый мелкий. Данный тэг автоматически переносит на следующую строчку, это не всегда нам нужно. Например вы хотите выделить таким образов всего одно или несколько слов и перенос на следующую строчку нам вовсе не нужен. В этом случае нам поможет атрибут size, который используется вместе с тэгом <font>:
<font size=»+4″>Ваш текст </font>
<font size=»+3″>Ваш текст </font>
<font size=»+2″>Ваш текст </font>
<font size=»+1″>Ваш текст </font>
<font size=»+0″>Ваш текст </font>
<font size=»-1″>Ваш текст </font>
<font size=»-2″>Ваш текст </font>
size=»+4″ – самый крупный, size=»-2″ – соответственно, самый мелкий.
Как ещё можно изменить текст:
<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
<tt> моноширинный шрифт </tt> (как у пишущей машинки)
<u> Подчеркнутый текст </u>
<strike> Перечеркнутый </strike>
<s> Перечеркнутый </s>
<small>маленький шрифт относительно основного текста</small>
<big>Большой шрифт относительно основного текста </big>
Верхний индекс <sup> sup </sup>
Нижний индекс <sub> sub </sub>
Верхний и нижний индексы пригодятся при написании химической формулы или математического уравнения.
К тексту (или одному слову, предложению, абзацу) можно применить сразу несколько тэгов. Например:
Применим новые тэги на практике. Я сделаю строчку ‘Рада вас видеть’ крупнее и подчеркну, а фразу ‘Приходите ещё’ курсивом:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Моя первая страничка</title>
</head>
<body bgcolor=»#000000″ text=»#ff0000″>
<div align=»center»>
<font size=»+3″><u>Рада <font color='#78D2FF'>вас</font> видеть! : )</u></font>
<br>
<i>Приходите ещё</i>
</div>
</body>
</html>
Чтобы лучше усвоить урок, поэкспериментируйте со своим текстом.
С помощью атрибута face мы сможет задать тип шрифта нашему тексту.
Есть стандартные типы шрифтов, которые присутствуют на компьютере каждого:
Times
Times New Roman
Arial
Helvetica
Courier
Verdana
Tahoma
Cosmic Sans
Garamond
<font face=»Tahoma»>Ваш текст</font>
Можно указать сразу несколько типов шрифтов. Если у посетителя вашей веб-странички не окажется одного шрифта, копьютер автоматически определит и отобразит другой указанный шрифт. Пример:
<font face=» Tahoma, Arial, Helvetica»> Ваш текст</font>
Вы можете скачать шрифты и с Интернета, но при создании своей виртуальной странички не забывайте, что не у всех могут быть ваши скаченные декоративные шрифты.