Не пойму поведение стилевого атрибута text-transform

June 10, 2011

Просьба к модераторам переименовать тему в "Не пойму поведение стилевого атрибута text-decoration". Я ошибся и перепутал в названии стилевой атрибут.

Вот такой пример кода (внутри которого и сам вопрос):

<html>

<head><title>Черновик</title></head>

<body>

Здесь идёт перечёркнутый текст. А здесь должен быть неперечёркнутый. Но почему отображается перечёркнутый?

Почему не действует внутренний элемент, где я отменяю перечёркивание? Здесь же написано, что значение none отменяет все эффекты, в том числе и подчёркивания у ссылок, которое задано по умолчанию. В параграфе ниже всё работает. Я там проделал по тому же принципу: для всего параграфа переназначил стиль, а в конкретной фразе отменил стиль, и всё сработало.

Для всего этого параграфа задан стилевой атрибут text-transform со значением uppercase (все буквы заглавные). А эту фразу я заключил в тег span style со значением none для text-transform. Буквы стали строчные.

</body>

</html>

И ещё на этой странице написано, что "Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена."

Что-то не похоже, что ошибка исправлена. У меня в IE8 линия выше середины строчных букв, почти наверху. В Firefox линия явно ниже. На сайте неточная информация?

Edited June 10, 2011 by 9190

Gaspode · June 11, 2011

А здесь должен быть неперечёркнутый. Но почему отображается перечёркнутый?

Спан не перечёркнут. Перечёркнут абзац, в котором находится спан.

гляньте вот это

<style>
   p { text-decoration: line-through; }
   span { text-decoration: underline; }
   i { text-decoration: overline; }
</style>
</head>
<body>
   <p>раз <span>два <i>три</i> два</span> раз</p>
</body>

Я там проделал по тому же принципу: для всего параграфа переназначил стиль, а в конкретной фразе отменил стиль, и всё сработало.

Не по тому же. text-transform наследуется, в отличие от text-decoration, поэтому ваш спан тоже обладает свойством text-transform: uppercase и поэтому это свойство можно отменить. В случае с text-decoration, спан не обладает свойством text-decoration: line-through, поэтому отменить это свойство нельзя.

Edited June 11, 2011 by Gaspode

June 11, 2011

Gaspode, Спасибо за ответ!

Значит всё дело в наследовании. Я раньше сравнивал описание и text-decoration, и text-transform, чтобы посмотреть, есть ли разница между ними, почему один ведёт себя так, а другой иначе. И обратил тогда внимание на строку в описательной таблице, где для text-decoration указано не наследуется, а для text-transform наследуется, и подумал, что может в этом дело... Только я пока не слишком понимаю этот принцип наследования, надо где-то почитать.

Но почему одни элементы наследуются, а другие нет? Сделали бы так, чтобы все наследовались, не было бы путаницы и таких нюансов? Как тогда в моей ситуации я должен поступить? Вот так оптимально?

<html>

<head><title>Черновик</title></head>

<body>

Здесь идёт перечёркнутый текст. А здесь неперечёркнутый. А дальше весь параграф, допустим опять должен быть перечёркнутый.

То есть все фрагменты в параграфе, которые должны быть перечёркнуты, нужно индивидуально заключать в ...? И если я назначу для всего параграфа перечёркивание (как в своём первом сообщении), то потом не смогу избавиться от него в отдельных местах этого параграфа? И в каких случаях тогда нужен text-decoration: none? В каких случаях он сможет отменить декорирование текста?

</body>

</html>

Edited June 11, 2011 by 9190

Gaspode · June 11, 2011

Сделали бы так, чтобы все наследовались, не было бы путаницы и таких нюансов?

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

Вот так оптимально?

Да. Больше скажу, это логично.

chikadesign · June 12, 2011

И в каких случаях тогда нужен text-decoration: none? В каких случаях он сможет отменить декорирование текста?

Я отменяю декорирование текста, когда требуется отменить это правило у тех элементов, которые по умолчанию имеют это свойство. Здесь можно посмотреть какие правила у элементов по умолчанию. Например, бывает так, что не хотелось бы чтоб под элементом <a> было подчеркивание, тогда я применяю для этого элемента text-decoration: none.

June 13, 2011

chikadesign, спасибо. Вроде бы понял.

гляньте вот это

<style>
   p { text-decoration: line-through; }
   span { text-decoration: underline; }
   i { text-decoration: overline; }
</style>
</head>
<body>
   <p>раз <span>два <i>три</i> два</span> раз</p>
</body>

Если прокомментировать этот пример, какие выводы нужно сделать? То есть если бы этот text-decoration наследовался, то "два" имели бы только нижнее подчёркивание, а "три" только надстрочное? Или я неправ? Очень хочу понять логику этого правила наследования, но сейчас уже еле соображаю.

Вот, на основе вашего примера применил наследующий стилевой атрибут text-transform:

<html>
<head>
<style> 
   p { text-transform: uppercase; } 
   span { text-transform: capitalize; } 
   i { text-transform: lowercase; } 
</style> 
</head> 
<body> 
   <p>раз <span>два <i>ТРИ</i> два</span> раз</p> 

</body>
</html>

Edited June 13, 2011 by 9190

June 13, 2011

Что-то путаница какая-то. Здесь написано про наследование следующее:

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

И взять вышеприведённый пример:

<html>
<head>
<style> 
   p { text-decoration: line-through; } 
   span { text-decoration: underline; } 
   i { text-decoration: overline; } 
</style> 
</head> 
<body> 
   <p>раз <span>два <i>три</i> два</span> раз</p> 

</body>
</html>

Получается тоже самое. Зачёркивание для параграфа наследуется (или переносится) и на span (помимо заданного нижнего подчёркивания наследуется перечёркивание от тега . А слово "три" так и вообще унаследовало от родительских элементов и перечёркивание, и нижнее подчёркивание. Так в чём разница-то?

Sign In

Не пойму поведение стилевого атрибута text-transform

Question

9190

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Gaspode

Link to comment

Share on other sites

9190

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

chikadesign

Link to comment

Share on other sites

9190

Link to comment

Share on other sites

9190

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information