ChatOrbi
No recomendado
- Desde
- 5 Abr 2013
- Mensajes
- 845
¿Qué es CSS?
CSS (hojas de estilo en cascada o en hojas de estilo) le permite especificar el estilo y el diseño de muchas páginas web al mismo tiempo al hacer cambios en una hoja de estilo único.
Las hojas de estilo son archivos con instrucciones sobre cómo presentar una página web (s) en un navegador web como Firefox o Internet Explorer. Instrucciones de CSS pueden estar dentro de la propia página web o en un documento aparte que está vinculado a la página web.
CSS permite especificar las propiedades en una de sus páginas web. Esto le permite realizar cambios en varias páginas web a la vez.
Antes de aprender CSS
Antes de aprender CSS , usted debe tener al menos un conocimiento básico de HTML / XHTML .
Ventajas de CSS
-Sus páginas web se cargan más rápido porque hay menos código para transferir
-Hay menos código que escribir
-Es más fácil tener una apariencia uniforme a todo su sitio web
-Actualización y mantenimiento de sitios web es mucho más fácil y menos tiempo
CSS también le permite:
-Texto de la posición y los gráficos con precisión donde desee
-Añadir efectos de conversión de enlaces
-Controlar el espacio entre las letras, líneas, márgenes, bordes de página web
-Especificar las unidades como centímetros, píxeles, puntos y más
-Ocultar el contenido de ciertos navegadores web en ciertas situaciones. Un ejemplo de esto es cuando se tiene algún contenido que desea que aparezca sólo en sus páginas web, pero no en la impresión.
Compatibilidad del navegador Web
Usted debe saber que los diferentes navegadores interpretan los estándares CSS de diferentes maneras y quieren ver cómo su sitio web se ve al menos en los navegadores más populares. Algunos navegadores antiguos no son capaces CSS lectura en absoluto, aunque esto es muy raro ahora y medidas se pueden tomar para manejar estas situaciones. Usted también querrá ver cómo su sitio web se ve en diferentes tamaños de pantalla, visita este link:
► Check Browser Compatibility, Cross Platform Browser Test - Browsershots
La sintaxis básica de CSS se compone de 3 partes: selector {propiedad: valor}
El selector es típicamente una etiqueta HTML o elemento como <p>, <table>, <h1>.
El siguiente es un ejemplo de código CSS de una hoja de estilo interna. El selector (el <p> en este ejemplo)
La propiedad es la característica del selector que desea cambiar, como el color, la fuente, altura, anchura, etc.
La propiedad (color) está fabricado en negrita en el siguiente ejemplo de código css
Especificación de múltiples propiedades
Si desea especificar más de una propiedad, usted tiene que separar cada propiedad con un punto y coma [;]
El siguiente ejemplo de código CSS muestra cómo hacer esto
Asignar valores
Un valor se asigna a la propiedad, tales como la definición del color, estilo de fuente, o el tamaño de la fuente.
Los valores en el siguiente ejemplo de código CSS se hacen negrita.
El Selector de Clase
Selectores de clases permiten definir diferentes estilos para el mismo tipo de HTML tag / elemento. Por ejemplo, el selector de clase le permite tener 2 tipos de párrafos en su página web y uno está alineado a la izquierda y otro que es el centro alineado.
El siguiente código CSS que muestra un ejemplo de cómo se hace esto.
Agrupación de selectores
Puede agrupar selectores si comparten las mismas declaraciones. Cada selector tiene que estar separadas por una coma.
El siguiente ejemplo de código css grupos los elementos de cabecera y hará que el texto en ellos de color rojo.
Algunas Notas:
*Sólo puede especificar un atributo por tag HTML / elemento. El siguiente ejemplo de código CSS es erróneo.
*También puede omitir el nombre de la etiqueta en el selector para definir un estilo que será utilizado por todos los elementos HTML que tienen una cierta clase. En el siguiente ejemplo, todos los elementos HTML con class = "center" serán centro alineado:
*En el código de abajo tanto el elemento h1 y el elemento p tienen class = "center". Esto significa que ambos elementos seguirán las reglas en el "centro". Selector:
*CSS Comentarios
Usted puede insertar comentarios en el código CSS mucho como usted puede con código HTML. Y al igual que en HTML, el comentario será ignorado por el navegador web. Un comentario CSS comienza con "/ *" y termina con "* /", como en el siguiente ejemplo.
Si te gusto este tutorial sobre css dale manita arriba
, Hare mas tutos para aprender CSS, HTML Y PHP
CSS (hojas de estilo en cascada o en hojas de estilo) le permite especificar el estilo y el diseño de muchas páginas web al mismo tiempo al hacer cambios en una hoja de estilo único.
Las hojas de estilo son archivos con instrucciones sobre cómo presentar una página web (s) en un navegador web como Firefox o Internet Explorer. Instrucciones de CSS pueden estar dentro de la propia página web o en un documento aparte que está vinculado a la página web.
CSS permite especificar las propiedades en una de sus páginas web. Esto le permite realizar cambios en varias páginas web a la vez.
Antes de aprender CSS
Antes de aprender CSS , usted debe tener al menos un conocimiento básico de HTML / XHTML .
Ventajas de CSS
-Sus páginas web se cargan más rápido porque hay menos código para transferir
-Hay menos código que escribir
-Es más fácil tener una apariencia uniforme a todo su sitio web
-Actualización y mantenimiento de sitios web es mucho más fácil y menos tiempo
CSS también le permite:
-Texto de la posición y los gráficos con precisión donde desee
-Añadir efectos de conversión de enlaces
-Controlar el espacio entre las letras, líneas, márgenes, bordes de página web
-Especificar las unidades como centímetros, píxeles, puntos y más
-Ocultar el contenido de ciertos navegadores web en ciertas situaciones. Un ejemplo de esto es cuando se tiene algún contenido que desea que aparezca sólo en sus páginas web, pero no en la impresión.
Compatibilidad del navegador Web
Usted debe saber que los diferentes navegadores interpretan los estándares CSS de diferentes maneras y quieren ver cómo su sitio web se ve al menos en los navegadores más populares. Algunos navegadores antiguos no son capaces CSS lectura en absoluto, aunque esto es muy raro ahora y medidas se pueden tomar para manejar estas situaciones. Usted también querrá ver cómo su sitio web se ve en diferentes tamaños de pantalla, visita este link:
► Check Browser Compatibility, Cross Platform Browser Test - Browsershots
Sintaxis CSS
La sintaxis básica de CSS se compone de 3 partes: selector {propiedad: valor}
El selector es típicamente una etiqueta HTML o elemento como <p>, <table>, <h1>.
El siguiente es un ejemplo de código CSS de una hoja de estilo interna. El selector (el <p> en este ejemplo)
Insertar CODE, HTML o PHP:
<html>
<head>
<style type="text/css">
[B]p[/B]
{
color: red
}
</style>
</head>
<body>
<p>
El texto en este ejemplo CSS será de color rojo.
</p>
</body>
</html>La propiedad es la característica del selector que desea cambiar, como el color, la fuente, altura, anchura, etc.
La propiedad (color) está fabricado en negrita en el siguiente ejemplo de código css
Insertar CODE, HTML o PHP:
<html>
<head>
<style type="text/css">
p
{
[B]color:[/B] red
}
</style>
</head>
<body>
<p>
El texto en este ejemplo CSS será de color rojo.
</p>
</body>
</html>Especificación de múltiples propiedades
Si desea especificar más de una propiedad, usted tiene que separar cada propiedad con un punto y coma [;]
El siguiente ejemplo de código CSS muestra cómo hacer esto
Insertar CODE, HTML o PHP:
<html>
<head>
<style type="text/css">
p
{
[B]color:[/B] red;
[B]font-family:[/B] arial;
[B]font-size:[/B] 100%;
}
</style>
</head>
<body>
<p>
El texto en este ejemplo CSS será de color rojo.
</p>
</body>
</html>Asignar valores
Un valor se asigna a la propiedad, tales como la definición del color, estilo de fuente, o el tamaño de la fuente.
Los valores en el siguiente ejemplo de código CSS se hacen negrita.
Insertar CODE, HTML o PHP:
<html>
<head>
<style type="text/css">
p
{
color: [B]red[/B];
font-family: [B]arial[/B];
font-size: [B]100%[/B]
}
</style>
</head>
<body>
<p>
El texto en este ejemplo CSS será de color rojo.
</p>
</body>
</html>El Selector de Clase
Selectores de clases permiten definir diferentes estilos para el mismo tipo de HTML tag / elemento. Por ejemplo, el selector de clase le permite tener 2 tipos de párrafos en su página web y uno está alineado a la izquierda y otro que es el centro alineado.
El siguiente código CSS que muestra un ejemplo de cómo se hace esto.
Insertar CODE, HTML o PHP:
<style type="text/css">
[B]p.left[/B]
{
text-align: left
}
[B]p.center[/B]
{
text-align: center
}
</style >
<body>
<p class="left">
Este párrafo tiene un selector de clase "left".
</p>
<p class="center">
Este párrafo tiene un selector de clase "center".
</p>
</body>Agrupación de selectores
Puede agrupar selectores si comparten las mismas declaraciones. Cada selector tiene que estar separadas por una coma.
El siguiente ejemplo de código css grupos los elementos de cabecera y hará que el texto en ellos de color rojo.
Insertar CODE, HTML o PHP:
<style type="text/css">
[B]h1,h2,h3
{
color: red
}[/B]
</style >
<body>
<h1>
El texto será de color rojo.
</h1>
<h2>
El texto será de color rojo.
</h2>
<h3>
El texto será de color rojo.
</h3>
</body>Algunas Notas:
*Sólo puede especificar un atributo por tag HTML / elemento. El siguiente ejemplo de código CSS es erróneo.
Insertar CODE, HTML o PHP:
<p class="right" class="right">
Este es un párrafo.
</p>*También puede omitir el nombre de la etiqueta en el selector para definir un estilo que será utilizado por todos los elementos HTML que tienen una cierta clase. En el siguiente ejemplo, todos los elementos HTML con class = "center" serán centro alineado:
Insertar CODE, HTML o PHP:
.center {text-align: center}*En el código de abajo tanto el elemento h1 y el elemento p tienen class = "center". Esto significa que ambos elementos seguirán las reglas en el "centro". Selector:
Insertar CODE, HTML o PHP:
<h1 class="center">
Esto será alineado al centro
</h1>
<p class="center">
El presente apartado será también de centro-alineado...
</p>*CSS Comentarios
Usted puede insertar comentarios en el código CSS mucho como usted puede con código HTML. Y al igual que en HTML, el comentario será ignorado por el navegador web. Un comentario CSS comienza con "/ *" y termina con "* /", como en el siguiente ejemplo.
Insertar CODE, HTML o PHP:
/* Este es un comentario */
p
{
font-size: 120%;
/* Este es otro comentario */
color: black;
}
