css programacion

8/16/2019 CSS Programacion

http://slidepdf.com/reader/full/css-programacion 1/29

CSS Conceptos Básicos

CSS son las siglas de "Cascade StyleSheet". Se trata

de una especificación sobre los estilos físicos

aplicables a un documento HTML, y trata de dar laseparación definitia de la lógica !estructura y el

físico !presentación del documento.

La finalidad de las ho#as de estilo es crear unos estilos

físicos, separados de las eti$uetas HTML !en lugar de

como par%metros de las eti$uetas, y aplicarlos en losblo$ues de te&to en los $ue se $uieran aplicar. Lo cua

conllea a una apariencia agradable y propicia la

interactiidad '



CSSAplicación directa en etiquetas

Tenemos arias posibilidades para definir un estilo

una de estas es especificarlo directamente en la

eti$ueta en la $ue $ueremos usarlo(

<etiqueta

STYLE="propiedad1:valor!!!propiedad:valor"# !!!

<$etiqueta#



CSSAplicación directa en etiquetas

ST)L* es el par%metro $ue indica $ue amos a aplica

el estilo definido a continuación a la eti$ueta en la $ue

se encuentra. La definición del estilo son pares(

propiedad : valor

separados por punto y coma.

Propiedad ser% la característica de la eti$ueta $ue

$ueramos modificar !el color, el tama+o de la fuente, e

tipo de letra, ... y valor es el alor $ue $ueremos darle

!color negro, puntos de tama+o de letra, ....



CSSE%e&plo de aplicación directa

-or e#emplo, si tenemos un te&to en negrita y

$ueremos $ue salga con un tama+o de letra / y encolor ro#o, haremos(

La ne'rita que ve&os <B STYLE="(ont)si*e:1

color:red"#es &ás 'rande , está en ro%o<$B#!



CSS



CSS-ede(inición de Etiquetas

-ara esto definiremos estilos globales por medio de

eti$ueta 0ST)L*1 ... 02ST)L*1 como sigue(

0ST)L* T)-*3"te&t2css"1

0455

*ti$ueta, *ti$ueta6 ( 7propiedad(alor8

*ti$ueta9 ( 7propiedad(alor:...:propiedadS(alor8

*ti$ueta/ ( 7propiedad(alor:...:propiedadT(alor8 .Clase ( 7propiedad(alor:...:propiedadT(alor8

22551

02ST)L*1

Su aplicación será entre <.EA/# !!! <$.EA/#

;er e#emplo '



CSSSeparar .T0L de CSS

)a sabemos definir estilos globales, ahora(

<=u> pasaría si $ueremos dotar a todas las p%ginas de

los mismos estilos?

Solución( definir los estilos en un fichero distinto a

documento HTML, y despu>s referenciarlo desde e

propio documento HTML !esto lo haremos con la

siguiente eti$ueta, dentro de la cabecera dedocumento !entre 0H*@A1 ... 02H*@A1(

0LBD E*L3"stylesheet" T)-*3"te&t2css"

HE*F3"GELHo#a.css"1

;er e#emplo '



CSS.erencia de Estilos

*n el con#unto de las eti$uetas HTML podemo

establecer una #erar$uía de eti$uetas $ue contienen otras, para darnos una relación de herencia

-adre 0IJA)1 ... 02IJA)1, referencia a todo el documen

Hi#as !0-1...02-1, 0AB;1...02AB;1, cabeceras, ...

Hi#as de la anterior elementos insertados en línea

!0I1...02I1, 0B1...02B1, [email protected]@1, ....



CSS

&portante(K Gn estilo heredable se hereda a no ser $ue

especifi$uemos lo contrario.

K Se heredar%n a$uellas características $ue no

pongamos, y se aplicar%n a$uellas $ue definamos

para la eti$ueta $ue no tenga la eti$ueta "padre".

.erencia de Estilos

;er e#emplo '



CSSEstilos en (unción del conte2to

Jtro tema a comentar a$uí es la posibilidad de

definir, en lugar de un estilo para una eti$ueta, sin

m%s, es definir un estilo en función del conte&to.

-or e#emplo, es posible $ue solamente $ueramos

$ue el te&to en negrita sea de color erde cuando seencuentre en una celda de una tabla, o $ue sea de

color prpura cuando forme parte de una lista.

;er e#emplo '



CSSClases

Gna clase es una definición de un estilo $ue en princip

no est% asociado a alguna eti$ueta HTML, pero $upodemos asociar, en el documento, a eti$ueta

concretas.

-ara ello, en primer lugar definimos la clase !en el blo$u

de estilos o en la ho#a e&terna como un estilo m%s, d

esta forma(

!ombredelaClase 7propiedad(alor:...:propiedad(al



CSSClases

@hora, para aplicar el estilo de una clase a una eti$ueta

concreta, utiliaremos el par%metro CL@SS como sigue

0eti$ueta CL@SS3"ombredelaClase"1 ... 02eti$ueta

;er e#emplo '



CSSEtiquetas

-ara definir un estilo mediante un BA, usaremos la

siguiente notación !en un blo$ue de estilo o en la

ho#a e&terna(

NombredelBA 7propiedad(alor:...:propiedad(alor8

-odremos definir todos los BA $ue $ueramos, pero

cada BA sólo debe ser asociado a una nica eti$uetaconcreta de la siguiente forma(

0eti$ueta BA3"ombredelBA"1 ... 02eti$ueta1



CSS

OaaScript

Mane#a el elemento

del documento

BA



CSS3seudoclases

Hay ocasiones en las $ue HTML da a algunas

eti$uetas un estilo propio( por e#emplo, los enlaces

aparecen por defecto de otro color y subrayados.*stos elementos son las pseudoclases. -or ahora,

sólo est%n definidas para la eti$ueta 0@1.

Aefinición de estilo para una pseudoclase(

eti$ueta(pseudoclase 7propiedad(alor:...:propiedad(a



CSS3seudoclases

-or e#emplo, si deseamos $ue apareciesen todos los

enlaces sin subrayar, definiríamos los siguientesestilos(

@(linP,@(isited,@(actie 7te&t5decoration(none8

Las pseudoclases pueden usarse de forma con#unta

con las clases, para aplicar ese estilo sólo en casos

concretos, siguiendo la notación(

@.ombreClase(pseudoclase

y tambi>n se pueden usar en función del conte&to.



Estilo con la etiqueta DIV

<STYLE TYPE=″TEXT/CSS″>

DIV.INTRO {COLOR: RED}

</STYLE>

<DIV CLASS=″INTRO″> Contenido de !o"#e </D

CSS

CSS



CSS 3ropiedadesBloque

CSS



CSS3ropiedades

6uentes

CSS



CSS3ropiedades

Te2tos

CSS



CSS3ropiedades

Color , 6ondo

CSS



CSS3ropiedades

Listas



3lantilla



/ise8o utili*ando capas

Las capas ienen a darnos la solución al problema

de poner elementos #usto en la posición $ue

$ueramos, eit%ndonos tener $ue hacer artificios

para obtener el resultado buscado.

Gna capa ser% una parte m%s del documento $ue

puede ser situada en cual$uier posición del mismo,

consiguiendo $ue se solape sobre algunoselementos si es lo $ue necesitamos, adecuando sus

m%rgenes y otras propiedades a lo $ue $ueramos

hacer...



/ise8o utili*ando capas

o recomendable, debido a la inestabilidad a la hora

de interpretar su posición por la naegadores

actuales.

Eecomiendo el uso de los estilos con Ai.



6

css programacion

Documents