css

Estilos CCSHojas de Estilo en Cascada

MTI. Gabriel Martínez Mendoza

¿ Que es CSS ?

CSS significa Cascading Style Sheets

Los estilos definen cómo mostrar los elementos HTML

Los estilos se han añadido a HTML 4.0 para resolver un

problema

Hojas de estilo externas puede ahorrar un montón de trabajo

Hojas de estilo externas se almacenan en archivos CSS

Estilos

HTML nunca fue destinado a contener las etiquetas para dar formato a un

documento.

HTML fue la intención de definir el contenido de un documento, como:

<h1> Este es un encabezado </ h1>

<p> Este es un párrafo. </ p>

Cuando las etiquetas como <font>, y los atributos de color se han añadido a la

especificación HTML, que empezó una pesadilla para los desarrolladores web.

Desarrollo de sitios web de gran tamaño, donde las fuentes y la información de

color se han añadido a cada página, se convirtió en un proceso largo y costoso.

Para resolver este problema, la World Wide Web Consortium (W3C), creado en

CSS.

Estilos cont…

En HTML 4.0, todo el formato podría ser removido del documento

HTML, y se almacena en un archivo CSS independiente.

Todos los navegadores soportan CSS en la actualidad.

CSS ahorra mucho trabajo!

CSS define cómo los elementos HTML que se mostrará.

Los estilos se guardan normalmente en exteriores. Css. hojas de estilo

externas le permiten cambiar la apariencia y el diseño de todas las

páginas de un sitio Web, simplemente editando un solo archivo!

CSS : Sintaxis

Una regla CSS consta de dos partes principales: un selector, y las

declaraciones de uno o más:

El selector es normalmente el elemento HTML que desee estilo.

Cada declaración consta de una propiedad y un valor.

La propiedad es el estilo de atributo que desea cambiar. Cada propiedad tiene

un valor.

Ejemplo :

Las declaraciones CSS siempre termina con un punto y coma, y los grupos de

la declaración están rodeados de llaves:

Comentarios CSS

Selectores Id y Class

El selector de Identificación

El selector de ID se utiliza para especificar un estilo para un solo elemento, único.

El selector de Identificación utiliza el atributo id del elemento HTML y se define

con un "#".

La regla de estilo el cuadro siguiente se aplica al elemento con id = "para1":

Estructura en HTML : CSS con ID

< style type=“text/css>

Selector ID # para1 y atributos

< /style >

Aplicando el estilo

<html>

<head>

<style type="text/css">

#para1

{

text-align:center;

color:red;

}

</style>

</head>

<body>

<p id="para1">HOLA MUNDO !</p>

<p>Este texto no esta afectado por estilo

.</p>

</body>

</html>

Selector Clase = Class

La clase Selector

El selector de clase se utiliza para especificar un estilo para un grupo de

elementos. A diferencia de la selección de Identificación, el selector de clase es

la más utilizada en varios elementos.

Esto le permite definir un estilo particular para los elementos HTML con la

misma clase.

El selector de clase utiliza el atributo class de HTML, y se define con un "."

En el ejemplo siguiente, todos los elementos HTML con class = "centro" se

alinea al centro:

Estructura en HTML : CSS con Class

<html>

<head>


p.center

{

text-align:center;

}

</style>

</head>

<body>

<h1 class="center">Este Parrafo no se ve afectado por el

estilo</h1>

<p class="center">Este parrafo esta alineado y centrado.</p>

</body>

</html>

< style type=“text/css>

Selector class p. center y atributos

< /style >

Aplicando el estilo

Formas de Insertar Estilos

Tres maneras de CSS Insertar

Hay tres formas de insertar una hoja de estilos:

•Hoja de estilos externa

•Interior hoja de estilos

•Estilo en línea

Hoja de estilos Externa

Una hoja de estilos externa es ideal cuando el estilo se aplica a muchas

páginas. Con una hoja de estilos externa, puede cambiar el aspecto de un sitio

