[2017-05-04]
CLASE 10:
SEGUNDO BIMESTRE
CSS (Hojas de Estilo en Cascada):
- No todos los navegadores permiten aplicar todos los estilos en esta clase de programación.
- Para guardar el archivo se coloca .css (archivo de css)
- El <body> es la etiqueta principal y es muy importante en algunas líneas el ;
CSS:
¿QUÉ
ES CSS?
Hojas
de Estilo en Cascada (Cascading Style Sheets), mecanismo que describe cómo se va a mostrar un documento en la
pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la
información presente en ese documento a
través de un dispositivo de lectura.
¿PARA QUÉ SIRVE?
Se
utiliza para dar estilo a documentos
HTML y XML, separando el contenido de la presentación.
CSS
permite a los desarrolladores Web controlar
el estilo y el formato de múltiples
páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un
elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que
aparezca ese elemento.
¿CÓMO FUNCIONA?
CSS
funciona a base de reglas o declaraciones
sobre el estilo de uno o más elementos.
Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a
un documento HTML o XML. La regla tiene
dos partes: un selector y la declaración.
La
declaración está compuesta por una propiedad y el valor que se le asigne.
h1
{color: red;}
h1
es el selector
{color:
red;} es la declaración
- El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración.
-
La declaración es la parte de la regla que establece cuál será el efecto.
FORMAS DE DAR ESTILO A UN
DOCUMENTO:
Utilizando
una hoja de estilo externa que
estará vinculada a un documento a través del elemento <link>, el cual debe ir situado en la sección <head>.
Ejemplo del
uso del <link>
<link rel="stylesheet"
type="text/css"
href="http://www.w3.org/css/officeFloats.css" />
El rel="stylesheet" da a entender que es una hoja de estilo en cascada.
Utilizando
el elemento <style>, en el interior del documento al que se le quiere
dar estilo, y que generalmente se situaría en la sección <head>. De esta forma los estilos
serán reconocidos antes de que la página se cargue por completo.
<style type="text/css">
</style>
Utilizando
estilos directamente sobre aquellos elementos que lo permiten
a través del atributo <style>
dentro de <body>. Pero este
tipo de definición del estilo pierde las ventajas que ofrecen las hojas de
estilo al mezclarse el contenido con la presentación.
NORMAS BÁSICAS A LA HORA DE
CREAR UNA CSS:
Los
selectores pueden aparecer individualmente o agrupados, separándolos con comas:
h1, h2, h3 {
color: red;
}
Las
propiedades que se desean modificar
en una CSS para un mismo selector
pueden agruparse, pero será
necesario separar cada una de ellas con un punto y coma.
p {text-align:center;color:red}
El
valor, representado a la derecha de los dos puntos (:), establece el valor de la propiedad. Es importante
recordar que si el valor está formado por más de una palabra, hay que ponerlo
entre comillas.
p {font-family: "sans serif";}
SELECTORES:
Una
misma regla puede aplicarse sobre varios selectores y un mismo selector se
puede utilizar en varias reglas.
Selectores Básicos:
·
Selector universal: Se indica mediante un asterisco (*).
Seleccionar
todos los elementos de la página.
*
{
margin: 0;
padding: 0;
}
·
Selector de tipo o etiqueta:
Selecciona
todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector.
Solamente se indica el nombre de la etiqueta HTML sin los caracteres <>,
según los elementos que se deseen seleccionar.
p: selecciona todos los párrafos
Cuando
se le quiere atribuir una cualidad de id se coloca primero el id con #nombre
del id y luego si la p si es párrafo
#primero p { color: #336699; }
a: enlaces
a { color: #CC3300; }
Si
esta una etiqueta dentro de un id y este dentro de un p, solo se coloca
la etiqueta y el id:
#primero em { background: #FFFFCC; padding: .1em; }
Cuando es para una etiqueta con un determinada clase o estilo (class) , el selector quedaa:
em.especial { background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }
Cuando se contiene dentro de un <span> y hay un id dentro del párrafo se coloca:
.normal span { font-weight: bold; }
Tipo de Uso: Comúnmente se agrupan las propiedades comunes y luego se establecen en cada uno de los selectores las propiedades que no comparten y son especificas.Selector descendente:Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento esdescendente de otro si se encuentra entre las etiquetas de apertura y de cierre de otroelemento.· No importa el nivel de profundidad que se encuentre.· Están formados por dos o más selectores separados entre sí por espacios en blanco.· El último selector indica el elemento sobre el que se aplica los estilos y todos losselectores anteriores indican el lugar en el que se debe encontrar ese elemento.Ejemplo:p a span em { text-decoration: underline; }TOMADO DE
No hay comentarios:
Publicar un comentario