Совет 1: Как задать отступ

Чаще всего для указания размеров отступов в HTML-страницах используют возможности языка CSS (Cascading Style Sheets - «Каскадные таблицы стилей»). Хотя и в самом языке HTML есть несколько «рудиментарных» остатков, позволяющих в некоторых случаях задавать отступы. Ниже приведены варианты, которые используются наиболее часто, но кроме них есть еще достаточно много разного рода уловок, которые позволяют задавать отступы при нестандартной разметке HTML-документов.
Вам понадобится
  • Базовые знания языков HTML и CSS
Инструкция
1
Определите элемент страницы, от которого следует отсчитывать отступ. Например, если текст помещен внутрь тега <div> ... </div> (блок), то родительским элементом для этого текста будет этот блок и отсчитывать отступ нужно от границ блока. А если текст (или изображение) не находится внутри каких-либо блочных (div, li и т.д.) или строчных (span, p и т.д.) элементов, то его родителем будет тело документа (тег body). Определить родительский элемент для текста необходимо потому, что именно ему надо задавать описания стилей, формирующие отступы. Будем считать, что текст у вас помещен внутрь блока div:<div>Образец текста</div>
2
Используйте свойство margin языка CSS, чтобы задать внешние отступы, то есть расстояние от границ элемента до соседних элементов, а также до границ родительского элемента. Это расстояние можно задавать раздельно для отступа с каждой стороны: margin-top - сверху, margin-right - справа, margin-bottom - снизу, margin-left - слева. Для образца, приведенного выше такой css-код может выглядеть, например, так:div {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 40px;
margin-left: 70px;
}Здесь «div» - это селектор, который указывает, что этот стиль надо применять ко всем тегам div в коде документа.Синтаксис CSS позволяет объединить все четыре строки в одну:div {
margin: 10px 15px 40px 70px;
}Значения отступов всегда надо указывать именно в таком порядке: сначала - сверху, затем - справа, снизу и слева.Если отступы одинаковы со всех сторон, то достаточно указать значение один раз:div {
margin: 70px;
}Кроме того, можно задать плавающий внешний отступ по горизонтали (то есть слева и справа). Это бывает очень полезно, когда надо установить блок заданной ширины точно по центру окна браузера. Браузер сам автоматически определяет каким должен быть отступ с обоих сторон, если написать такую CSS-инструкцию:div {
margin: 0 auto;
}
3
Используйте свойство padding, чтобы задать внутренние отступы, то есть расстояние от границ элемента до любых помещенных внутрь него элементов, включая текст. Синтаксис написания у этого свойства точно такой же, как и у свойства margin:div {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 40px;
padding-left: 70px;
}Илиdiv {
padding: 10px 15px 40px 70px;
}
4
Используйте свойство text-indent, чтобы задать дополнительный отступ для первой строки каждого абзаца текста. Например:div {
text-indent: 80px;
}
5
Используйте атрибуты hspace и vspace HTML-тега img, чтобы задать, соответственно, горизонтальный и вертикальный отступ от картинки до внешних элементов. Например, так:<img src="pic.gif" hspace="10" vspace="15" />
6
Используйте атрибут cellpadding тега table, если нужно задать отступ от границ ячеек в таблице до их содержимого. А атрибут cellspacing задает отступ между ячейками таблицы. Например:<table cellpadding="10" cellspacing="15">
<tr><td>1</td><td>2</td></tr>
</table>

Совет 2: Как задать фон

Для того чтобы приукрасить свой сайт в сети интернет, можно внести изменения в его дизайн. Изменение дизайна подразумевает под собой любое действие, начиная от смены фона главной страницы до полной перерисовки шаблона сайта. Если вы решили сменить фон вашего сайта, то следующая инструкция поможет в решении этого вопроса.
Вам понадобится
  • Редактирование css-файла.
