С помощью какого свойства можно управлять выравниванием
С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется
тег <font>, задающий свойства шрифта, но стили обладают
большими возможностями и позволяют сократить код HTML.
Свойства шрифта
Изменение начертания шрифта и его размера происходит через свойства CSS, которые
описаны в табл. 1.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| font-family | имя шрифта | Задает список шрифтов | P {font-family: Arial, serif} |
| font-style | normal italic | Нормальный шрифт Курсив Наклонный шрифт | P {font-style: italic} |
| font-variant | normal small-caps | Капитель (особые прописные буквы) | P {font-variant: small-caps} |
| font-weight | normal lighter bold bolder 100–900 | Нормальная жирность Светлое начертание Полужирный Жирный 100 — светлый шрифт, 900 — самый жирный | P {font-weight: bold} |
| font-size | normal pt px % | нормальный размер пункты пикселы проценты | font-size: normal font-size: 12pt font-size: 12px font-size: 120% |
В примере 1 показано использование параметров при работе со шрифтами.
Пример 1. Задание свойств шрифта с помощью CSS
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «https://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Шрифт</title>
<style type=»text/css»>
H1 {
font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */
font-size: 150%; /* Размер текста */
font-weight: lighter; /* Светлое начертание */
}
</style>
</head>
<body>
<H1>Заголовок</H1>
<p>Обычный текст</p>
</body>
</html>
Ниже приведен результат данного примера (рис. 1).
Рис. 1. Вид текста после применения стилей
В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат
их применения.
| Пример | Пример | Пример | Пример | Пример |
| font-family: Verdana, sans-serif; font-size: 120%; font-weight: light | font-size: large; font-weight: bold | font-family: Arial, sans-serif; font-size: x-small; font-weight: bold | font-variant: small-caps | font-style: italic; font-weight: bold |
Свойства текста
Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста.
Значения свойств приведены в табл. 3.
| Свойство | Значение | Описание | Пример |
|---|---|---|---|
| line-height | normal множитель значение % | Интерлиньяж (межстрочный интервал) | line-height: normal line-height: 1.5 |
| text-decoration | none underline | Убрать все оформление Подчеркивание Линия над текстом | text-decoration: none |
| text-transform | none capitalize uppercase lowercase | Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ | text-transform: capitalize |
| text-align | left right | Выравнивание текста | text-align: justify |
| text-indent | значение % | Отступ первой строки | text-indent: 15px; text-indent: 10% |
Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.
| Пример: и это все о нем | Пример: текст по центру | Пример: Это не ссылка, а просто текст | Пример: отступ первой строки | Пример: полуторный межстрочный интервал |
| text-transform: capitalize | text-align:center | text-decoration: underline | text-indent: 20px | line-height: 1.5 |
Главная / Интернет-технологии /
Введение в HTML и CSS / Тест 6
Упражнение 1:
Номер 1
Что определяет строка <p style=»text-transform:uppercase;»> ?
Ответ:
 (1) тип шрифта 
 (2) регистр букв 
 (3) кодировку 
Номер 2
Какими будут буквы после применения <p style=»text-transform:uppercase;»> ?
Ответ:
 (1) в нижнем индексе 
 (2) подчеркнутыми 
 (3) заглавными 
Номер 3
Чтобы все буквы в абзаце были заглавными необходимо применить
Ответ:
 (1) <p style=»text-transform:uppercase;»>  
 (2) <p style=»text-transform:lowercase;»>  
 (3) <p style=»text-transform:capitalize;»>  
Упражнение 2:
Номер 1
Что определяет строка <p style=»text-transform:capitalize;»>?
Ответ:
 (1) тип шрифта 
 (2) регистр букв 
 (3) кодировку 
Номер 2
Что изменится после применения <p style=»text-transform:capitalize;»>?
Ответ:
 (1) все буквы будут строчными 
 (2) все буквы будут заглавными 
 (3) все слова будут начинаться с заглавных букв 
Номер 3
Чтобы все слова в абзаце начинались с заглавной буквы необходимо применить:
Ответ:
 (1) <p style=»text-transform:capitalize;»> 
 (2) <p style=»text-transform:lowercase;»> 
 (3) <p style=»text-transform:uppercase;»> 
Упражнение 3:
Номер 1
Горизонтальный отступ от левого края параграфа определяется свойством
Ответ:
 (1) text-indent 
 (2) text-content 
 (3) text-select 
