Вы находитесь на странице: 1из 34

Gestin de Datos Dinmicos en Red

CSS

Gestin de Datos Dinmicos en Red Antonio Palma Academia CES

CSS (Hojas de estilo en cascada)

Permiten separar las instrucciones de formato del resto de elementos de una pgina. Consisten en un conjunto de reglas para determinar cmo se muestran en pantalla los elementos de las pginas web.

Gestin de Datos Dinmicos en Red

Pg. 2

Construyendo webs con CSS

El cdigo (X)HTML no deber incluir elementos ni atributos de formato:


<h1align="center">Ejemplo</h1> <palign="justify"> Esteesunejemplodeloquenodebemoshacer: <b>nousarnegrita</b>,ni<i>cursivas</i>, tampocoelementosniatributosdeformato: <fontcolor=red">color</font>,borde,etc. </p>

Gestin de Datos Dinmicos en Red

Pg. 3

Construyendo webs con CSS

El cdigo (X)HTML solamente describir la estructura del documento y sus contenidos, mediante:

encabezados (<h1>, <h2>, ...), prrafos (<p>), contenedores de bloque (<div>), agrupaciones de elementos en lnea (<span>), tablas, etc. combinados con identificadores (id) y clases (class).

El formato se describir de manera separada mediante hojas de estilo en cascada CSS:

Nuestro sitio web tendr un aspecto ms uniforme y consistente. Podremos cambiar la presentacin de las pginas de manera ms sencilla.
Pg. 4

Gestin de Datos Dinmicos en Red

Contenedores <div> y <span>

<div>: permite crear secciones lgicas o divisiones del documento que pueden ser tratadas como un bloque:
<divstyle=width:300px;marginleft:10em;> <h3>Esteeselencabezadodeunbloquediv</h3> <p>Todoloqueaparecedentrodelasetiquetasdiv setratacomounbloque,pudiendodarleformatode maneraconjunta.</p> <p>Veremoscmosehaceestocon<em>CSS</em>. Esmuyfcil.</p> </div>

<span>: para crear bloques ms pequeos de elementos en lnea:


<p>Dentrodeesteprrafomeinteresaresaltar <spanstyle="color:red">estebloque</span> paradiferenciarlodelresto</p>

Gestin de Datos Dinmicos en Red

Pg. 5

Identificadores (id)

Asignan un nombre para identificar de forma nica a un elemento (X)HTML. Su uso es opcional. Dos elementos no pueden llevar el mismo id. Sirven para identificar elementos que sern afectados por estilos (CSS) o scripts (JavaScript)
<divid=identificador1> Estebloquetienecomoatributoidelvalor identificador,demaneraqueluegopodrser referenciadodesdecssparaaplicarleunestilo. </div>

Gestin de Datos Dinmicos en Red

Pg. 6

Clases (class)

Agrupan los elementos HTML por clases o grupos. Su uso es opcional. Un elemento puede pertenecer a varias clases a la vez. Varios elementos pueden pertenecer a la misma clase.
<pclass=introduccion> Esteesunparrafodelaclaseintroduccion </p> <pclass=introduccionimportante> Esteotroademspertenecealaclaseimportante </p>

Gestin de Datos Dinmicos en Red

Pg. 7

Reglas de estilo

Declaracin de los formatos de los elemenos de la pgina web.

Identifica el elemento HTML a seleccionar y la apariencia que se le quiere dar. Selector: qu elementos son afectados Declaracin: pares propiedad/valor

2 partes:

h2{color:yellow;background:black;}
selector

propiedad

valor

propiedad

valor

Gestin de Datos Dinmicos en Red

Pg. 8

Ejemplos de reglas de estilo

Se pueden aadir espacios y saltos de lnea para mejorar la legibilidad:


