CSS Estilos Básicos

Estilos CCS
Hojas 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:

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

<html>
<head>
< style type=“text/css>
<style type="text/css">
#para1
{ Selector ID # para1 y atributos
text-align:center;
color:red;
}
< /style >
</style>
</head>
<body>
<p id="para1">HOLA MUNDO !</p>
<p>Este texto no esta afectado por estilo Aplicando el 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; Selector class p. center y atributos
}
</style>
</head> < /style >

<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>
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:

Fondos de Estilo Cont… background-image

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:

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 Decoración

Texto Transformació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..

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 Aplicación del Estilo

<head> <body>
<style type="text/css"> <ul class="a">
ul.a {list-style-type:circle;} <li>Cafe</li>
ul.b {list-style-type:square;} <li>Te</li>
ol.c {list-style-type:upper-roman;} <li>Coca Cola</li>
ol.d {list-style-type:lower-alpha;} </ul>
</style> </body>
</head>

Lista Cont.…
Lista no numerada

Lista 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 Estilos Básicos

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Ähnlich wie CSS Estilos Básicos

Ähnlich wie CSS Estilos Básicos (20)

Mehr von Carlos Garcia Garcia

Mehr von Carlos Garcia Garcia (16)

CSS Estilos Básicos