Hace que el parrafo con first-line
se vea coloreado
Cuandose pone
P:first-line o Hx:first-line
todos las <P> y <Hx>
herederan los atributos
Ejemplo:
<HTML><HEAD>
<title>Ejemplo de First-Line</title>
<style>
H1:first-line
{color: Navy; font: bold 22px;
text-decoration: underline overline;}
</STYLE></HEAD>
<BODY>
<H1>Linea en verde y subrayado</H1>
Esta otra no se vera en verde ni subrayado.
</BODY></HTML>
Resultado:
Ejemplo de First-Line
Linea en azul oscuro y subrayado
Esta otra no se vera en Azul ni subrayado.
Ejemplo de FIRST-LINE:
<HTML><HEAD>
<TITLE>Ejemplo</TITLE>
<STYLE TYPE="text/css">
H4:first-line { color:green; font-size: 31px; }
</STYLE></HEAD><BODY>
<H4>
first-line first-line first-line
</H4>
</BODY></HTML>
Ejemplo
first-line first-line first-line
Ejemplo con BACKGROUND:
<HTML><HEAD>
<TITLE>Ejemplo</TITLE>
<STYLE TYPE="text/css">
H5:first-line
{
color:Maroon;
font-size: 24px;
background:Olive
}
</BODY></HTML>
<H5> first-line first-line first-line </H5>
</BODY></HTML>
Resultado:
Ejemplo
first-line first-line first-line
P.inicial:first-line:
P se puede cambiar por Hx.
INICIAL se puede cambiar por otra
Ejemplo con P.inicial:first-line:
<HTML><HEAD>
<TITLE>Ejemplo</TITLE>
<STYLE TYPE="text/css">
P.inicial:first-line
{
font-size: 41px;
color:Maroon;
text-transform: uppercase
}
</BODY></HTML>
<P class=inicial>first-line</P>
</BODY></HTML>
Resultado:
Ejemplo
first-line
Forma muy facil de poner la primera letra
<STYLE>
B {color: steelblue; font-size:44px;}
</STYLE>
</B>A</B>lbino
Resultado
Albino
FIRST-LETTER:
Un jemplo:
BODY P:first-letter { color: purple }
(La primera letra de una palabra
que vaya despues de <P>
se colorea en purpura.
Otro ejemplo:
<HTML> <HEAD>
<TITLE>First-Letter</TITLE>
<STYLE type="text/css">
P:first-letter { font-size: 200%;}
P { font-size: 12pt; line-height: 52pt }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD><BODY>
<P>
<SPAN>Cabecera</SPAN>
Parrafos del cuerpo.
</P>
</HTML></BODY>
Un ejemplo:
<html><head><style>
H6 {font-size:18px;}
H6:first-letter {font: bold 240%; color:green;}
</style>
</head><body>
<H6> Primera letra</h5>
<H6> Segunda letra</h5>
</body> </html>
Resultado:
Primera letra
Segunda letra
P.INITIAL:FIRST-LETTER:
Pone en rojo la primera letra de un
parrafo que empiece con el selector
<P> y termine en</P>
P.inicial:first-line:
P se puede cambiar por Hx.
INITIAL se puede cambiar por otra
Ejemplo:
<STYLE>
P.initial:first-letter { color: red }
</STYLE>
<P CLASS=initial>Primer parrafo</P>
<P CLASS=initial>Segundo parrafo</P>
Resultado:
Primer parrafo
Segundo parrafo
First-letter con un selector:
<STYLE TYPE="text/css">
.P:first-letter
{ font:bold 5pc Arial; color: aqua }
</STYLE>
<div class=P>Parrafo de la pagina</div>
Parrafo de la pagina
BODY P:first-letter { color: maroon }
Pone en marron la primera
letra del cuerpo de la
pagina que empiece con la
etiqueta <P>
y termine con </P>
Ejemplo en una pagina:
<html> <head> <title>
Titulo </title>
<STYLE TYPE="text/css">
BODY P:first-letter
{ color: maroon; font: bold 44px arial }
</HEAD> </STYLE>
<BODY>
<P> Primer parrafo</P>
<P> Segundo parrafo</P>
</BODY> </HTML>
Resultado:
Primer parrafo
Segundo parrafo
| | | | |
