Top CSS

1.
INSERCCIN DE CODIGOS CSS
1.Pequeas partes de una pagina
Para definir estilos en secciones reducidas de una pagina utilizamos la etiqueta

<SPAN>.Con su atributo style se indican las caractericticas del estilo.
Sintaxis
texto 1 <SPAN style=atributo:valor> texto 2 </SPAN> texto 3
----------------------------------------------------------------------------------------------------------
<p>
Esto es un parrafo en varias palabras <SPAN style=color:green>
en color verde </SPAN> en color verde resulta muy facil.
</p>
-----------------------------------------------------------------------------------------------------------
2.En una etiqueta de HTML
El codigo se aplicara al texto que esta dentro de la etiqueta.Solo afecta a la etiqueta en que
se defina.
Sintaxis
<etiquetaHTML style=<atributo:valor> texto </etiquetaHTML>
------------------------------------------------------------------------------------------------------------
<p style=font-family:Arial,Helvetica>Hola</p>
-----------------------------------------------------------------------------------------------------------
3.En una parte de la pagina
Con la etiqueta <DIV> definimos secciones de una pagina y le aplicacamos estilos con el
atributo style.
Las caractericticas definidas afectan a todas las etiquetas que se encuentran en el

bloque (<div> </div>)
Sintaxis
<div style=atributo:valor>
<etiquetaHTML> texto 1 </etiquetaHTML>
<etiquetaHTML> texto 2 </etiquetaHTML>
..
<etiquetaHTML> texto n </etiquetaHTML>
</div>
---------------------------------------------------------------------------------------------
<div style=color:#000099;font-weight:bold>
<h3> Estas etiquetas van en azul </h3>
<p>
Seguimos dentro del DIV ,luego permanecen los estilos
</p>
</div>
-------------------------------------------------------------------------------------------------
4.En una pagina HTML.
Se usa la etiqueta <style> en la cabecera (head) del documento.El codigo escrito afecta a
todo el codigo HTML
sintaxis
<style type=text/css>
codigo CSS
</style>
--------------------------------------------------------------------------------------------------------
p{
color:red;
}
</style>
-------------------------------------------------------------------------------------------------------
En navegadores antiguos sin soporte CSS se ignorara la etiqueta style pero no el contenido
de esta, que sera considerado un texto normal y se mostrara al principio de la pagina.
Para evitar este efecto en navegadores antiguos y hacer que se ignore el codigo CSS se
colocara el texto CSS entre comentarios.
<!
etiquetaHTML
{
codigoCSS
}
-->
</style>
Los navegadores modernos ignoraran el comentario y los navegadores viejos si le

haran caso y se saltaran el codigo.
5.Estilo definido para todo un sitio WEB
Creamos un archivo donde solo se colocan las declaraciones de estilos y enlazando todas
las paginas del sitio con ese archivo
El proceso para incluir estilos con un fichero externo es :
i. Crear el fichero con la delcaracin de estilos:
Es un fichero de texto que solo puede contener sintaxis CSS (seria erroneo incluir
codigo HTML ).Puede tener cualquier extension pero se suele usar .css para aclara que
tipo e archivo es .
ii. Se enlaza la pagina web con la hoja de estilos:
Para ello se usa la etiqueta <LINK>.

La etiqueta <LINK> tiene los siguientes atributos
rel=STYLESHEET indica que el enlace es con una hoja de estilos

