2. ¿Qué es CSS?
Css Hojas de Estilo en Cascada (Cascading Style Sheets),
es un mecanismo simple que describe cómo se va a
mostrar un documento en la pantalla, o cómo se va a
imprimir . Permite a los desarrolladores el control total
sobre estilo y formato de sus documentos.
¿Para qué sirve?
CSS se utiliza para dar estilo a documentos HTML y XHTML,
separando el contenido de la presentación.
3. ¿Cómo funciona?
Cada regla/estilo CSS está compuesta por un selector y una o
más declaraciones.
Ejemplo:
p{ font-family: small Arial, sans-serif;
color: red;
background-color:black;
}
p (párrafo)es el selector, y las 3 líneas entre llaves son declaraciones
(en las que font y color y background se denominan propiedades a
las que asignamos un valor.
4. Ubicación de las reglas css
Estilos propios del navegador:
Estilos definido por el usuario en el navegador
Estilo en línea
Estilo incrustado en la hoja html
Estilo definido en una hoja externa
Se vinculan a la página web mediante un elemento link.
Ejemplo:
<link href=quot;hojadeestilos.cssquot;
rel=quot;stylesheetquot; type=quot;text/cssquot;/>
5. Estilo en línea
Se colocan como valor del atributo style de cualquier
elemento XHTML. (mejor evitar)
Ejemplo :
<p style=quot;color:redquot;>Esto es un
párrafo rojo</p>
Son los menos eficientes y más difíciles a la hora de cambiar
estilos, ya que hay que hacerlo tag a tag.
6. Estilo embebido en la hoja
html
Estilos definidos dentro de un elemento
<style type=quot;text/cssquot;> </style> dentro de la sección
<head> de la página html
Ejemplo :
<head>
<title>Mi pagina</title>
<style type=quot;text/cssquot;>
p{color: red; font:0.9em Arial}
</style>
</head>
....
7. Tipos de selectores
De elementos
p {.. . declaraciones.. .}
De ID (sólo aparecen una vez en el documento)
#piePagina {. . . declaraciones..}
(Observa que el # llama a un id)
De clase
.nombreclase {... declaraciones.. .} (Observa
que el punto define una clase)
Contextuales o descendentes
p #piePagina {. . . declaraciones. . . }
8. Tipos de selectores
De grupo
p, Ii, table {. . . declaraciones.. .}
De pseudoclase
a:visited {. . . declaraciones...)
a:hover{..declaraciones..}
De pseudoelemento
p:first-letter {. . . declaraciones. . .}
9. Unidades de los valores de css
Cada porpiedad va a tener un valor cuya medida se puede
expresar
Mediante una palabra con significado propio:
Por ejemplo:
solid, thin, blue, …
ejemplo práctico:
<p style=quot;border:2px red solidquot;>Esto está bordeado solido
en rojo</p>
que produce lo siguiente:
Esto está bordeado solido en rojo
10. Medidas
% porcentaje
in inch
cm centimetros
mm millimetros
em 1em es igual al tamaño de la fuente actual. 2em mide 2 veces el
tamaño de la fuente actual. Ejemplo., si un elemento se está
visualizando con una fuente de 12pt, entonces '2em' será 24 puntos.
ex un ex es la altura de la letra x (altura de la letra x => aprox.
0.5em)
pt point (1 pt= 1/72 inch)
pc pica (1 pc=12 puntos)
px pixel (un punto en una pantalla de ordenador)
11. Colores
Unidades Descripción
color_name Un nombre de color (ejemplo. red)
rgb(x,x,x) Un valor RGB (ejemplo.
rgb(255,0,0))
rgb(x%, x%, x%) Un valor pocentual de RGB
(ej. rgb(100%,0%,0%))
#rrggbb Un valor hexadecimal
(ejemplo. #ff0000)
12. El atributo CLASS
.nombreclase
{.....declaraciones ......}
(ojo con el punto, es lo que
caracteriza este selector)
Definimos un estilo independientemente de los elementos donde se
aplica el mismo. Para asignar la clase que debemos modificar
incluir atributos CLASS en los lugares donde queramos aplicar
estilos.
13. El atributo CLASS
A la hora de aplicarlo:
<p class=quot;citaquot;>quot;Muchos años después, frente al pelotón ...</p>
A la hora de definirlo
.cita {font-weight: bold; color: red;}
El punto inicial es necesario para mantener la definición de
este estilo desvinculada de cualquier elemento del
documento.
Si queremos restringir el uso de este estilo a un tipo de
elemento, podemos definirlo como:
p.cita {font-weight: bold; color: red;}
14. El atributo ID
Definición
#ejemplo {font-weight: bold;}
Uso
<p id=quot;ejemploquot;>Esto es el párrafo
de ejemplo.</p>
El mismo atributo id sólo puede usuarse en un elemento.
Debe ser único.
