Laboratorio
El CSS "Hojas de estilo en cascada" sirven para determinar la manera en que se va mostrar el texto en la pantalla de algún documento HTML aunque también puede ser XML(la hoja de estilo para xml es xsl), es usada por los desarrolladores para separar el texto del estilo y formato.
La ventaja de utilizar hojas de estilo CSS es que antes para hacer una molificación por muy pequeña que fuera a distintas páginas con el mismo estilo se tenia que abrir todas y modificar en cada una ahora con el CSS es
posible solo hacer el cambio en el archivo.css y así estomáticamente se habrán modificado todos los documentos que hacen referencia a este.
El CSS funciona a base de reglas, que se aplican a los elementos del documento.Las reglas se dividen en selectores y declaraciones, las declaraciones están compuestas en una propiedad y el valor de la propiedad.
Ejemplo:
h2{color:blue;}
donde h2 es el selector y
{color:blue;} es la declaración
color es la propiedad y blue el valor que se le da a la propiedad
Entonces en el ejemplo anterior se esta declarando el estilo para las letras con la etiqueta h2, donde la propiedad que se modifica es el color.
Hay dos distintas formas de agregar CSS al html una de ellas es escribiendo en el documento.html dentro de la etiqueta head la siguiente línea:
<link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" />
y la otra forma es también dentro de head escribir el elemento style y dentro de ahí el CSS.
En lo personal prefiero la primera forma ya que el código se puede ver mas limpiamente.
Cosas básicas
Si hay algunos elementos a los que se desea poner una propiedad igual se pueden agrupar de la siguiente forma:
h1, h2, h3{
color:blue;
}
que es lo mismo a que se escriban todos por separados, también podemos modificar varias propiedades de un elemento agrupando las propiedades se deben de separar con ";" y el valor de las propiedades se escribe después de ":", si el valor tiene más de una palabra se debe escribir entre comillas.
Ejemplo:
h1 {
padding-left: 11em;
font-family: Georgia, "Times New Roman",Times, serif;
color: red;
background-color: #d8da3d;
}
En este ejemplo cada propiedad esta en lineas distintas esto no tiene que ser así siempre, puede ir una propiedad seguida de la otra sin embargo es una buena práctica escribirlo de ese modo ya que es mucho más agradable verlo así.
Son muchas las propiedades que les podemos cambiar a los distintos elementos, encontré en internet una pagina que nos muestra las maravillas que se pueden hacer con el CSS, la pagina tiene en su lado derecho un menú en el cual podemos elegir diferentes hojas de estilo para la el documento html, además tiene una opción de poder descargar el código CSS y poder ver como se manejan los elementos que componen el CSS.
Esta es la página:
http://www.csszengarden.com/tr/espanol/
Existe un validador http://jigsaw.w3.org/css-validator/ que sirve para detectar los errores que tenemos en las páginas web, puede ser muy útil para encontrar errores en nuestras páginas web los que apenas estamos aprendiendo.
Y por último les dejo este gif que me muestra como el CSS cambia por completo la visualizacion de un html, añadiendo estilos a los elementos del mismo.
Referencias
Qué bonito Gif. Me agradó el estilo que tomó al último, ahí podemos ver que los detalles cuentan mucho. Así se agrada a la vista del usuario :)
ResponderEliminarNo sé mucho sobre esto, pero quería comentarlo.
(De pronto recordé cuando utilizábamos FrontPage en la preparatoria, qué terror)
Hasta luego, Cecy.
jaja...pero era tan fácil
ResponderEliminarTres puntos extra para la clase. (Sí, te obligo, ya no te hacen falta en el lab.)
ResponderEliminar