Css básico

VENTAJAS DEL CSS

control de la presentación de muchos documentos desde una única hoja de estilo control más preciso de la presentación aplicación de diferentes presentaciones a diferentes tipos de medios (pantalla,

impresión, etc.)

SINTAXIS CSS

body {background-color: #FF0000;}

HOJAS DE ESTILO CSS

CSS, siglas de "Cascade Style Sheet", son un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML.

Las CSS son importantes ya que El html es limitado a la hora de aplicarle formato a un documento. Las css, ayudan a superar las limitaciones y dar una mejor apariencia a los documentos HTML

Ejemplo:

Usando HTML

<span style="border-bottom:1px dotted #000000">¿Qué es poesía?, dices mientras clavas</span> <div style="font-style:italic;font-size:20px;">en mi pupila tu pupila azul.<br> ¡Que es puesía!, Y tú me lo preguntas?</div> <span style="font-weight:bold;color:#00FF00">Poesía... eres tú.</span>

Usando CSS

http://css.hazunaweb.com/202.php

ALTERNATIVAS PARA APLICAR UN DOCUMENTO CSS.

1. Forma Directa.

Aplican estilo a una parte concreta del texto, usa para este fin el parámetro <style> Van dentro del mismo documento, sólo dentro de la sección <head>

Ejemplo:

<!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=iso-8859-1" /> <title>Ejemplo de estilos CSS en el propio documento</title> <style type="text/css"> p { color: black; font-family: Verdana; } </style> </head> <body> <p>Un párrafo de texto.</p> </body> </html>

Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web. El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar.

2. CSS indirectas dentro del mismo documento

Otra forma es incluir el código CSS usando la etiqueta HTML <style>. Estas se usan cuando se quiere que los estilos se apliquen en forma global a todas las etiquetas de un documento.

por ejemplo

<html> <head> <title>Ejemplo</title> <style type="text/css"> body {background-color: #FF0000;} </style>

http://css.hazunaweb.com/202.php

</head> <body> <p>Esta es una página con fondo rojo</p> </body> </html> Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto.

3. Indirectas Fuera del Documento. CSS Externo

Se define como un archivo aparte que es básicamente un archivo de texto con la extensión CSS y se enlaza mediante la etiqueta <link>. Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite. En la siguiente imagen, se ilustra el proceso de vinculación de un archivo Css externo, este puede quedar en un directorio de estilos o simplemente en el mismo folder del archivo HTML.

<link rel="stylesheet" type="text/css" href="style/style.css" />

El atributo href permite indicar la ruta de la hoja de estilo.

Una Hoja de estilo puede aportar formato a diferentes documentos HTML, correspondientes a un mismo proyecto, en este caso al actualizar el archivo CSS, automáticamente se actualizan los formatos en los diferentes documentos.

Ejemplo de un archivo css, incluido en una documento HTML.

<!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=iso-8859-1" /> <title>Ejemplo de estilos CSS en un archivo externo</title> <link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" /> </head> <body> <p>Un párrafo de texto.</p> </body> </html>

Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo CSS:

rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet

type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css

href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.

media: indica el medio en el que se van a aplicar los estilos del archivo CSS.

ELEMENTOS BÀSICOS CSS

▪ Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaraciones" y por último, un símbolo de "llave de cierre" (}).

▪ Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.

▪ Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.

▪ Propiedad: permite modificar el aspecto de una característica del elemento.

▪ Valor: indica el nuevo valor de la característica modificada en el elemento.

Comentarios.

Css, permite agregar comentarios entre sus reglas y estilos, estos aportan información sobre el código, los comentarios son ignorados por los navegadores.

Ej

/* Este es un comentario en CSS */

/* Este es un

comentario CSS de varias

lineas */

Clases.

Una clase es una serie de propiedades y métodos que se agrupan en una estructura para poder aplicarlos conjuntamente a una serie de objetos, como CSS no tiene métodos, en este caso la clase solo contendrá propiedades (atributos) y los objetos que pertenecen a esta clase se definen con el atributo HTML class.

1. Definir un estilo para todas las etiquetas de un determinado tipo de un documento.

Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con los selectores de ID que se verán a continuación. La principal característica de este selector es que en una misma página HTML varios elementos diferentes pueden incluir el mismo valor en el atributo class:

<body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p> <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p> </body>

Los selectores de clase son imprescindibles para diseñar páginas web complejas, ya que permiten disponer de una precisión total al seleccionar los elementos. Además, estos selectores permiten reutilizar los mismos estilos para varios elementos diferentes.

Colores

Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. Aunque el método más habitual es el del RGB hexadecimal, a continuación se muestran todas las alternativas que ofrece CSS.

Palabras clave para colores

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow.

Css básico

Technology

Transcript of Css básico