Web completo al cambiar un archivo. Cada página debe enlazar con la hoja de

estilos utilizando la etiqueta <link>. La etiqueta <link> va dentro de la sección de

la encabezado:

Una hoja de estilos externa se puede escribir en cualquier editor de texto.

El archivo no debe contener ninguna etiqueta HTML. Su hoja de estilo debe

ser guardado con una extensión de CSS.. Un ejemplo de un archivo de hoja de

estilos se muestra a continuación:

Hoja de Estilos Interna

Una hoja de estilo interna debe ser usado cuando un único documento

tiene un estilo único. Para definir estilos internos en la sección principal de

una página HTML, utilizando la etiqueta <style>, así:

Estilos de Línea

Un estilo en línea pierde muchas de las ventajas de las hojas de estilo por el

contenido de la mezcla con la presentación. Utilice este método con moderación!

Para utilizar los estilos en línea se utiliza el atributo de estilo en la etiqueta

correspondiente. El atributo de estilo puede contener cualquier propiedad CSS. El

ejemplo muestra cómo cambiar el color y el margen izquierdo de un párrafo:

Fondos de Estilo

CSS propiedades de fondo se utilizan para definir los efectos de fondo

de un elemento. Las propiedades CSS utilizado para efectos de fondo:

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

Fondos de Estilo Cont…

Color de fondo

La propiedad background-color especifica el color de fondo de un elemento.

El color de fondo de una página se define en el selector de cuerpo:

Otros Elementos como:

Fondos de Estilo Cont…

Imagen de fondo

La propiedad background-image especifica una imagen para usar como fondo de

un elemento.

De forma predeterminada, la imagen se repite por lo que cubre todo el elemento.

La imagen de fondo de una página se puede establecer de esta manera:

Imagen de fondo - Repetir horizontalmente o verticalmente

De forma predeterminada, la propiedad background-image repite una imagen

tanto horizontal como verticalmente.

Algunas de las imágenes se debe repetir sólo horizontal o verticalmente, o se

verá extraño, así:

Si la imagen se repite sólo horizontalmente (repeat-x), el fondo se vea mejor:

Fondos de Estilo Cont… background-image

Ejemplo Imagen : Atributo repeat-x

<html>

<head>


body

{

background-image:url('gradient2.png');

background-repeat:repeat-x;

}

</style>

</head>

<body>

<h1>Hola Mundo !!!!</h1>

</body>

</html>


Imagen de fondo - Establecer la posición y no se repita:

<html>

<head>


body {

background-image:url('img_tree.png');

background-repeat:no-repeat;

background-position:right top;

margin-right:200px;

}

</style>

</head>

<body>

<h1>Hola Mundo !</h1>

<p>Ejemplo del no-repeat en el fondo </p>

<p>La imgen solo esta una vez y se colo a fuera del texto.... .</p>

<p>En este ejemplo también hemos añadido un margen en el lado derecho ,

por lo que la imagen de fondo no se perturbe el texto.</p>

</body>

</html>

<html>

<head>


body

{

background:#909090 url('img_tree.png') no-repeat right top;

margin-right:200px;

}

</style>

<body>..

……

…..

…

</body>

</html>


Color del texto

La propiedad color se utiliza para establecer el color del texto. El color

puede ser especificado por:

• Nombre - nombre de un color, como “red"

• RGB - un valor RGB, como "rgb (255,0,0)"

• Direccional - un valor hexadecimal, como "# FF0000“

El color por defecto de una página se define en el selector de cuerpo.

Estilos de Texto. Cont..

Alineación del texto

La propiedad text-align se utiliza para establecer la alineación horizontal de un texto.

El texto puede ser centrado o alineado a la izquierda o la derecha o justificado.

Cuando text-align se ajusta a "justificar", cada línea se estira de manera que cada

línea tiene la misma anchura, y los márgenes izquierdo y derecho son rectos (como

en revistas y periódicos).

Ejemplo : Estilos Texto

<html>

<head>


h1 {text-align:center;}

p.date {text-align:right;}

p.main {text-align:justify;}

</style>

</head>

<body>

<h1>CSS text-align Example</h1>

<p class="date">May, 2009</p>

<p class="main“> En mis años más jóvenes y más vulnerables mi padre me dio un consejo que

he estado dando vueltas en mi mente desde entonces . " Siempre que te sientas como criticar

a nadie , " me dijo , recuerda que todas las personas en este mundo no han tenido las ventajas

que he tenido . ".'</p>

<p><b>Note:</b> Cambiar el tamaño de la ventana del navegador para ver cómo el valor de "

justificar ".</p>

</body>

</html>

Texto Decoración

Texto Transformación

Sangria

Texto Transformación

Texto Decoración

Fuente

Diferencia entre Serif y fuentes Sans-serif

CSS familias de fuentes

En CSS, hay dos tipos de nombres de familia de la fuente:

Genérica de la familia - un grupo de familias de fuentes con un aspecto similar (como

"Serif" o "Monoespacio")

Familia de la fuente - una familia de fuentes específicas (como "New Times Roman" o

"Arial")

Fuente Cont.…

Fuente Cont..

Estilo de fuente

La propiedad font-style se utiliza sobre todo para especificar el texto en cursiva.

Esta propiedad tiene tres valores:

normal - El texto se muestra normalmente

cursiva - El texto se muestra en cursiva

oblicua - El texto es "inclinarse" (oblicua es muy similar a la cursiva)

Fuente Cont..

Tamaño de fuente

La propiedad font-size establece el tamaño del texto.

Enlaces

Los enlaces pueden ser de estilo con cualquier propiedad CSS (por ejemplo, color, font-family,

fondo, etc.)

Especial para los enlaces son que puede ser configurada diferente dependiendo del estado que

están adentro

Los cuatro estados son los enlaces:

a: link – estado normal antes de dar clic

a: visited - un enlace que el usuario ha visitado

a: hover - un enlace cuando el usuario desplaza el ratón sobre el

a: active - un enlace el momento en que se hace clic en el

Enlaces : Ejemplo

<html>

<head>


a:link {color:#FF0000;} /* Enlace no visitado = Rojo */

a:visited {color:#00FF00;} /* Visto el enlace = Verde*/

a:hover {color:#FF00FF;} /* Sobre el enlace = Rosa */

a:active {color:#0000FF;} /* Enlace seleccionado = azul*/

</style>

</head>

<body>

<p><b><a href="http://www.google.com" target="_blank"> Enlace a Google

</a></b></p>

</body>

</html>

Listas

En HTML, hay dos tipos de listas:

Listas no ordenadas : los elementos de lista están marcados con objetos

Listas ordenadas : los elementos de la lista están marcados con números o letras.

Con CSS, las listas pueden ser de estilo más, y las imágenes se puede utilizar como

marcador elemento de la lista.

Declaración de Estilo

<head>


ul.a {list-style-type:circle;}

ul.b {list-style-type:square;}

ol.c {list-style-type:upper-roman;}

ol.d {list-style-type:lower-alpha;}

</style>

</head>

Aplicación del Estilo

<body>

<ul class="a">

<li>Cafe</li>

<li>Te</li>

<li>Coca Cola</li>

</ul>

</body>

Lista Cont.…

Lista numerada

Lista no numerada

Tablas

Generar un Estilo para la Tabla en una Hoja Externa

Matricula Nombre del Alumno Carrera

100234 Samanta Flores Rodríguez Lic. En Mercadotecnia

100456 Iván Genaro Tovar Delgado Ing. En Telemática

100909 Daniela Pozos Rostro Ing. En Sistemas Industriales

100567 Horacio Walis Reyna Lujan Lic. En Administración

.tabla {border: 1px solid; width:400px; border-collapse:collapse;}

.tabla td {text-align:center; border: 1px solid;}

.tabla tr:hover {background-color:#0066FF; font-size:16px;}

.tabla th {background-color:#000099;}

css

Documents