Инструкция
1
По большей части, код дизайна сайта располагается в файле style.css. Но каждый шаблон может отличаться от предыдущего, поэтому код дизайна может располагаться в другом файле, но тоже с расширением css. Для того чтобы задать цвет фона вашего сайта, необходимо ввести или заменить уже существующее значение на следующее выражение:/* белый фон */body {
background-color: #FFFFFF;}/* белый фон названия, черный цвет шрифта */h1 {
color: #000000;
background-color: #FFFFFF;
}
2
Для того чтобы вставить какую-либо картинку в виде фона на ваш сайт, необходимо ввести или заменить уже существующее значение на следующее выражение: body {
background-color: #000000;
background-image: url ("Image-1.jpg");
}
Стоит отметить, что в этом случае необходимо указывать ссылку на файл изображения, который будет находиться в одной папке с файлом css.
3
Если вы захотели замостить маленькую картинку или картинку небольшого размера, то используйте команду background-repeat. Для того чтобы правильно использовать эту команду, имеется несколько уточнений этой команды:
background-repeat: repeat-x – повтор картинки по оси x;
background-repeat: repeat-y – повтор картинки по оси y;
background-repeat: repeat – повтор картинки по двум осям сразу;
background-repeat: no-repeat – повтор картинки не осуществляется;
background-attachment: scroll – прокрутка картинки совместно со страницей;
background-attachment: fixed – прокрутка картинки не осуществляется.
Используя синтаксис этой команды, можно показать ее работу в примерах:
background-position: 30px 40px – картинка находится ниже на 30 пикселей сверху и вправо на 40 пикселей от левого края.
background-position: 60% 35% – отступ слева составляет 60%, а отступ сверху составляет 25%.
Видео по теме

Совет 3: Как оформляются маркированные списки

Для полноценной работы с текстовым редактором Microsoft Word необходимо обладать базовыми знаниями: умением оформлять поля, задавать нужный формат, а также структурировать документ согласно заданным параметрам, к чему относится оформление маркированного списка.
Инструкция
1
Если после набора обыкновенных абзацев необходимо создать маркированный список либо превратить в него уже напечатанные строчки, то следует нажать на панели задач, которая находится в верхней части открытого окна, кнопку «Формат», затем выбрать в выпадающем меню команду «Список». Если меню появилось в сокращенном варианте, оно расширяется нажатием на значок круга с двойной стрелкой снизу. Готовый текст, разбитый на строчки и подлежащий форматированию, перед выполнением этих действия выделяется нажатием и удерживанием левой кнопки мыши, двигаемой по коврику.
2
В открывшемся небольшом окне нужно выбрать первую вкладку с соответствующим названием, а затем щелкнуть по образцу списка с требуемым маркером: жирной точкой, квадратиком, галочкой. Далее следует нажать кнопку «Ок» и подгонять формат под требуемый вручную, либо совершить эту операцию с помощью нового окна, появляющегося после нажатия на команду «Изменить». Она позволяет не только сменить значок списка, найдя другой в более обширном перечне, но и задать иной размер шрифта символа, а то и вовсе поменять его на произвольный рисунок, что может пригодиться при оформлении поздравлений и других красочных документов. Вставка рисунка вместо обычных символов осуществляется через кнопку «Импорт».
3
Отдельной функцией идет уточнение положения маркера – если пропустить эту опцию, форма списка может не совпадать с заданными параметрами. Отступ маркера – это расстояние между ним и левым полем документа, своеобразная красная строка. Допускается ставить его значением 0 см либо несколько отодвинуть от границы остального текста. «Табуляция» в графе «Положение текста» означает местонахождение первого слова в строке относительно маркера. Значение в этой ячейке не может быть меньше, чем в предыдущей, обозначающей отступ символа. Если они совпадают, значит, текст вплотную примыкает к нумерованному списку. Отступ текста обозначает место следующих строк в одном абзаце, они могут иметь тот же вид, что и остальной текст, либо несколько отдаляться от левого поля.
4
Пользователи, которые предпочитают работать не через меню и диалоговые окна, могут воспользоваться соответствующим значком на панели форматирования. Нажатием на него на месте курсора либо выделенных строк получают нумерованный список, который форматируют с помощью знаков табуляции и положения текста на верхней линейке. Передвижение черного уголочка табуляции сместит первое слово первой строки, верхнего треугольничка – местонахождение маркера, а нижнего треугольничка на платформе – остального внутрисписочного текста.
Видео по теме
Видео по теме
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500