css
Post on 27-May-2015
302 Views
Preview:
TRANSCRIPT
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>
<style type="text/css">
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>
<style type="text/css">
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hola Mundo !!!!</h1>
</body>
</html>
Fondos de Estilo Cont… background-image
Imagen de fondo - Establecer la posición y no se repita:
<html>
<head>
<style type="text/css">
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>
<style type="text/css">
body
{
background:#909090 url('img_tree.png') no-repeat right top;
margin-right:200px;
}
</style>
<body>..
……
…..
…
</body>
</html>
Fondos de Estilo Cont… background-image
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>
<style type="text/css">
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>
<style type="text/css">
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>
<style type="text/css">
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;}
top related