Abril 5 de 2017

Hojas de estilo Css

¿Qué es una hoja de estilo?

En las primeras versiones del HTML, el código fuente de una página web contenía tanto la información (el contenido) como la forma de representarse (el diseño o formato). Actualmente, estos dos aspectos se pueden separar. La página web (el documento html) sólo debe contener información, mientras que el formato se debe definir en las llamadas hojas de estilo (en inglés, CSS, Cascading Style Sheets, es decir, Hojas de Estilo en Cascada).
El funcionamiento de las hojas de estilo es el siguiente:
  • En la página web (archivo .html) se escriben las etiquetas que definen categorías o elementos.
  • En la hoja de estilo (archivo .css) se escribe cómo queremos que sea el estilo de presentación de las etiquetas (color, tamaño, fuente, bordes, máragenes, posición, etc).
  • En la página web se escribe qué hoja de estilo queremos utilizar.´

enlace a la hoja de estilo...<p>Esto es un párrafo.</p>etiqueta html...hoja de estilo (estilo.css)color: red;}p   {etiqueta html+resultado en el navegadorEsto es un párrafo.
Las ventajas de utilizar hojas de estilo son muchas, sobre todo permiten hacer un diseño consistente y fácil de modificar. Si varias páginas web hacen referencia a la misma hoja de estilo, para cambiar la apariencia de todas las páginas es suficiente con hacer los cambios en un único lugar, en la hoja de estilo.

Sintaxis de las hojas de estilo

Una hoja de estilo es un fichero de texto plano (sin formato) en el que se define el aspecto de las etiquetas de una página web:
@charset "utf-8";h1 {color: white;background-color: black;}p {color: red;background-color: lightyellow;}
Una hoja de estilo está formada por una o varias sentencias:
@charset "utf-8";h1 {color: white;background-color: black;}p {color: red;background-color: lightyellow;}sentencias
Existen dos tipos de sentencias: las reglas-arroba y las reglas:
@charset "utf-8";h1 {color: white;background-color: black;}p {color: red;background-color: lightyellow;}regla-arrobareglas
Las reglas-arroba empiezan por el símbolo de arroba (@) pegado a un identificador y terminan por un punto y coma (;):
@charset "utf-8";regla-arrobaidentificadorpunto y coma
Algunas reglas-arroba (@charset, @import o @namespace) deben aparecer al principio de la hoja de estilo, pero el resto (@font-face, @media, etc.) pueden escribirse en cualquier lugar de la hoja de estilo.
Las reglas están formadas por un selector y un bloque de declaración. El bloque de declaración empieza y acaba con llaves { }.
h1   {color: white;background-color: black;}p   {color: red;background-color: lightyellow;}selectoresllavesdeclaraciones
Cada declaración está formada por una o varias propiedades y sus valores correspondientes. Las propiedades van separadas entre sí por puntos y comas. El valor (o valores) van separados de las propiedades por dos puntos. En general, si una propiedad necesita varios valores, los valores van separados por espacios en blanco. En general, si una propiedad admite varios valores alternativos, los valores van separados por comas.
h1   {color :   white ;background-color :   black ;}propiedaddos puntosespacio en blancovalorpunto y coma

Definir varias selectores simultáneamente

Se pueden definir varios selectores simultáneamente escribiendo los selectores separados por comas, como muestran los siguientes ejemplos:
p, address {
  color: red
}
Esto es un párrafo.
Esto es una dirección <address>.
Lo que no es correcto es definir varias propiedades simultáneamente, como muestran los siguientes ejemplos:
Incorrecto
p {
  border-top, border-bottom: red 3px solid;
}
Esto es un párrafo.
Correcto
p {
  border-top: red 3px solid;
  border-bottom: red 3px solid;
}
Esto es un párrafo.

Comentarios en las hojas de estilo

Una hoja de estilo puede contener comentarios. Los delimitadores del comentario son /* ... */ (como en el lenguaje de programación C). Los comentarios pueden extenderse varias líneas, como ilustra el siguiente ejemplo:
/* Autor: Bartolome Sintes Marco
   Fecha: 3 de octubre de 2014
*/
h1 {
  color : white ;                 /* texto blanco */
  background-color : black ;      /* sobre fondo negro */
}


Realizado por: Valeria Rojas Orduz 10-A
 Colegio Integrado Nuestra Señora del Divino Amor




Comentarios

Publicar un comentario

Entradas más populares de este blog

Septiembre 27 de 2016

Revisión  ejercicios de practica Evaluacion ejercicio javascript Indicar el nombre, edad, y decir si puede votar <18 Operadores aritméticos Los operadores se dividen en: operadores de asignación; operadores aritméticos; operadores relacionales; operadores lógicos; operadores sobre bit, que suelen utilizarse sólo para generar colores; operadores cadenas. pueden ser  unitarios  o  binarios : los primeros precisan un único operando, los segundos, dos. El primer operador que hay que conocer es el operador de asignación   cuyo signo es el igual  (=). Su uso en Javascript es similar al que tiene en C y distinto del que posee en matemáticas porque  sirve para asignar un valor y no a establecer relaciones de igualdad . Para esto último existe otro operador (= =). Con el uso del operador de asignación se crea como una fotocopia del valor de la expresión que queda a la derecha del operador en el lado de la izquierda del operador. Los  operadores aritméticos
Leer más

Noviembre 8 de 2017

  Ejercicios de los manuales 33 y 34 Se realizó una evaluación Entrega de notas EJERCICIOS: 1. Ejercicio con imágenes: index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <?php $mensaje = isset($_GET['mensaje'])?$_GET['mensaje']:""; if ($mensaje != ""){ ?> <script type="text/javascript">alert("<?=$mensaje;?>");</script> <?php }?> <body> <form id="form1" name="form1" method="post" action="guardar.php">   <table width="100%" border="0" cellspacing="0" cellpadding="0">    
Leer más

Febrero 23 de 2016

Imagen
Veremos un poco acerca del  Sistema Internacional de medidas y Unidades de Medición. Sistema Internacional de Medidas El Sistema Internacional de Unidades, cuyas siglas son SI (por convención), es un estándar internacional para la escritura de unidades, sus símbolos y las cantidades. El SI fue adoptado y recomendado por la Conferencia General de Pesos y Medidas desde el año 1960, y en España estas normas fueron declaradas de uso legal, obligatorias, en 1967. Es la forma moderma del sistema métrico decimal y todas sus unidades tienen un único  símbolo  para su representación, de manera que su escritura y lectura sea unívoca y, por lo tanto, no conduzca a un error de interpretación. Por ello, se desaconseja el uso de cualquier otra abreviación (símbolo, sigla o abreviatura) recogida aquí como referencia. Unidades de Medicion Con estas unidades medimos la capacidad de guardar información de un elemento de nuestro PC.  La Unidad de Informática esta encargada de
Leer más