Номер 2
Какое свойство определяет отступ от левого края параграфа?
Ответ:
 (1) text-set 
 (2) text-indent 
 (3) text-trace 
Номер 3
Что определяется свойством text-indent?
Ответ:
 (1) отступ от левого края абзаца 
 (2) расстояние между буквами 
 (3) межстрочное расстояние 
Упражнение 4:
Номер 1
Для чего используется свойство line-height?
Ответ:
 (1) для межбуквенного расстояния 
 (2) для межстрочного расстояния 
 (3) для определения количества символов в табуляции 
Номер 2
Что определяется с помощью свойства line-height?
Ответ:
 (1) межстрочное расстояние 
 (2) расстояние отступа абзаца 
 (3) расстояние между словами 
Номер 3
Межстрочное расстояние определяется свойством
Ответ:
 (1) line-height 
 (2) line-width 
 (3) line-struct 
Упражнение 5:
Номер 1
Что определяет строка <ul style=»list-style-type:square;»>?
Ответ:
 (1) изменение маркера списка 
 (2) изменение типа шрифта 
 (3) изменение расстояния между элементами списка 
Номер 2
Что определяет строка <ul style=»list-style-type:disk;»>?
Ответ:
 (1) замещение элементами списка других элементов 
 (2) изменение маркера списка 
 (3) тип построения и уровни списка 
Номер 3
Чтобы маркером списка был круг необходимо использовать
Ответ:
 (1) <ul style=»list-style-type:circle;»> 
 (2) <ul style=»list-style-type:disc;»> 
 (3) <ul style=»list-style-type:round;»> 
Упражнение 6:
Номер 1
Укажите доступные значения свойства letter-spacing:
Ответ:
 (1) {letter-spacing: normal} 
 (2) {letter-spacing: none} 
 (3) {letter-spacing: auto} 
Номер 2
Какое свойство позволяет управлять расстоянием между словами?
Ответ:
 (1) word-spacing 
 (2) letter 
 (3) letter-spacing 
Номер 3
С помощью какого свойства можно управлять выравниванием?
Ответ:
 (1) text-align 
 (2) text-indent 
 (3) text-shadow 
Упражнение 7:
Номер 1
В каком правиле все индивидуальные свойства специфицированы?
Ответ:
 (1) BODY {background: red} 
 (2) P {background: url(«chess.png») gray 50% repeat fixed} 
 (3) BODY {background: gray} 
Номер 3
Из приведенных ниже записей выделите доступное значение свойства widows:
Ответ:
 (1) inherit 
 (2) none 
 (3) auto 
Упражнение 8:
Номер 1
Какой параметр задает высоту элемента?
Ответ:
 (1) height 
 (2) line-height 
 (3) max-height 
Номер 2
Из приведенных ниже записей выберите доступные значения параметра max-height
Ответ:
 (1) 2.1 
 (2) 10pt 
 (3) auto 
Номер 3
К доступным значениям параметра max-width следует отнести
Ответ:
 (1) 10pt 
 (2) auto 
 (3) none 
Упражнение 9:
Номер 1
Какой параметр можно использовать для задания всех характеристик списка в одном объявлении?
Ответ:
 (1) list 
 (2) list-style 
 (3) style 
Номер 2
К доступным значениям параметра list-style относят
Ответ:
 (1) list-style-type 
 (2) list-style-image 
 (3) list-style-border 
Номер 3
Выберите все доступные значения параметра list-style:
Ответ:
 (1) list-style-position 
 (2) list-style-type 
 (3) list-margin 
Упражнение 10:
Номер 1
Какой параметр задает изображение в качестве маркера элемента списка?
Ответ:
 (1) list-style-image 
 (2) list-style-glyph 
 (3) list-style-icon 
Номер 2
Какой параметр задает размещение маркера элемента списка?
Ответ:
 (1) list-style-position 
 (2) list-style-pos 
 (3) list-position 
Номер 3
Из приведенных ниже записей выберите доступные значения параметра list-style-position:
Ответ:
 (1) default 
 (2) inside 
 (3) left 
Упражнение 11:
Номер 1
Какой параметр задает тип выводимого курсора?
Ответ:
 (1) display 
 (2) setcursor 
 (3) cursor 
Номер 2
Определите из приведенных ниже записей доступные значения параметра cursor:
Ответ:
 (1) default 
 (2) text 
 (3) stop 
Номер 3
Как установить курсор в виде песочных часов?
Ответ:
 (1) clock 
 (2) wait 
 (3) time 
Упражнение 12:
Номер 1
Какой параметр позволяет задать способ визуализации элемента?
Ответ:
 (1) monitor 
 (2) show 
 (3) display 
Номер 2
Каковы допустимые значения параметра display?
Ответ:
 (1) block 
 (2) table 
 (3) off 
Номер 3
С помощью какого параметра можно задать вывод элемента в виде списка?
Ответ:
 (1) list 
 (2) list-item 
 (3) listing 
- Рамка таблицы
- Размер таблицы
- Выравнивание текста
- Чередование фонового цвета строк таблицы
- Изменение фона строки при наведении курсора
- Выравнивание таблицы по центру
Табличные данные — информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег <table>, представляющий из себя контейнер с содержимым таблицы. Контент HTML таблицы описывается построчно, каждая строка начинается с открывающего тега <tr> и заканчивается закрывающим тегом </tr>.
Внутри тега <tr> располагаются ячейки таблицы, представленные тегами <th> или <td>. Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.
Рамка таблицы
По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border. Но стоит обратить внимание на то, что если добавить рамку только к элементу <table>, то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов <th> и <td>.
table, th, td { border: 1px solid black; }
Попробовать »
Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing, которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.
Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing, то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:
- separate: является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
- collapse: соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Название документа</title>
<style>
table, td, th {
border: 4px outset blue;
border-spacing: 5px;
}
.first { border-collapse: collapse; }
</style>
</head>
<body>
<table>
<tr><th>Имя</th><th>Фамилия</th></tr>
<tr><td>Гомер</td><td>Симпсон</td></tr>
<tr><td>Мардж</td><td>Симпсон</td></tr>
</table>
<br>
<table class=»first»>
<tr><th>Имя</th><th>Фамилия</th></tr>
<tr><td>Гомер</td><td>Симпсон</td></tr>
<tr><td>Мардж</td><td>Симпсон</td></tr>
</table>
</body>
</html>
Попробовать »
Размер таблицы
После добавления рамок к ячейкам таблицы стало заметно, что содержимое ячеек слишком близко расположено к краям. Для добавления свободного пространства между краями ячеек и их содержимым можно воспользоваться свойством padding:
th, td { padding: 7px; }
Попробовать »
Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height, задавая нужные размеры или самой таблице или ячейкам:
table { width: 70%; }
th { height: 50px; }
Попробовать »
Выравнивание текста
По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.
CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align:
- top: текст выравнивается по верхней границе ячейки
- middle: выравнивает текст по центру (значение по умолчанию)
- bottom: текст выравнивается по нижней границе ячейки
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Название документа</title>
<style>
table, td, th {
border: 1px solid black;
border-collapse: collapse;
}
table { width: 70% }
td { text-align: right; }
th { height: 50px; }
.test1 { vertical-align: top; }
.test2 { vertical-align: bottom; }
</style>
</head>
<body>
<table>
<tr><th class=»test1″>Имя</th><th class=»test2″>Фамилия</th></tr>
<tr><td>Гомер</td><td>Симпсон</td></tr>
<tr><td>Мардж</td><td>Симпсон</td></tr>
</table>
</body>
</html>
Попробовать »
Чередование фонового цвета строк таблицы
При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class, добавляя его к каждой второй строке таблицы:
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Название документа</title>
<style>
table {
width: 70%;
border-collapse: collapse;
}
td, th {
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
}
th {
text-align: left;
padding: 5px;
background-color: #A7C942;
color: #fff;
}
.alt td { background-color: #EAF2D3; }
</style>
</head>
<body>
<table>
<tr><th>Имя</th><th>Фамилия</th><th>Положение</th></tr>
<tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
<tr class=»alt»><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
<tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
<tr class=»alt»><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
</table>
</body>
</html>
Попробовать »
Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса :nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):
tr:nth-child(odd) { background-color: #EAF2D3; }
Попробовать »
Изменение фона строки при наведении курсора
Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных.
Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс :hover к селектору строки таблицы и задать нужный цвет фона:
tr:hover { background-color: #E0E0FF; }
Попробовать »
Выравнивание таблицы по центру
Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin, задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе — за автоматическое выравнивание по центру:
table { margin: 10px auto; }
Попробовать »
Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу:
table { margin: 10px auto 30px; }