Блог

Главная - Вопросы по программированию - оформление каждой строки внутри pre с помощью css

оформление каждой строки внутри pre с помощью css

#html #css

#HTML #css

Вопрос:

у меня есть HTML-код

 <pre>
line 1
line 2
line 3
</pre>

как я могу придать некоторый css-стиль «строкам» внутри <pre> , не добавляя в него другую оболочку?

я имею в виду что-то вроде

 pre lines{ color: red}

у меня возникли трудности с поиском css-селектора для этого. Заранее спасибо.

Комментарии:

1. Что именно вы подразумеваете под «линиями»? Почему вы не можете придать цвет самому pre?

2. @Pekka: Что он имеет в виду, так это придать другой стиль каждой строке

3. @Shakti Я не уверен в этом — пример не ясен

4. Похоже, Ли хочет обрабатывать строки как отдельные разделы или около того, например, раскрасить их в полосы зебры или поместить в коробки… Я не знаю никакого способа сделать это без внутренних контейнеров…

5. Да, если вы хотите оформить каждую строку по отдельности, это невозможно в чистом HTML / CSS. Содержимое контейнера представляет собой текстовый узел, к нему нельзя обратиться специально для оформления.

Ответ №1:

Вы можете использовать этот маленький трюк CSS3 с градиентами. Это автоматически создаст эффект «зебры» без дополнительных интервалов:

 background: #555;
background-image: -webkit-linear-gradient(#555 50%, #505050 50%);
background-image:    -moz-linear-gradient(#555 50%, #505050 50%);
background-image:     -ms-linear-gradient(#555 50%, #505050 50%);
background-image:      -o-linear-gradient(#555 50%, #505050 50%);
background-image:         linear-gradient(#555 50%, #505050 50%);
background-position: 0 0;
background-repeat: repeat;
background-size: 4.5em 4.5em;

Попробуйте другой CSS «line-height», чтобы текст отображался правильно.

смотрите: http://www.dte.web.id/2012/03/css-only-zebra-striped-pre-tag.html#.UUoV6lugkoM

Ответ №2:

Если вы хотите добавить цвет ко всем строкам в pre, просто добавьте

 pre {color: red;}

Но если вы хотите добавить цвет к некоторым строкам, вам понадобится дополнительная разметка:

 <pre>
<span>Line1</span>
line2
<span>Line3</span>
</pre>

pre span {color: red;}