type=text/css indica que el archivo es de text , en sistaxis CSS
href=nombreArchivo.css indica el nombre del fichero de estilos.
( Debe incluirse el path)
El archivo de estilos debe tener extension .css y solo contendra codigo CSS.Para que una
pagina dada utilice los estilos definidos en le archivo de estilos incluimos el siguiente codigo en la
cabecera (<head>) de la pagina.
<link href=ruta rel=stylesheet type=text/css>
Otra forma de incluir un archivo externo con estilos es usando la etiqueta <style> con la
etiqueta @import . Tambien debe incluirse en el 'head'
@import URL '/path/estilos.css'
</style>
(Observar que se usan comilla simples para el path)
Esta ultima posibilidad no se puede emplear con Netscape Navigator 4.x.
2.ESCRIBIR CODIGO CSS
El formato que seguimos es
etiquetaHTML {
codigo1deformatoCSS:valor;
codigo2deformatoCSS:valor;
---
}
Esto se debe hacer para cada etiqueta .Cada formato debe terminar el ';'CSS no
diferencia mayusculas de minusculas pero es conveniente escribirlo en minusculas.
3.REGLAS DE ESTILOS
Una regla de estilos son las declaraciones de los formatos que aplicamos a los elementos
html.
Una regla de estilo tiene dos componentes.
El selector:Selecciona el elemento sobre el que actuara la regla (por ejemplo una

etiqueta).
La declaracion:Establece la propiedad y el valor que se aplicara al elemento
Selector { propiedad:valor ; }
Selector {propiedad1:valor1 ; propiedad2:valor2; }
........................................................................................................................................................
El selector identifica los elementos de HTML a los que se le aplicara la regla.

Selector es el nombre de un elemento HTML,por ejemplo <p>, el nombre de un
metodo o el atributo class
Las propiedades definen lo que queremos hacer con los elementos seleccionados
Podemos cambinar el color,fondo,posicion,...
Los valores que podemos darle dependen de la propiedad
Podemos agrupar selectores , cuando los pares 'propiedad :valor ' son iguales
selector1,selector2 { propiedad:valor}
Los tres selectores mas basicos son:
etiquetaHTML {propiedad:valor;}
.nombreClase {propiedad:valor ; } (observar el '.' antes de 'nombreClase' )
#nombreAtributoID { propiedad:valor } (observar el '#' antes del nombre del 'id'
4.TIPOS DE SELECTORES
Existe cinco tipos de selectores o criterios de seleccin para elegir los elementos de una regla.
1. Selector por tipo o nombre del elemento.
2. Selector por contexto del elemento
3. Selector por clase o identificdor del elemento.
4. Selector por pseudo-clase del elemento.
5. Selector por los atributos del elemento.
6. Selector por pseudo-elementos.
El carcter (*) es un selector universal.Las propiedades afectaran a todos los elementos.
1.Selector por tipo o nombre de elemento
Aplica formato a todos los elementos seleccionados.
EtiquetaHTML { propiedad:valor;}
p {color:red;} Aplicamos el color rojo a todoas las etiquetas de parrafo
2.Selector por el contexto del elemento
Distinguimos los siguientes tipos
I. Ascendente
II. Padre
III. Hermano
I. Ascendente
El ascendente es el elemento que contiene al que se desea formatear.Puede haber mas de un

elemento entre uno y otro
etiquetaContenedora etiquetaContenida { propiedad:valor ; }
--------------------------------------------------------------------------------------------------------------------
Sintaxis CSS | <div>

| <h1><p> Esto es un parrafo </p> </h1>
div p{color:#00FF00;} | </div>
Se formatea de color rojo los elementos p que esten dentro de div
II. Padre
El padre es el elemento que contiene de forma directa al que se desea formatear.
EtiquetaPadre > etiquetaHijo { propiedad:valor ; }
| <div> <------- Padre

div > p {color:red;} | <p> Este es un parrafo </p>
| </div>
III.Hermano
Hermano es el elemento que precede directamente (adyacente) , dentro del mismo

elemento padre , al que se desea formatear.
Usamos el simbolo (+)
EtiquetaHermano + EtiquetaHTML { propiedad:valor;}
------------------------------------------------------------------------------------------------
div + p {color:red; }
-------------------------------------------------------------------------------------------------
3.Selector por clase o identificador.
Permite seleccionar todos los elementos que pertenecen a dicha clase o id. (es el metodo las
utilizado)
Cuando seleccionamos por clase usamos ' .'

Cuando seleccionamos por id usamos '#'
a) Seleccion por id
etiquetaHTML#nombreId { propiedad:valor ; }
b)Seleccion por clase
etiquetaHTML.nombreClase{propiedad:valor ;}
Si se omite el nombre del elemento ( la etiqueta html ) se lecciona a todos los que
pertenecen a esa clase o id (los operadores '#' o '.' deciden si por por clase o id )
Selector de identificador | Selector de clase

