Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17359 / 1606 | Оценка: 3.91 / 4.09 | Длительность: 12:32:00
Лекция 8:

CSS3. Работа с текстом и фонами

< Лекция 7 || Лекция 8: 12 || Лекция 9 >

Работа с текстом

Следующей группой атрибутов, которые мы рассмотрим будут атрибуты работы с текстом в целом, а именно выравнивание текста, оформление отступов, разрывов строк, добавление эффектов текста и т.д.

За управление текстом в CSS отвечают следующие атрибуты стилей:

  • text-align – определяет горизонтальное выравнивание текста элемента (text-align: center). Может принимать следующие значения:
    • center – выравнивание по центру;
    • left – выравнивание по левому краю;
    • right – выравнивание по правому краю;
    • justify– выравнивание по ширине;
    • auto – тип выравнивания не изменяется;
    • start – в случае, если направление текста слева - направо, то выравнивает по левому краю; если направление текста справа - налево – по правому краю;
    • end – в случае, если направление текста слева - направо, то выравнивает по правому краю; если направление текста справа - налево – по левому краю;
  • text-align-last – задает тип выравнивания последней строки элемента, при условии что значение атрибута стиля text-align равно justify (text-align-last: left). Принимает значения аналогичные атрибуту text-align;
  • text-decoration – добавляет эффекты для текста (text-decoration: none). Может принимать следующие значения:
    • blink – мигающий текст;
    • line-through – зачеркнутый текст;
    • overline – линия над текстом;
    • underline – линия под текстом (подчеркивание);
    • none – эффектов нет.
  • text-indent – задает величину отступа для первой строки текста (text-indent: 10%). Могут быть указаны конкретные значения и процентные.
  • text-overflow – задание параметра видимости текста (text-overflow: clip). Может принимать два значения: clip – текст обрезается, если выходит за границы элемента; ellipsis – при выходе текста за границы добавляется многоточие;
  • text-shadow – добавляет тень тексту и определяет ее параметры (text-shadow: red 5 5). Могут быть заданы следующие параметры тени:
    • none – тени нет;
    • цвет – любой поддерживаемый цвет;
    • сдвиг по горизонтали – положительное значение сдвигает тень вправо, отрицательное – влево;
    • сдвиг по вертикали – положительное значение опускает тень относительно текста, отрицательное – поднимает;
    • радиус размытия – большее значение сглаживает тень, по - умолчанию параметр равен 0.
  • text-transform – преобразование текста в заглавные или прописные буквы (text-transform: lowercase). Принимает следующие значения:
    • none – символы не меняются;
    • capitalize – первая литера каждого слова становится заглавной;
    • lowercase – символы текста преобразовываются в нижний регистр;
    • uppercase – символы текста преобразовываются в верхний регистр.

Вертикальное выравнивание фрагмента

При необходимости смещения по вертикали определенного элемента относительно текста применяется атрибут стиля vertical-align, принимающий значения:

  • baseline – выравнивание базовой линии по соответствующей линии родительского элемента, в случае с ячейкой таблицы происходит выравнивание по базовой линии первой текстовой строки;
  • bottom – выравнивание элемента по нижней части родительского элемента, в случае с ячейкой таблицы происходит выравнивание по нижнему краю;
  • middle – выравнивание по центру родительского элемента, в случае с ячейкой таблицы происходит выравнивание по середине;
  • sub – выравнивание базовой линии элемента по базовой линии нижнего индекса родительского элемента;
  • super – выравнивание базовой линии по базовой линии верхнего индекса родительского элемента;
  • text-bottom – выравнивание нижнего края фрагмента по нижнему краю текста родителя;
  • text-top – выравнивание верхнего края фрагмента текста по верхнему краю текста родителя;
  • top – выравнивание верхнего края фрагмента по верхнему краю текста родителя, в случае с ячейкой таблицы происходит выравнивание по верхнему краю.

Для примера добавим следующую строку к таблице стилей, созданной ранее, задающую параметры выравнивания текста в ячейках секции <tbody>:

tbody tr td { vertical-align:top; text-align: center }
 Результат выравнивания текста в ячейках таблицы

Рис. 7.3. Результат выравнивания текста в ячейках таблицы

Разрыв строк

По умолчанию строки переносятся таким образом, чтобы вместить текст в размеры элемента и избежать горизонтальной прокрутки. Существует два атрибута стилей, позволяющих управлять переносом строк:

  • white-space – задает способ отображения пробелов между словами (white-space: pre). Принимает следующие значения:
    • normal – несколько пробелов преобразуются в один, символы перевода строк также преобразуются в пробелы, браузер самостоятельно разрывает текст и переводит его на новые строки;
    • nowrap – несколько пробелов преобразуются в один, символы перевода строк также преобразуются в пробелы, браузер не осуществляет разрыв и перевод строк;
    • pre – последовательность пробелов сохраняется, символы перевода строк также сохраняются, браузер самостоятельно не выполняет разрыв и перенос строк. Фактически, текст выглядит образом, определенным разработчиком, без каких - либо изменений;
    • pre-line – несколько пробелов преобразуются в один, символы перевода строк сохраняются, браузер самостоятельно разрывает текст и переводит его на новые строки;
    • pre-wrap – последовательность пробелов сохраняется, символы перевода строк также сохраняются, браузер самостоятельно выполняет разрыв и перенос строк;
  • word-wrap – указывает места, где браузер может осуществить перевод строки (word-wrap: normal). Может принимать следующие значения:
    • normal – строки разрываются только по пробелам;
    • break-word – браузер может выполнять разрыв строк внутри слов.
Большинство атрибутов стилей, помимо прочих, также может принимать значение inherit, это означает, что значение атрибута будет унаследовано от значения аналогичного атрибута родительского элемента.

Краткие итоги

В рамках текущей лекции были рассмотрены вопросы управления внешним видом текстовой информации средствами каскадных таблиц стилей. Были упомянуты лишь самые основные атрибуты стилей и их возможные значения, для более детальной информации рекомендуется обратиться к материалам для самостоятельного изучения.

Управление более сложными элементами дизайна веб - страниц будет рассмотрено в рамках следующих лекций, касающихся CSS.

Список материалов для самостоятельного изучения

  1. http://htmlbook.ru/css/cat/color
  2. http://htmlbook.ru/css/cat/format
  3. http://htmlbook.ru/css/cat/font
  4. http://www.w3schools.com/css/css_font.asp
  5. http://www.indeep76.com/Style/Example007/fonts.html
  6. http://htmlbook.ru/css/cat/text
  7. http://htmlbook.ru/css/cat/format
  8. http://htmlbook.ru/css/margin
  9. http://htmlbook.ru/css/padding
  10. http://htmlbook.ru/css/border
  11. http://htmlbook.ru/css/list-style-image
  12. http://htmlbook.ru/css/list-style-position
  13. http://htmlbook.ru/css/list-style-type
< Лекция 7 || Лекция 8: 12 || Лекция 9 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Фёдор Гусев
Фёдор Гусев
Россия, г. Москва
Алина Попова
Алина Попова
Россия