p{color:blue; backgroundcolor:#412929;}

Comentarios en una hoja de estilo:


img{border:5pxsolidblue;} /*imgenesconbordeazulslidode5pixeles*/ h1{color:blue;}/*encabezadosenazul*/

Gestin de Datos Dinmicos en Red

Pg. 9

Ejemplos de reglas de estilo

Podemos aplicar una regla de estilo a varios elementos diferentes:


h1,h2,h3{ fontweight:bold; fontfamily:arial,verdana,sansserif; color:blue} /*el;finalnoesobligatorio*/

Gestin de Datos Dinmicos en Red

Pg. 10

Ejemplos de reglas de estilo

Se puede aplicar un estilo a un elemento identificado con un nombre (atributo id):


div#identificador1{fontsize:16px;}

Para aplicar un estilo a los elementos de una clase (atributo class):


p.introduccion{fontfamily:cursive;} .importante{color:red;}

Gestin de Datos Dinmicos en Red

Pg. 11

Ubicacin de las reglas de estilo

3 formas posibles:

Aplicar estilos localmente:

Aplicar estilos directamente a los elementos (X)HTML Aplicar estilos solamente a la pgina donde se ubican Aplicar estilos de manera comn a varias pginas

Hojas de estilo internas:

Hojas de estilo externas:

Gestin de Datos Dinmicos en Red

Pg. 12

Aplicar estilos localmente

Se aplica dentro de una etiqueta (X)HTML, mediante el atributo style:

No se escriben las llaves ni el selector

<tdstyle=fontfamily:courier;padding:5px; borderstyle:solid;borderwidth:1px; bordercolor:black;>


Mayor precedencia: anulan cualquier otro estilo Desaprobado en Transitional XHTML y prohibido en Strict XHTML 1.0

Gestin de Datos Dinmicos en Red

Pg. 13

Hojas de estilo internas

Se definen en la cabecera del documento (X)HTML, dentro de un elemento <style>:


<head> <styletype=text/css> body{color:yellow; backgroundcolor:black;} </style> </head>

Se puede importar una hoja de estilo externa dentro de un elemento <style>, siempre antes de otras reglas:
<styletype=text/css> @importhoja_externa.css; </style>

Gestin de Datos Dinmicos en Red

Pg. 14

Hojas de estilo externas

Hoja de estilo: archivo con extensin .css

Contienen reglas de estilo

Vincular una hoja de estilo externa:


<head> <linkrel=stylesheettype=text/css href=url_hoja.css/> </head>

Se pueden enlazar varias hojas de estilo: las ltimas prevalecen

Gestin de Datos Dinmicos en Red

Pg. 15

Herencia

Algunas propiedades se heredan del elemento padre al hijo:


<pstyle=color:green;> Enesteprrafohemosdefinidounareglaparaqueel textoaparezcaencolorverde,adems,el<em>texto resaltado</em>heredadesupadreelcolor,porlo queaparecertambinenverde. </p>

Gestin de Datos Dinmicos en Red

Pg. 16

Herencia

Algunas propiedades se heredan, mientras otras no:


<h1style=color:red;border:solidyellow;> Hemosdefinidoelencabezadorojoconbordeslido amarillo,<em>eltextoresaltado</em>heredadesu padreelcolor,peronoelborde. </h1>

Gestin de Datos Dinmicos en Red

Pg. 17

Especifidad

Qu ocurre cuando se aplica ms de una regla a un elemento?

Cuanto ms especfico es un selector, ms fuerte ser la regla.

p{color:red;}/*afectaaloselementosp*/ p.claseuno{color:blue;}/*sloafectaalos elementospconclaseigualaclaseuno*/ p#id33{color:green;}/*soloafectaalelementop conidid33*/

Los atributos id son los ms especficos (al ser nicos en el documento) Un selector con atributo class es ms especfico que un selector con slo nombre. Las reglas heredadas son las ms generales.
Pg. 18

Gestin de Datos Dinmicos en Red

Ubicacin

Qu ocurre cuando varias reglas tienen la misma especifidad?

Las reglas que aparecen despus tienen ms peso.

p#id33{color:green;} p#id33{color:magenta;}/*seaplicarstapues aparecedespus*/ p{color:red;}/*aunqueestaaparecedespus,es menosespecfica*/

Gestin de Datos Dinmicos en Red

Pg. 19

Valores de las propiedades

Cada propiedad CSS tiene distintas normas sobre los valores aceptables, pudiendo ser:

Valores de una lista predefinida:


.centrado{textalign:center;}/*otrosvaloresson left,rightyjustify*/

Nmeros: Medidas: Porcentajes: URLs: Colores:

lineheigth:2.5; fontsize:24px; fontsize:120%; background:url(nube.jpg); color:red; color:#AA2255 color:rgb(80%,10%,50%)


Pg. 20

Gestin de Datos Dinmicos en Red

Formas de definir un selector

Selector universal *, se aplica a todos los elementos:


*{fontfamily:arial;}

El nombre del elemento:


p{color:red;fontsize:12pt;} h1,h2,h3{color:blue;}

La clase o el id del elemento:


p.resaltado{color:green;fontweight:bold;} .resaltado{fontweigh:bolder;} div#descripcion{backgroundcolor:yellow;}

El valor de un atributo id debe ser nico en el documento: el selector id se debe aplicar solamente a un elemento.
Pg. 21

Gestin de Datos Dinmicos en Red

Formas de definir un selector

Seleccionar por contexto:

En funcin del padre: selecciona un elemento que es hijo directo de otro:


div#especial>p{color:blue;} /*seleccionaloselementospquehijosdel divconidespecial*/

Para seleccionar el primer hijo:


div#especial>p:firstchild{color:blue;} /*:firstchildesunapseudoclase*/

Gestin de Datos Dinmicos en Red

Pg. 22

Formas de definir un selector

Seleccionar por contexto:

En funcin del ascendiente: selecciona un elemento que es descendiente (no necesariamente hijo directo) de otro
tableb{color:blue;} /*seleccionaloselementosbqueestndetro deunatabla*/ div#especialp{borderstyle:solid;} /*seleccionalosprrafosdentrodeldiv conidespecial*/

Gestin de Datos Dinmicos en Red

Pg. 23

Formas de definir un selector

Seleccionar por contexto:

En funcin del hermano adyacente: selecciona el elemento que se corresponde con el siguiente hermano de otro:
h1+p{color:blue;}/*seleccionaelprimerprrafo decualquierencabezadodenivel2*/ div#especialp+p/*questamosseleccionando?*/

Gestin de Datos Dinmicos en Red

Pg. 24

Formas de definir un selector

Seleccionar parte de un elemento:

Pseudoelementos: hacen referencia a contenido que no se puede marcar manualmente como un elemento independiente. La primera letra de un elemento:
p:firstletter{fontsize:18pt;} div.descripcionesp:firstletter{fontsize:20pt;} .nuevo:firstletter{textdecoration:underline};

La primera lnea de un elemento:


p:firstline{color:red;}

Gestin de Datos Dinmicos en Red

Pg. 25

Formas de definir un selector

Seleccionar elementos vnculo segn su estado:

Pseudoclases: hacen referencia a clases para caractersticas que no se pueden marcar manualmente. Vnculo an no visitado: Vnculo visitado: Al sealar vnculo:
a:link{color:red;} a:visited{color:orange;}

Seleccionado por teclado: a:focus{color:purple;}


a:hover{color:green;}

Al hacer clic sobre vnculo: a:active{color:brown;}

Gestin de Datos Dinmicos en Red

Pg. 26

Formas de definir un selector

Seleccionar elementos en funcin de sus atributos:

Elementos que tienen un atributo o un valor dado para un atributo:


p[id]{color:red;}/*cualquierelementop quetengaunatributoid*/ p[id=resumen]{color:red;}/*elelementop quetengaelatributoidconvalorresumen*/ div[class~=resumen]{color:red;} /*elelementodivquecontengaenelatributo classelvalorresumen,deentreunalista*/ p[language|=es]{color:red;} /*elelementopquecontengaenelatributo languageunvalorquecomienzapores*/

Gestin de Datos Dinmicos en Red

Pg. 27

Formas de definir un selector

Especificar grupos de elementos.

Para aplicar las mismas reglas a varios elementos:


h1,h2,h3,p{color:red;}

Combinando varios selectores...


div.especialpem:firstletter{color:red;}

y qu significar sto?

Gestin de Datos Dinmicos en Red

Pg. 28

Fuente

Tipo de fuente:
h1,h2{fontfamily:ArialBlack,sansserif;}

El usuario visitante debe tener la fuente en su sistema. Se puede indicar ms de una fuente: el navegador utilizar la primera de la lista que tenga instalada. Se pueden utilizar nombres genricos de fuente, por si el usuario no tiene instalada ninguna de las indicadas anteriormente:

serif sans-serif cursive fantasy monospace


Pg. 29

Gestin de Datos Dinmicos en Red

Fuente

Estilo de fuente:
fontstyle:normal|italic|oblique

Fuente en negrita:
fontweight:normal|bold|bolder|lighter| 100|200|300|400|500|600|700|800|900

Variante de fuente:
fontvariant:normal|smallcaps

Gestin de Datos Dinmicos en Red

Pg. 30

Fuente

Tamao de fuente:

Absoluto:
fontsize:xxsmall|xsmall|small|medium| large|xlarge|xxlarge

Relativo, respecto al padre:


fontsize:smaller|larger

Porcentaje, respecto al padre:


h1{fontsize:120%;}

Fijo: en px, em, ex, pt, in, cm, pc, mm


p{fontsize:12px;}

Gestin de Datos Dinmicos en Red

Pg. 31

Longitudes

Unidades absolutas:

pt punto pc pica in pulgada cm centmetro mm milmetro px pixel em tamao de fuente ex altura letra x
Pg. 32

Unidades relativas:

Porcentajes

Gestin de Datos Dinmicos en Red

Formato de texto

Color: Fondo

p{color:black;}

Transparente: p{background:transparent;} Color: Imagen:


p{background:#EEA;} p{background:#FF9url(imagen.gif) repeatscrolltopleft;}

Ajuste de texto:
textalign:left|right|center|justify

Espaciado entre letras/palabras:


letterspacing:normal|longitud wordspacing:normal|longitud

Gestin de Datos Dinmicos en Red

Pg. 33

Formato de texto

Sangra de texto:
textindent:longitud p{textindent:2em}/*sangrade2letras*/ p{textindent:1.5em}/*sangracolgantede1.5*/

Espacios en blanco:
whitespace:normal|pre|nowrap

normal muestra mltiples espacios y retornos de carro como un solo espacio pre muestra todos los espacios en blanco y retornos de carro nowrap no genera saltos de lnea (solo con <br />)
Pg. 34

Gestin de Datos Dinmicos en Red

Вам также может понравиться