Форум Сайтостроение Веб-строительство

Как сделать первую букву другим цветом?

12
W
На сайте с 30.11.2004
Offline
147
wilson
3857

Привет

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

Как сделать я нашел, но при этом идет перевод каретки после слова :( а у меня дальше идет текст и все корявится.

Bor-ka
На сайте с 16.11.2004
Offline
252
Bor-ka
#1

wilson,

в интернете можно найти ответы на 80% вопросов, и на 20%, если правильно задать запрос (с)

http://www.google.ru/search?q=css+%D0%BF%D0%B5%D1%80%D0%B2%D0%B0%D1%8F+%D0%B1%D1%83%D0%BA%D0%B2%D0%B0&ie=utf-8&oe=utf-8&rls=org.mozilla:ru:official&client=firefox-a

dlyanachalas
На сайте с 15.09.2006
Offline
693
dlyanachalas
#2

Можно так: 

<style>

.bukva:first-letter

{

	color: red;

	font-size: 36pt; 

	float:   left;

}  

</style>



...



<div class=bukva>Текст</div>

другой пример: 

<style>

.bukva2:first-letter

{

	color: red;

}  

</style>



...



<span class=bukva2>Текст</span>
W
На сайте с 30.11.2004
Offline
147
wilson
#3
dlyanachalas:
Можно так: 

<style>

.bukva:first-letter

{

	color: red;

	font-size: 36pt; 

	float:   left;

}  

</style>



...



<div class=bukva>Текст</div>


другой пример: 

<style>

.bukva2:first-letter

{

	color: red;

}  

</style>



...



<span class=bukva2>Текст</span>

Оба способа я уже пробывал и они не работают.

Первый делает переход каретки на новую строку. Я писал об этом.

Второй не делает букву другим цветом.

dlyanachalas
На сайте с 15.09.2006
Offline
693
dlyanachalas
#4 


<style>

.bukva:first-letter 

{ 

    display: inline; 

    color: red; 

}   

</style>



<div class=bukva>Текст</div>
W
На сайте с 30.11.2004
Offline
147
wilson
#5
dlyanachalas:

<style>

.bukva:first-letter 

{ 

    display: inline; 

    color: red; 

}   

</style>



<div class=bukva>Текст</div>

display: inline; помогает убрать перевод каретки, но при этом буква не красная :(

Flack
На сайте с 15.06.2005
Offline
28
Flack
#6 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

<head>

    <title></title>

    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />

    <style type="text/css">

        p { 

            font:.8em Tahoma,Helvetica,sans-serif;

            color:#000;            

            }

        p:first-letter {

            font-size:2.2em;

            color:#F00;

            }

    </style>

</head>

<body>

    <p>Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем…</p>

</body>

</html>

IE 5.5+, Opera 9, Firefox 2.

Все окей.

W
На сайте с 30.11.2004
Offline
147
wilson
#7
Flack:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

<head>

    <title></title>

    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />

    <style type="text/css">

        p { 

            font:.8em Tahoma,Helvetica,sans-serif;

            color:#000;            

            }

        p:first-letter {

            font-size:2.2em;

            color:#F00;

            }

    </style>

</head>

<body>

    <p>Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем… Lorem ipsum… долорем-шмолерем…</p>

</body>

</html>


IE 5.5+, Opera 9, Firefox 2.
Все окей.

Те же грабли. Мне нужно пару слов сделать с первой буквой другого цвета внутри абзаца текста. Не первую букву обзаца, как у вас в примере.

Flack
На сайте с 15.06.2005
Offline
28
Flack
#8
wilson:
Мне нужно пару слов сделать с первой буквой другого цвета внутри абзаца текста. Не первую букву обзаца, как у вас в примере.

Только дополнительной разметкой. А вообще вы бы нарисовали, что хочется. Смысл фразы не до конца понятен.

W
На сайте с 30.11.2004
Offline
147
wilson
#9

Вот такое хочу к примеру.

dlyanachalas
На сайте с 15.09.2006
Offline
693
dlyanachalas
#10
wilson:
Вот такое хочу к примеру.

first-letter работает только для блочных элементов, к сожалению. То, что вы хотите чисто css-ом не реализовать.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий