Часто задаваемые вопросы и ответы по таблицам стилей
Часто задаваемые вопросы и ответы
по таблицам стилей
Цель: Изучить справочный материал по таблицам стилей.
Содержание:
1. Как убрать отступ сверху и снизу от списка?
2. Как изменить отступ слева от маркеров списка?
3. Как увеличить расстояние от маркера до текста?
4. Хочу изменить вид маркера на другой символ. Как это сделать?
5. Как вместо символа маркера использовать картинку?
6. Как изменить цвет текста в списке?
7. Как разместить элементы списка горизонтально?
8. Как убрать рамку вокруг изображения-ссылки?
9. Как добавить границу вокруг рисунка?
10. Как выровнять текст одновременно по правому и левому краю?
11. Как изменить расстояние между строками текста?
12. Вопросы и ответы
Как убрать отступ сверху и снизу от списка?
Используйте стилевой параметр margin-top (отступ сверху) и margin-bottom (отступ снизу) для селектора UL или OL, в зависимости от типа списка. Также можно воспользоваться универсальным атрибутом margin.
Пример
<head>
<style type="text/css">
ul{ margin: 0px;} /* Убираем отступы у списка */
</style>
</head>
<body>
<hr>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
<hr>
</body>
К содержанию
Как изменить отступ слева от маркеров списка?
Добавьте параметр margin-left к селектору UL или OL, соответственно, для маркированного или нумерованного списка. Браузер Firefox одновременно с отступами добавляет к списку поля (параметр padding). Поэтому для одинакового отображения списка в разных браузерах необходимо обнулить значение атрибута padding.
Пример
<head>
<style type="text/css">
UL {
padding: 0px; /* Убираем поля для браузера Firefox */
margin-left: 20px; /* Отступ слева */
}
</style>
</head>
<body>
<hr>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
<hr>
</body>
Значение margin-left подбирается экспериментально исходя из собственных предпочтений. Допускается также использовать отрицательную величину, только учтите, что маркеры и текст могут при этом «уехать» за край окна.
К содержанию
Как увеличить расстояние от маркера до текста?
Используйте атрибут padding-left для селектора LI, он определяет расстояние между маркером и текстом справа от него.
Пример
<head>
<style type="text/css">
LI {
padding-left: 20px; /* Отступ от маркера до текста */
}
</style>
</head>
<body>
<hr>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
<hr>
</body>
Отрицательное значение для padding-left использовать нельзя, поэтому минимальное задаваемое расстояние равно ноль пикселов.
К содержанию
Хочу изменить вид маркера на другой символ. Как это сделать?
С помощью HTML или CSS допускается устанавливать один из трех типов маркеров: disc (точка), circle (кружок), square (квадрат). Добавлять эти значения нужно к стилевому параметру list-style-type, который указывается для селектора UL или LI.
Пример
<head>
<style type="text/css">
UL {
list-style-type: square /* Квадратные маркеры */
}
</style>
</head>
<body>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
</body>
Выбор и установка собственного символа маркера происходит весьма своеобразно, через псевдоэлемент before. Вначале следует вообще убрать маркеры у списка, присвоив значение none стилевому атрибуту list-style-type, а затем через двоеточие добавить псевдоэлемент before к селектору LI. Сам вывод символа осуществляется с помощью параметра content, в качестве значения которого и выступает желаемый текст или код знака в юникоде.
Пример
<head>
<style type="text/css">
LI {
list-style-type: none; /* Убираем маркеры у списка */
}
LI:before {
content: "+ "; /* Добавляем в качестве маркера символ "плюс" */
}
</style>
</head>
<body>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
</body>
В данном примере маркер, установленный по умолчанию, прячется, а взамен добавляется символ +.
Замечание
Псевдоэлемент before не работает в браузере Internet Explorer, поэтому собственные маркеры в нем отображаться не будут.
Чтобы установить в качестве маркера какой-нибудь хитрый символ, можно воспользоваться программой Microsoft Word, выбрав меню Вставка > Символ... После чего откроется окно, как показано на рисунке.
Выбор символа в программе Microsoft Word
Код знака, выделенный на рисунке цветом, следует вписать в качестве параметра content, добавив перед ним слэш. Например, для приведенного символа следует указывать content: "\25aa".
К содержанию
Как вместо символа маркера использовать картинку?
Чтобы задать свой рисунок маркера, воспользуйтесь стилевым параметром list-style-image, в качестве значения которого указывается url, а в скобках – путь к желаемому изображению.
Пример
<head>
<style type="text/css">
UL {
list-style-image: url('/images/book. gif')
}
</style>
</head>
<body>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
</body>
Учтите, что высота рисунка влияет на межстрочное расстояние между пунктами списка, поэтому подбирайте изображение небольшого размера.
К содержанию
Как изменить цвет текста в списке?
Используйте стилевой атрибут color для задания цвета текста и background для указания цвета фона, добавляя их к селектору UL или OL.
Пример
<head>
<style type="text/css">
UL {
color: navy; /* Цвет текста */
background: #fc0; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
margin-left: 20px; /* Отступ слева */
}
</style>
</head>
<body>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
</body>
При таком раскладе маркеры оказываются вынесенными за пределы цветной фоновой области. Поэтому для изменения вида фона следует использовать тег <DIV>, внутрь которого и добавить список. Все необходимые цвета при этом указываются для селектора DIV.
Пример
<head>
<style type="text/css">
DIV {
color: navy; /* Цвет текста */
background: #fc0; /* Цвет фона */
padding: 2px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ul>
</div>
</body>
В данном примере к списку добавляется оранжевый цвет фона и устанавливается черная рамка вокруг цветной области.
К содержанию
Как разместить элементы списка горизонтально?
Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору LI следует добавить стилевой атрибут display со значением inline, он преобразует блочный элемент во встроенный.
Пример
<head>
<title>Горизонтальный список</title>
<style type="text/css">
ul. hr {
margin: 0px; /* Обнуляем значение отступов */
padding: 0px; /* Обнуляем значение полей */
}
ul. hr li {
display: inline; /* Отображать как встроенный элемент */
margin-right: 5px; /* Отступ слева */
border: 1px solid #000; /* Рамка вокруг текста */
padding: 3px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<ul class="hr">
<li>Мчади</li>
<li>Када на мацони</li>
<li>Пахлава</li>
<li>Кчуч</li>
<li>Лилибдж</li>
</ul>
</body>
Результат данного примера показан ниже.
Горизонтальный список
Из-за того, что вокруг списка автоматически добавляются отступы, их следует изменить, добавляя параметры margin и padding к селектору UL, как показано в примере.
К содержанию
Как убрать рамку вокруг изображения-ссылки?
Когда рисунок помещается внутрь контейнера <A>, то он становится ссылкой и вокруг него автоматически добавляется тонкая цветная рамка. Чтобы от нее избавиться, добавьте параметр border со значением none или 0px к селектору IMG.
Пример
<html>
<head>
<style type="text/css">
A IMG { border: none; /* Убираем границу */ }
</style>
</head>
<body>
<a href="link. html">
<img src="sample. gif" width="100" height="100"
alt="Рисунок без рамки">
</a>
</body>
</html>
В данном примере используется контекстный селектор A IMG, который говорит использовать стиль только для изображений, расположенных внутри тега <A>.
К содержанию
Как добавить границу вокруг рисунка?
У тега <IMG> есть параметр border, который задает толщину рамки в пикселах вокруг рисунка, и в то же время определяет, показывать границу или нет. Однако использование этого параметра имеет определенный недостаток — в браузерах Firefox и Opera цвет рамки совпадает с цветом текста веб-страницы, а в браузере Internet Explorer рамка черная. Поэтому универсальный способ управлять цветом и толщиной границы состоит в добавлении CSS, в частности, применении универсального стилевого параметра border.
Пример
<html>
<head>
<style type="text/css">
IMG {
border:
3px /* Толщина рамки */
#fc0 /* Цвет границы */
solid /* Сплошная линия */
}
</style>
</head>
<body>
<img src="sample. gif" width="100" height="100"
alt="Рисунок с рамкой">
</body>
</html>
В данном примере используется сплошная рамка оранжевого цвета толщиной три пиксела.
К содержанию
Как выровнять текст одновременно по правому и левому краю?
Для выравнивания текста в блоке, например абзаце, применяется стилевой атрибут text-align. Значение justify этого параметра и устанавливает выравнивание текста по ширине, то есть сразу по левому и правому краю текстового блока.
Пример
<head>
<title>Выравнивание по ширине</title>
<style type="text/css">
P {text-align: justify; /* Выравнивание по ширине */ }
</style>
</head>
<body>
<p> . . . </p>
</body>
В данном примере параметр text-align применяется к селектору P, что заставляет весь текст в абзацах выравниваться по ширине. Учтите, что при таком способе выравнивания, скорее всего, появятся большие промежутки между словами в предложении.
К содержанию
Как изменить расстояние между строками текста?
Для управления межстрочным расстоянием (оно еще называется интерлиньяжем) применяется стилевой параметр line-height. В качестве значения обычно указывается число, которое определяет межстрочный интервал. Например, line-height: 2 устанавливает двойной интервал, а line-height: 1.5 – полуторный.
Пример
<head>
<title>Интерлиньяж</title>
<style type="text/css">
P. dline { line-height: 1.5; }
P { line-height: 0.9em; }
</style>
</head>
<body>
<p class="dline">
Некоторые сайты сохраняют техническую информацию на локальном компьютере посетителя в виде небольших текстовых файлов, которые называются сookie.</p>
<p>
Данный термин переводится как „печенье“, но поскольку это название лишь сбивает с толку, его оставляют без перевода. Cookie можно использовать для сохранения даты последнего посещения читателя, паролей, а также любой информации о действиях посетителя на сайте. Подобное применение позволяет персонализировать сайт и сделать его более удобным для посетителей.</p>
</body>
Результат данного примера показан ниже.
Вид текста при разном межстрочном расстоянии
Аргумент параметра line-height допустимо задавать и в других единицах CSS, например, пикселах (px), процентах (%) и др. В данном примере для первого абзаца установлен полуторный интерлиньяж, а для второго – межстрочное расстояние равно 0.9em, что можно трактовать как 0.9 или 90%, поскольку единица em соответствует высоте текущего шрифта.
К содержанию
Вопросы и ответы
Как для каждого абзаца добавить отступ первой строки?
Как уменьшить отступ между заголовком и основным текстом?
Как обойтись без тега FONT?
Как добавить подчеркивание к заголовку?
Как выровнять текст по центру области?
Что такое капитель?
Как с помощью тега HR и стилей задать цвет линии
Как выделить другим цветом фрагмент текста?
Хочу изменить цвет первой буквы в каждом абзаце
Как для каждого абзаца добавить отступ первой строки?
Когда требуется установить абзацный отступ, лучше всего использовать стилевой атрибут text-indent. Его значение определяет насколько сдвинуть текст первой строки вправо от исходного положения. Исходная ширина текстового блока при этом не меняется и остается исходно заданной. Величину отступа можно указывать в пикселах, процентах или других доступных единицах.
Пример
<head>
<style type="text/css">
p {
text-indent: 20px; /* Отступ первой строки в пикселах */
}
</style>
</head>
<body>
<p>
Вавилонским столпотворением, по библейскому преданию, называется неудавшаяся попытка царя Нимрода построить в Вавилоне столп высотой до неба. Бог, разгневавшись на людей за их безрассудное желание, решил покарать строителей: он смешал их язык так, что они перестали понимать друг друга, вынуждены были прекратить стройку и мало-помалу рассеялись по свету. Отсюда, как объясняли древние, и пошло различие языков.</p>
<p>
В обычном понятии вавилонское столпотворение означает беспорядок, неразбериху при большом скоплении народа.</p>
</body>
Результат данного примера показан ниже.
Вид текста с отступами первой строки
Как уменьшить отступ между заголовком и основным текстом?
К абзацу (тег <P>) и заголовку (тег <H1>) автоматически добавляется верхний и нижний отступы, которые в сумме и дают большое расстояние между заголовком и текстом. Чтобы уменьшить величину отступа надо явно добавить параметр margin-bottom к селектору H1. Причем можно установить положительное, нулевое или отрицательное значение. Таким способом легко задавать желаемое значение отступа.
Пример
<head>
<style type="text/css">
H1 {
margin-bottom: -15px;
/* Отрицательный отступ между заголовком и текстом */
}
</style>
</head>
<body>
<h1>Апплет</h1>
<p>
Программа, которая выполняется с составе браузера или под управлением специальной программы для ее просмотра. Апплет, как правило, пишется на языке Java, поэтому часто можно встретить сочетание «Java апплет».</p>
</body>
Как обойтись без тега FONT?
Тег <FONT> уже не входит в спецификацию HTML 4 и не рекомендуется к использованию. Взамен предлагается применять стили. Так, для выбора гарнитуры используйте стилевой параметр font-family, для размера – font-size, а для управления цветом – color.
Пример
<head>
<style type=”text/css”>
p {
color: navy; /* Цвет текста */
font-family: Arial, sans-serif; /* Рубленый шрифт */
font-size: 90%; /* Размер текста */
}
</style>
</head>
<body>
<p>Пример синего текста с использованием шрифта без засечек.</p>
</body>
Как добавить подчеркивание к заголовку?
Подчеркивание для блочных элементов вроде тега <H1> можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.
Линия под текстом на всю ширину блока
Чтобы создать линию под текстом, следует добавить к элементу стилевой параметр border-bottom, его значением выступает одновременно толщина линии, ее стиль и цвет.
Пример
<head>
<style type="text/css">
h1 {
font-size: 200%; /* Размер шрифта */
/* Параметры линии под текстом */
border-bottom: 2px solid maroon;
font-weight: normal; /* Убираем жирное начертание */
padding-bottom: 5px; /* Расстояние от текста до линии */
}
</style>
</head>
<body>
<h1>Пример текста</h1>
<p>
Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.</p>
</body>
Расстояние от линии до текста можно регулировать параметром padding-bottom, добавляя его к селектору H1. Результат данного примера показан на рисунке.
Линия под заголовком
Подчеркивание текста
Чтобы подчеркнуть только текст, необходимо воспользоваться атрибутом text-decoration со значением underline, опять же, добавляя его к селектору H1.
Пример
<head>
<style type="text/css">
h1 {
text-decoration: underline; /* Подчеркивание заголовка */
}
</style>
</head>
<body>
<h1>Пример текста</h1>
<p>
Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.</p>
</body>
Результат данного примера показан на рисунке.
Подчеркивание заголовка
В случае использования параметра text-decoration линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.
Как выровнять текст по центру области?
Используйте стилевое свойство text-align со значением center, добавляя его к абзацу (селектор P) или к определенному слою.
Пример
<head>
<style type="text/css">
.text { text-align: center; }
</style>
<title>Выравнивание по центру</title>
</head>
<body>
<div class="text">
<p>
Современная образовательная парадигма, ратифицируя приоритет личностной ориентации педагогического процесса, в ходе которого осуществляется развитие природных задатков, заложенных в каждом индивидууме, требует переосмысления существующих традиционных форм и методов общеобязательного образования.</p>
</div>
</body>
В данном примере текст внутри слоя с именем text выравнивается по центру веб-страницы.
Что такое капитель?
Капителью в типографике называется текст, набранный прописными буквами уменьшенного размера. Не стоит путать с обычными заглавными символами, капитель отображается и выглядит несколько по иному. Чтобы не мучаться с изменением регистра символов и размером шрифта, стоит воспользоваться свойством font-variant со значением small-caps.
Пример
<head>
<title>Капитель</title>
<style type="text/css">
h1 {
font-variant: small-caps; /* Капитель */
font-size: 200%; /* Размер шрифта */
}
</style>
</head>
<body>
<h1>Почему именно лев?</h1>
<p>
А вы пробовали ловить льва в пустыне? Нет?! Тогда оставьте свои вопросы при себе до тех пор, пока не соизволите это сделать любым из предложенных методов.</p>
</body>
Результат данного примера показан ниже.
Заголовок, оформленный с помощью капители
Обратите внимание, что первая буква предложения больше, чем остальной текст. В этом особенность капители, заглавные и строчные буквы при ее использовании сохраняются.
Хочу изменить цвет первой буквы в каждом абзаце. Что мне для этого надо сделать?
Удобнее всего воспользоваться стилевым псевдоэлементом first-letter, добавляя его к селектору P. В стилях вначале указывается селектор, затем через двоеточие first-letter, после чего в фигурных скобках пишется желаемый параметр color и его значение.
Пример
<head>
<style type="text/css">
p:first-letter { color: green /* Зеленый цвет первой буквы */ }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet...</p>
</body>
Как выделить другим цветом фрагмент текста?
Создайте новый класс (например, colortext) и установите для него параметр color с желаемым значением цвета. После чего выделение фрагмента текста происходит с помощью тега <SPAN class="colortext">, класс которого совпадает с именем класса, созданным выше.
Пример
<head>
<style type="text/css">
.colortext { color: green /* Зеленый цвет символов */ }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet,
<span class="colortext">consectetuer adipiscing elit</span>,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
Как с помощью стилей задать цвет линии?
Цвет линии, добавленной на веб-страницу через тег <HR>, по умолчанию отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых атрибутов. В частности, браузер Internet Explorer для цвета линии применяет свойство color, а браузеры Firefox и Opera — background-color. Но это еще не все, при этом обязательно следует указать толщину линии (параметр height) отличной от нуля и убрать рамку вокруг линии, задавая значение none у атрибута border. Собирая все параметры воедино для селектора HR, получим универсальное решение для популярных браузеров.
Пример
<head>
<style type="text/css">
HR {
border: none; /* Убираем границу для браузера Firefox */
color: red; /* Цвет линии для браузера Internet Explorer */
/* Цвет линии для браузера Firefox и Opera */
background-color: red;
height: 2px; /* Толщина линии */
}
</style>
</head>
<body>
<hr>
<hr>
</body>
В данном примере цвет линии задан как красный, а толщина линии равна двум пикселам.
