Академический Документы
Профессиональный Документы
Культура Документы
Cuando se definen los estilos en un archivo externo (.css), se debe llamarlo desde el encabezado de la página:
<link rel=stylesheet href="style.css" type="text/css">
Con esta opción no se pueden sustituir en ningún caso, los estilos definidos en el propio documento. Si queremos
hacerlo, nos veremos obligados a usar la sentencia:
<style type=”text/css”>
@import URL(“misestilos.css”);
</style>
Estilo aplicado directamente a una etiqueta DIV (a un bloque de texto) en el cuerpo del documento
<DIV STYLE="font-size:18px; font-family:arial; color:red">
Este texto tiene color rojo
</DIV>
El tag <SPAN> es uno de los nuevos tags que se han agregado al HTML para poder manejar y aplicar estilos, este tag
se usa para marcar bloques de texto. El tag <SPAN> por si mismo no tiene ningún efecto, hasta que se usa alguno de
sus atributos, la siguiente tabla muestra esos atributos.
Atributo Valor Ejemplo Significado
id Una palabra que identifique <SPAN id="rojillo"> En este ejemplo se asigna el estilo llamado
el nombre de un estilo "rojillo" .
class Una palabra que de nombre <SPAN class="describe"> En este ejemplo se identifica como miembro
a una clase de estilo. de la clase "describe" a cierto bloque de texto
style Diversos atributos en formato <SPAN style="color:red; text- En el ejemplo anterior se aplica directamente
CSS align:center;"> un estilo a cierto bloque de texto.
Los atributos "id" y "class" no son exclusivos del tag <SPAN>, se pueden usar el mayoría de los tags del HTML, el
atributo "style" también se puede usar en la mayoría de los tags.
<STYLE>
#mi_estilo{color:red; text-align:left;}
</STYLE>
Luego se aplica el estilo en el documento.
<SPAN id="mi_estilo">Este párrafo usa un estilo definido</SPAN>
Como se puede ver se define el estilo en la hoja de estilo y posteriormente se debe aplicar a través de un atributo "id"
en cualquier tag solo una vez. A continuación se muestra otro ejemplo:
<HTML>
<HEAD>
<TITLE>Otro estilo</TITLE>
<STYLE type="text/css">
<!--
BODY{background-color:gray;}
#estilouno{color:navy; text-align:center;}
#estilodos{color:red; text-align:right;}
#estilotres{color:blue;}
-->
</STYLE>
</HEAD>
<BODY>
<SPAN id="estilouno">Este texto esta definido usando un estilo</SPAN>
<DIV id="estilodos">Este texto también esta definido usando un estilo.</DIV>
<P id="estilotres">Este texto también.</P>
</BODY>
</HTML>
Agrupar estilos
Por último, se pueden agrupar distintos parámetros. Podríamos hablar de tres casos: cuando son los mismos, los de
texto y los de márgenes.
Si se quiere aplicar los mismos atributos a varias directivas.
H1, H2, H3 {font size: 15pt; color: blue}
Agrupar parámetros de texto:
P {font-weight: bold; font-size: 13pt; line-height: 16pt; font-family: Arial, Helvetica;}
P {font: bold 13pt/16pt Arial, Helvetica;}. El orden es importante: font-weight y font-style antes que los demás.
Agrupar parámetros de márgenes:
BODY {margin-top: 20 px; margin-right: 10px; margin-left: 10px}
BODY {margin: 20px 10px 0px 10px} El orden es importante: superior, derecho, inferior e izquierdo.
Pseudoclases y pseudoelementos
Se trata de clases y de elementos ya predefinidos por el navegador. Las pseudoclases actuales son:
• :link: representa cómo se verán los enlaces
• :active: representa cómo se verán los enlaces activos
• :visited: representa cómo se verán los enlaces ya visitados
• :hover: representa como se verán los enlaces cuando el puntero del mouse pasa encima (sólo IE).
Ejemplos y ejercicios CSS 4
Actualmente, sólo la etiqueta <A> puedo hacer uso de estas pseudoclases (a:link{definicion_de_estilo}. Si queremos
definir variantes para las pseudoclases, la sintáxis será: A.clase:pseudoclase{definicion_de_estilo}. Por ejemplo:
A.bonito:link{text-decoration:none}, para hacer vínculos sin subrayado.
Los pseudoelementos actuales son:
• :first-line: la primera línea de un bloque de texto (un párrafo, un div, ...)
• :first-letter: la primera letra de un elemento texto. Por ejemplo, para hacer capitulares.
La sintaxis será: elemento:pseudoelemento{definicion_de_estilo}. Por ejemplo: P:first-letter{font-size:200%}, para hacer
que la primera letra de cada párrafo sea de tamaño doble.
Propiedades CSS
Familia de fuente (font-family)
Sintaxis: font-family: nombre-familia | familia-genérica
Posibles valores: nombre-familia
Cualquier nombre de familia. Como no todos los ordenadores tendrán las familias instaladas, se pueden poner varias
alternativas separadas por comas
Valor por defecto: La fuente por defecto
Se aplica a: Todos los elementos
P { font-family: "New Century Schoolbook", Times, serif }
Las hojas de estilo reconocen 5 categorías de fuentes genéricas:
• Serif El término se traduce por "gracias" y es aconsejable para largas secciones de texto. Dos casos típicos de
fuente serif son times new roman o garamond
<STYLE>
BODY { font-family:serif }
</STYLE>
• Sans Serif Típicos los tipos arial y helvética
<STYLE>
BODY { font-family:"sans serif" }
</STYLE>
• Cursivas Tipos en cursiva que imitan la caligrafía.
<STYLE>
BODY { font-family:cursive }
</STYLE>
• Fantasy Caracteres decorativos como, por ejemplo, comic sans
<STYLE>
BODY { font-family:fanct }
</STYLE>
• Monospace Estas fuentes tienen como característica la de ocupar un espacio idéntico. Los otros caracteres, sin
embargo, ocupan un espacio por letra proporcional a la misma. Una clásica fuente es courier.
<STYLE>
BODY { font-family:monospace }
</STYLE>
Fuente (font)
Sintaxis: font: valor
Posibles valores: font-style || font-variant || font-weight || font-size /line-height || font-family
Valor por defecto: Ninguno
Se aplica a: Todos los elementos
Ejemplo: P { font: italic bold 12pt/14pt Times, serif }
Especifica un párrafo en negrita, cursiva, Times con un tamaño de 12 puntos y un interlineado de 14 puntos.
La propiedad font es una forma de abreviar propiedades de fuente y de interlineado.
Sangrados (text-indent)
Sintaxis: text-indent: valor
Posibles valores: longitud | porcentaje
Valor por defecto: 0
Se aplica a: Bloques
Ejemplo:
<DIV STYLE="font-family:arial; text-indent: 5em">
Este atributo define la cantidad de espacio (expresada en valores absolutos em o en pulgadas) que se deja
inmediatamente antes de la primera palabra.
</DIV>
Interlineado (line-height)
Sintáxis: line-height: valor
Posibles valores: normal | número | longitud | porcentaje
Valor por defecto: normal
Se aplica a: Todos los elementos
Ejemplos y ejercicios CSS 7
Márgenes
Sintaxis: margin-top, margin-right, margin-top, margin-bottom, margin: valor
Posibles valores: longitud | porcentaje | auto
Valor por defecto: 0
Se aplica a: Todos los elementos
Ejemplo:
BODY { margin-top: 0 }
BODY { margin: 5em } /* todos los márgenes de 5em */
P { margin: 2em 4em } /* margen superior e inferior de 2em, e izquierdo y derecho de 4em */
DIV { margin: 1em 2em 3em 4em } /* margen superior de 1em, derecho de 2em, inferior de 3em, e izquierdo de 4em */
La propiedad margin permite definir todos los márgenes de una sola vez si se desean uniformes, o poner 4 valores
separados por espacios que corresponderán a los márgenes superior, derecho, inferior e izquierdo, respectivamente.
<H2 style="margin: 1em 2em 3em 10em ">Este texto es de color rosso y tiene margenes</H2>
Separaciones
Sintaxis: padding-top, padding-right, padding-bottom, padding-left, padding: valor
Posibles valores: [ longitud | porcentaje
Valor por defecto: 0
Se aplica a: Todos los elementos
Ejemplo: BLOCKQUOTE { padding: 2em 4em 5em }
La propiedad padding permite definir el espacio que habrá entre un elemento y su margen de una sola vez si se desean
uniformes, o poner 4 valores separados por espacios que corresponderán a los espaciados superior, derecho, inferior e
izquierdo, respectivamente.
<H2 style="padding: 2em 4em 5em ">Este texto es de color rojo y espaciado con su margen</H2>
Es posible usar las medidas estándar (pulgadas, centímetros, puntos, píxel, etc.) o valores porcentuales:
BODY { padding-top: 10pt; padding-right; 10px; padding-bottom: 110%; padding-left: 2in }
BODY { padding: 10pt 10px 110% 2in }
Bordes
Sintaxis: border-top, border-right, border-bottom, border-left, border: valor
Posibles valores: <border-width> || <border-style> || <color>
Valor por defecto: No definido
Se aplica a: Todos los elementos
H2 { border: groove 3em }
A:link { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active { border: thick double red }
La propiedad border permite definir de una sola vez varias características de los bordes. Si se quiere sólo especificar los
de un border habrá que usar el respectivo.
Anchura (width)
Sintaxis: width: valor
Posibles valores: longitud | porcentaje | auto
Valor por defecto: auto
Se aplica a: Elementos de bloque
<p style="width: 300px"> El veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz
gasu, el veloz gasu, el veloz gasu. </p>
<input type="button" value="Botón" name="B3" style="width: 10em">
Altura (height)
Sintaxis: height: valor
Posibles valores: longitud | auto
Valor por defecto: auto
Se aplica a: Elementos de bloque. La altura afecta a todo el bloque.
<p style="width: 300px; height:100px"> El veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz
gasu, el veloz gasu, el veloz gasu, el veloz gasu. </p>
Alineación (float)
Sintaxis: float: valor
Posibles valores: left | right | none
Valor por defecto: none
Se aplica a: Todos los elementos
Esta propiedad permite hacer que el texto contornee el bloque.
<p style="width:350px"> El veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu, el veloz gasu,
<img border="0" src="allah.gif" width="121" height="120" style="float: right ">el veloz gasu, el veloz gasu, el veloz gasu,
el veloz gasu. </p>
Clear
Sintaxis: clear: valor
Posibles valores: none | left | right | both
Valor por defecto: none
Se aplica a: Todos los elementos
Permite especificar donde se puede o no hacer flotar elementos. La zona especificada NO tendrá elementos, se quedará
vacía.
Display
Sintaxis: display: valor
Posibles valores: block | inline | list-item | none
Valor por defecto: block
Se aplica a: Todos los elementos
Permite determinar como se ha de visualizar un elemento en la página. Da lugar a que el elemento aparezca en un
nuevo cuadro, saltando de línea (block), en la misma línea (inline) o saltando y con un topo de lista (list-item).
Color
Sintaxis: color: color
Valor por defecto: Depende del navegador. Normalmente negro
Se aplica a: Todos los elementos
H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }
Para evitar problemas conviene definirlo junto con el background.
Fondo
Sintaxis: background: valor
Posibles valores: <background-color> || <background-image> || <background-repeat> || <background-attachment> ||
<background-position>
Valor por defecto: No definido
Se aplica a: Todos los elementos
BODY { background: white url(http://www.htmlhelp.com/foo.gif) }
TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right }
!Important
Indica que la regla marcada como importante prevalezca sobre las demás
<style>
P {color:red!important}
</style>
<p style=”color:green”>texto de color rojo>/p>
Ejemplos y ejercicios CSS 11
Texto vertical
Junto con CSS3 llegan nuevos atributos, el único explorador en soportarlo es Internet Explorer.
writing-mode, que permite enderezar un texto en dirección vertical.
<p style="writing-mode: tb-rl; filter: flipv fliph">texto vertical</p>
Algunos ejemplos:
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=0)"> (Box in)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=1)"> (Box out)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=2)"> (Circle in)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=3)"> (Circle out)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=4)"> (Wipe up)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=5)"> (Wipe down)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=6)"> (Wipe right)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=7)"> (Wipe left)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=8)"> (Vertical blinds)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=9)"> (Horizontal blinds)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=10)"> (Checkerboard across)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=11)"> (Checkerboard down)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=12)"> (Random dissolve)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=13)"> (Split vertical in)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=14)"> (Split vertical out)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=15)"> (Split horizontal in)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=16)"> (Split horizontal out)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=17)"> (Strips left down)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=18)"> (Strips left up)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=19)"> (Strips right down)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=20)"> (Strips right up)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=21)"> (Random bars horizontal)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=22)"> (Random bars vertical)
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=23)"> (Random)
Opacity
La propiedad opacity funciona tanto en Internet Explorer como en Firefox, se puede aplicar en capas, imágenes,
formularios, etc…
IE:
filter: alpha(opacity=50)
Firefox:
opacity: .5
Ejemplos y ejercicios CSS 14
Degradado
El filtro Alpha Channel, capaz de aclarar con efecto degradado a cualquier objeto de nuestra página.
Para que Alpha Channel funcione correctamente hay que definir algunas propiedades:
• Width
• Height
• Background
• Filter
Width y Height definen el área en donde Alpha Channel va a actuar.
Background contendrá el color que predominará en el degradado.
Filter contiene las propiedades que le dan vida al efecto que queremos lograr.
Filter:Alpha([Opacity], [FinishOpacity], [Style], [StartX], [StartY], [FinishX], [FinishY])
Opacity: Determina cuan opaco es el color predominante en el comienzo del degradado.
FinishOpacity: Determina cuan opaco es el color predominante en el final del degradado.
Style: Determina que efecto degradé vamos a utilizar.
StartX, StartY, FinishX, FinishY: Determinan si el degradé es horizontal o vertical.
Para lograr un fondo de página con Alpha Channel puedes copiar el siguiente ejemplo:
<html>
<head>
<style type="text/css">
body {margin:0; background:#0000ff}
#body {background:red;width:100%; height:100%; filter:Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0,
StartY=0, FinishX=0, FinishY=100%)}
</style>
</head>
<body>
<div id="body"></div>
</body>
</html>
<div>El navegador visualiza el cursor con la clásica cruz (que podría ser también una mira) <div style="FONT-SIZE:
12px; CURSOR: crosshair; COLOR: gray; FONT-FAMILY: arial"><b>PARA PROBAR, PASA POR AQUÍ EL
RATÓN</b></div></div>
<a href="http://usuarios.lycos.es/leonsinho" style="CURSOR:help">página del webmaster</a>
Colocación dinámica
Los documentos HTML se colocan dentro de la página según un esquema de flujo de datos. Esto significa que se parte
del margen superior izquierdo del documento y cada elemento se coloca en base al anterior, sin posibilidad de
superponer objetos. Las especificaciones de las CSS-P (CSS positioning) permiten, sin embargo, tres tipos distintos de
colocación:
• estática: se trata de la colocación predefinida por el navegador, es decir la tradicional de HTML, por la que cada
elemento se coloca según el flujo de datos del documento;
• absoluta: este tipo de colocación permite abstraer la CSS del flujo de datos, permitiendo su colocación en cualquier
punto de la página de manera completamente independiente de los demás elementos, los cuales pueden además
superponerse por encima o por debajo.
• relativa: dicha colocación no sale del flujo de datos ni produce ninguna modificación respecto a los elementos
colocados de manera estática. Asume características propias de la colocación dinámica cuando se impostan las
propiedades left y right, que mueven el elemento a la izquierda y arriba del que lo precede.
La colocación absoluta y relativa permiten a los elaboradores sistematizar con precisión elementos en el documento,
superponerlos y, mediante los script, moverlos.
He aquí un ejemplo de colocación absoluta con uso de las propiedades top y left:
<DIV STYLE="position:absolute; top:100px; left:100px">
<IMG SRC=" firefox.png" border=0>
</DIV>
Las medidas se expresan en píxel (px), pero se pueden expresar también con otros valores: puntos (pt), centímetros
(cm), pulgadas (in), etc. Todas hacen referencia al margen superior izquierdo.
El ejemplo que consideramos crea una hoja de estilo con colocación absoluta (position:absolute) distanciada del margen
superior e izquierdo de 100 píxel. Todo lo que se encuentra dentro de la CSS (la imagen elemento01.gif) se colocará de
esta manera.
Para comprender la diferencia práctica entre colocación absoluta y relativa, pongamos otro ejemplo. Se trata de un
sencillo texto sin ningún tipo de formato, que el documento interpreta como flujo de elementos. Dentro de este texto,
agregamos una colocación relativa de las palabras "mucho material", con una distancia del elemento a la izquierda más
cercano de 10 píxel y 10 píxel hacia abajo:
En tripod Leonsinho puede encontrar <SPAN STYLE="position:relative; top:10px; left:10px"><B>mucho
material</B></SPAN> : Decenas de tutorialiales de diferentes temas.
Hemos usado la marca SPAN en lugar de DIV ya que esta última es más apropiada para secciones de texto de una
cierta envergadura, mientras que la primera se adapta mejor a frases breves como ésta. Otra consideración se refiere al
salto de línea que DIV impone a los elementos.
Otros parámetros que pueden agregarse son width y height que establecen, respectivamente, la anchura en horizontal
y la altura en vertical de la capa. También en este caso pueden usarse indiferentemente las medidas permitidas por las
hojas de estilo:
<DIV STYLE="position:absolute; top:300px; left:300px; width:150px; height:150px">
Otros parámetros que pueden agregarse son width y height que establecen, respectivamente, la anchura en horizontal
y la altura en vertical de la capa
</DIV>
La propiedad visibility determina la visibilidad de un elemento. Puede ser hidden o visible
<DIV STYLE="position:absolute; top:100px; left:100px; width:150px; height:150px; visibility:hidden">
<IMG SRC="firefox.png" border=0>
</DIV>
hidden hace invisibles los elementos, mientras visibile los hace visibles:
<DIV STYLE="position:absolute; top:100px; left:150px; width:200px; height:150px; visibility:visible">
<IMG SRC="firefox.png" border=0>
</DIV>
Se ha dicho al inicio que las CSS-P permiten superponer imágenes, texto y elementos de unos y otros. La jerarquía con
la cual se superponen dichos elementos depende, si no se establece de otra forma, de la colocación en el código HTML.
Un elemento colocado detrás de otro se superpondrá a éste, como en el ejemplo que sigue
<DIV STYLE="position:absolute; top:30px; left:100px; width:200px; height:200px; visibility:visible">
<IMG SRC="elemento01.gif" border=0>
</DIV>
<DIV STYLE="position:absolute; top:150px; left:150px; width:200px; height:200px; visibility:visible">
<IMG SRC="elemento02.gif" border=0>
</DIV>
Ejemplos y ejercicios CSS 16
Es posible modificar como se superponen las capas mediante la propiedad z-index. Esta propiedad define el orden
gráfico de los elementos mediante valores numéricos. El elemento principal se indica como valor positivo "1", mientras
los otros, que están en posición inferior, lo hacen con valor negativo "-1". Retomando el ejemplo precedente y dejando
inalterado el orden jerárquico, es posible superponer el segundo elemento al primero gracias a la propiedad z-index:
<DIV STYLE="position:absolute; top:30px; left:100px; width:200px; height:200px; visibility:visible z-index:1">
<IMG SRC="elemento01.gif" border=0>
</DIV>
<DIV STYLE="position:absolute; top:150px; left:150px; width:200px; height:200px; visibility:visible z-index:2">
<IMG SRC="elemento02.gif" border=0>
</DIV>
La propiedad overflow permite gestionar, mediante el uso de scroller, los contenidos de los documentos que sobrepasan
el área indicada con height y width. Para ello, es necesario que la propiedad overflow este en "scroll" y no en "hidden".
En este segundo caso, de hecho, los elementos se visualizan con los límites del tamaño del área de recorte pero sin el
scroller lateral:
<DIV STYLE="position:absolute; overflow:scroll; float:left; top:10px; left:10px; width:150px; height:100px">
HTMLpoint es el sitio italiano de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de
Javascript, de applet Java, de demo para Dynamic HTML.
</DIV>
<DIV STYLE="position:absolute; overflow:hidden; float:left; top:150px; left:10px; width:150px; height:100px">
HTMLpoint es el sitio italiano de web publishing más visitado y con mayor autoridad. Decenas de tutorial, centenares de
Javascript, de applet Java, de demo para Dynamic HTML.
</DIV>
Todos los elementos soportan la colocación estática y relativa; la colocación absoluta sólo los siguientes:
• Applet • IFrame • Select
• Button • IMG • Span
• Div • Input • Table
• Fieldset • Object • Textarea
Con CSS-P podemos obtener títulos con efecto de sombreado usando simple texto en lugar de imágenes. Se crea un
texto asignándole un estilo, un tamaño y una cierta colocación absoluta en la página:
<DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:10px; left:600px; color:black; z-index:1">
CSS
</DIV>
Para el texto se ha usado la fuente impact de tamaño igual a 100 píxel y color negro, distanciado 600 píxel del margen
izquierdo y superior. La propiedad z-index tiene el valor positivo 1. Hasta aquí nada de particular, visto que se trata de un
texto negro sin sombreado. Para insertar la sombra, tenemos que añadir este código:
<DIV STYLE="position:absolute; font-size:100px; font-family:impact; top:15px; left:605px; color:gray; z-index:-1">
CSS
</DIV>
El texto queda del mismo tamaño y con el mismo estilo pero cambia el color (del black precedente al gray actual). La
distancia del estilo del margen superior e izquierdo aumenta respectivamente 5 píxel y la propiedad z-index está
impostada en el valor negativo -1. Todo esto crea el primer texto superpuesto al segundo, el cual al estar distanciado 5
píxel pero ser de igual dimensión, crea un efecto sombreado.
Textscroll
La propiedad Overflow es capaz de generar un scroll cuando el contenido dentro de un elemento excede las
propiedades de su ancho y su alto. Podemos usar la propiedad Overflow si queremos tener un mayor control sobre
nuestras capas. Para que Overflow funcione correctamente hay que definir las siguientes propiedades:
• Background
• Width
• Height
• Overflow
• Visible (opcional)
• Hidden (opcional)
• Auto (opcional)
• Inherit (opcional)
Para generar un scroll en cualquier parte del texto puedes copiar el siguiente ejemplo:
<html><head>
<style type="text/css">
h4 {background: white; width:200px; height:100px; overflow: scroll}
</style>
</head><body>
Ejemplos y ejercicios CSS 17
<h4>Aquí me pongo a cantar al compás de la vigüela, que el hombre que lo desvela una pena extraordinaria, como la
ave solitaria con el cantar se consuela.<br>José Hernández<br><u>El gaucho Martín Fierro</u></h4>
</body></html>
Bisel exterior
¿Cómo aplicar un efecto de bisel en una capa? Para lograr que el efecto funcione hay que definir algunas propiedades:
• Position
• Background
• Width
• Top
• Left
Position contendrá el valor "relativo" que nos permitirá cambiar el valor de Top y Left.
Background será definido en dos oportunidades y contendrá el color de base y el color de sombra.
Width contendrá el ancho de la capa.
Top y Left serán definidos en dos oportunidades y contendrán los valores de posición de la capa base y capa sombra.
Para lograr el bisel exterior puedes copiar el siguiente ejemplo:
<html><head>
<style type="text/css">
body {background:#626262}
#sombra {position:relative; background:black; width:100%; top:-1px; left:1px}
#base {position:relative; background:#D7D7D7; top:-1px; left:-1px;}
</style>
</head><body>
<div id="sombra">
<div id="base">
bisel exterior
</div>
</div>
</body></html>
CSS y JavaScript
Como cambiar de estilo de una celda utilizando css y algo de javascript.
Primero definimos dos estilos; el out y el over. El primero se activará cuando estamos fuera de la celda, y el segundo
cuando estamos dentro de ella.
.out {background: red; border: 1px dotted blue; font: normal bold 12px Verdana; width: 100%; height: 30px}
.over {background: blue; border: 1px dotted red; font: normal bold 12px Verdana; color: white; width: 50%; height: 30px}
Ahora solo falta insertar el siguiente código html para que el ejemplo funcione:
<span class="out" ONMOUSEOVER="this.className='over';" ONMOUSEOUT="this.className='out';">CSS y
JavaScript</span>
Shorthand
Como escribir de forma reducida nuestras reglas CSS para que nuestros archivos de estilo tengan menor peso y sean
más entendibles a la hora de una actualización.
Según la W3C hay dos formas de escribir la misma regla de CSS: la estándar y la shorthand. Una es la larga y la otra es
la reducida.
Propiedad Font (fuente)
font-style || font-variant || font-weight || font-size / line-height || familia de fuente
Ejemplo:
P {font: italic normal bold 12px/14pt Verdana, Tahoma, Arial}
Ejemplos y ejercicios CSS 19
Unidades
Unidades de Longitud
El formato de una valor de longitud es un signo opcional + o -, seguido por un número y una unidad de medida sin
espacios; P.ej., 1.3 em no es válido, pero 1.3em sí es válido.
Tipos de unidades relativas:
• em (ems, la altura de la fuente, normalmente la altura de las mayúsculas)
• ex (la mitad de la altura de la fuente, normalmente la altura de la letra "x")
• px (pixels, relativos a la resolución del lienzo)
Tipos de unidades absolutas:
• in (pulgadas; 1in=2.54cm)
• cm (centimetros; 1cm=10mm)
• mm (milimetros)
• pt (puntos; 1pt=1/72in)
• pc (picas; 1pc=12pt)
Unidades de porcentaje
Un valor de porcentaje está formado por un signo opcional + o -, seguido por un número y % sin espacios; P.ej., 3%.
Unidades de color
Un valor de color es un nombre de color o una descripción numérica RGB.
Los valores numéricos RGB se pueden dar de 4 maneras:
• #rrggbb (P.ej., #00cc00)
• #rgb (P.ej., #0c0)
• rgb(x,x,x) donde x es un número entero entre 0 y 255 inclusive (P.ej., rgb(0,204,0))
• rgb(y%,y%,y%) where y es un número entre 0.0 y 100.0 inclusive (P.ej., rgb(0%,80%,0%))
Los ejemplos anteriores especifican todos el mismo color.
URLs
Los valores de URL tienen la sintaxis url(nombre), en donde nombre es la URL. La URL puede estar escrita,
opcionalmente, entre comillas sencillas (') o dobles (").
Paréntesis, comas, espacios, comillas sencillas o dobles que queramos que sean escritas literalmente dentro de la URL
deberán ser precedidas de una contrabarra.
BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url( stripe.gif ) }
BODY { background: url("stripe.gif") }
BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */