HOJAS DE ESTILO EN CSS



CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un lenguaje que describe la presentación de los documentos estructurados en hojas de estilo para diferentes métodos de interpretación, es decir, describe como se va a mostrar un documento en pantalla, por impresora, por voz (cuando la información es pronunciada a través de un dispositivo de lectura) o en dispositivos táctiles basados en Braille.

¿Para que sirve?

CSS es una especificación desarrollada por el W3C (World Wide Web Consortium) para permitir la separación de los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de la presentacin del documento con las hojas de estilo, incluyendo elementos tales como los colores, fondos, márgenes, bordes, tipos de letra..., modificando as la apariencia de una página web de una forma más sencilla, permitiendo a los desarrolladores controlar el estilo y formato de sus documentos.

¿Cómo funciona?

El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consiste en un selector y una declaración, esta última va entre corchetes y consiste en una propiedad o atributo, y un valor separados por dos puntos.
Selector

Ejemplo:

h2 {color: green;}
  • h2 ---> es el selector
  • {color: green;} ---> es la declaración
    • color ---> es la propiedad o atributo
    • green ---> es el valor
El proceso para incluir estilos con un archivo externo es el siguiente:
  •  Se crea un archivo con la declaración de estilos: se trata de un archivo de texto normal, que puede tener cualquier extensión, aunque le podemos asignar la extensión .css para saber de qué tipo de archivo se trata. El texto que debemos incluir debe escribirse exclusivamente en sintaxis CSS, que es un poco distinta de la sintaxis que utilizamos dentro del atributo style. Sería erróneo incluir código HTML con etiquetas en este archivo. He aquí un ejemplo:
P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}
  •  Se enlaza la página web con la hoja de estilos: para ello se coloco la etiqueta <LINK> con los atributos:
  •  rel="STYLESHEET" indicando que el enlace es con una hoja de estilo.
  •  type="text/css" porque el archivo es de texto, en sintaxis CSS.
  •  href="estilos.css" indica el nombre del archivo fuente de los estilos.
que quedará de la siguiente forma:
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Página que lee estilos</title>
</head>
<body>
<h1>Página que lee estilos</h1>
<p>
Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos.
</p>
</body>
</html>



 TOMADO DE: http://www.hipertexto.info/documentos/css.htm
http://www.masadelante.com/faqs/css


Comentarios

Publicar un comentario

Entradas más populares de este blog

TABLA ASCII

Imagen
HEXADECIMALES: Se explicó el tema de hexadecimales y se realizaron ejercicios hexadecimales en clase. TABLA ASCII: ASCII  ( acrónimo   inglés  de  American Standard Code for Information Interchange  — Código Estándar Estadounidense para el Intercambio de Información), pronunciado generalmente  [áski]  o [ásci] o [ásqui], es un  código de caracteres  basado en el  alfabeto latino , tal como se usa en inglés moderno. Fue creado en  1963  por el Comité Estadounidense de Estándares (ASA, conocido desde 1969 como el Instituto Estadounidense de Estándares Nacionales, o  ANSI ) como una refundición o evolución de los conjuntos de códigos utilizados entonces en  telegrafía . Más tarde, en  1967 , se incluyeron las minúsculas, y se redefinieron algunos códigos de control para formar el código conocido como  US-ASCII . El código ASCII utiliza 7 bits para representar los caracteres, aunque inicialmente empleaba un bit adicional ( bit de paridad ) que se usaba para detectar erro
Leer más

CAJA DE TEXTO EN HTML.

CAJA DE TEXTO: Definición Llamamos campos de texto, dentro de un formulario, a los elementos que nos permiten recoger texto escrito por el usuario. En la pantalla se muestra una pequeña caja donde el usuario puede escribir el texto que pretende enviar. Podemos crear varios tipos de campos de texto, bien sea para introducir un dato simple (nombre, edad, dirección, correo electrónico, etc.) o para introducir un texto mas largo (comentarios, opiniones, etc.); también podemos crear un campo de texto para un dato simple, pero con el texto oculto, del tipo "contraseña". Delante o detrás de estos elementos debemos indicar, mediante el lenguaje HTML habitual para texto, el tipo de datos que queremos que el visitante nos proporcione, ya que los campos de texto son simplemente cajas, en las que escribir la información, la cual será enviada posteriormente. Como ya se dijo en la página anterior, todo el formulario debe ir dentro de las etiquetas  <form> ... </form
Leer más

3. REGLAS Y ETIQUETAS DEL HTML.

Imagen
REGLAS DE HTML: Obligatorio: delimitar el ámbito de las etiquetas (salvo excepciones) etiqueta interna se cierra antes que externa etiquetas a nivel de bloque pueden contener etiquetas a nivel de línea, pero no al revés etiquetas no sensitivas a mayúsculas en vez de espacios agregar raya al piso Pero no está de más cumplir además con XHTML: Cerrar todos los tags, ie: <p> ... </p>, <li> ... </li> Incluir marca de cierre para tags vacíos, ie: <hr />, <br /> Poner entre comillas todos los atributos, ie: <img src="miimagen.gif" /> Todos los tags en minúsculas Terminar con </html> ETIQUETAS HTML BÁSICAS: Etiquetas de formato de texto Salida Etiquetas requeridas El  texto  en negritas. El <B>texto</B> en negritas. El  texto  en itálicas. El <I>texto</I> en it&aacute;licas. El  texto  en formato teletipo. El <TT>texto</TT> en formato teletipo. El  te
Leer más