|
p#uno{color:red;} | p.dos {color:red;}
----------------------------------------------------------------------------------------------------------------------
4.Selector por la pseudo-clase del elemento
Las pseudo-clases clasifican a los elementos en funcon de los eventos que les haya
ocurrido:cursor del raton encima,si se ha visitado , si el usuario esta pasando por encima con el
cursor del raton, etc.
Los elementos mas utilizados son los referentes a los vinculos (etiqueta 'a' ) y al primer hijo
(:first-child)
Pseudo-clase Significado
:link Vinculos que todvia no se han visitado
:visited Vinculos ya visitados
:hover Vinculos sobre los que esta el cursor del raton.
:active Vinculos sobre los que se esta haciendo clic
:focus Vinculos que estan siendo seleccionados
mediante el teclado.
---------------------------------------------------------------------------------------------------------------------

Top CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Top CSS

Uploaded by

Copyright:

Available Formats

1.

INSERCCIN DE CODIGOS CSS

1.Pequeas partes de una pagina

Para definir estilos en secciones reducidas de una pagina utilizamos la etiqueta

texto 1 <SPAN style=atributo:valor> texto 2 </SPAN> texto 3

2.En una etiqueta de HTML

<etiquetaHTML style=<atributo:valor> texto </etiquetaHTML>

Las caractericticas definidas afectan a todas las etiquetas que se encuentran en el

4.En una pagina HTML.

Los navegadores modernos ignoraran el comentario y los navegadores viejos si le

5.Estilo definido para todo un sitio WEB

El proceso para incluir estilos con un fichero externo es :

i. Crear el fichero con la delcaracin de estilos:

ii. Se enlaza la pagina web con la hoja de estilos:

Para ello se usa la etiqueta <LINK>.

rel=STYLESHEET indica que el enlace es con una hoja de estilos

<link href=ruta rel=stylesheet type=text/css>

(Observar que se usan comilla simples para el path)

Esta ultima posibilidad no se puede emplear con Netscape Navigator 4.x.

2.ESCRIBIR CODIGO CSS

El formato que seguimos es

Una regla de estilo tiene dos componentes.

El selector:Selecciona el elemento sobre el que actuara la regla (por ejemplo una

El selector identifica los elementos de HTML a los que se le aplicara la regla.

Los tres selectores mas basicos son:

1.Selector por tipo o nombre de elemento

Aplica formato a todos los elementos seleccionados.

p {color:red;} Aplicamos el color rojo a todoas las etiquetas de parrafo

2.Selector por el contexto del elemento

Distinguimos los siguientes tipos

El ascendente es el elemento que contiene al que se desea formatear.Puede haber mas de un

etiquetaContenedora etiquetaContenida { propiedad:valor ; }

Sintaxis CSS | <div>

Se formatea de color rojo los elementos p que esten dentro de div

El padre es el elemento que contiene de forma directa al que se desea formatear.

EtiquetaPadre > etiquetaHijo { propiedad:valor ; }

| <div> <------- Padre

Hermano es el elemento que precede directamente (adyacente) , dentro del mismo

EtiquetaHermano + EtiquetaHTML { propiedad:valor;}

3.Selector por clase o identificador.

Cuando seleccionamos por clase usamos ' .'

b)Seleccion por clase

Selector de identificador | Selector de clase

You might also like