CSS Tutorial

CSS Introducción
❮ AnteriorSiguiente ❯

¿Qué es CSS?
 CSS SIGNIFICA C ascading S Tyle S heets
 CSS describir SE de Como Deben Mostrar Los Elementos
HTML En La Pantalla, en papel o en Otros Medios
 CSS Ahorra Mucho Trabajo . Puede del Controlar el diseño de
Varias paginas web a la vez.
 Las Hojas de Estilo Externas se almacenan en Archivos CSS

Demostración de CSS - HTML en Una

Pagina - ¡Estilos Múltiples!
Aquí mostraremos Una page HTML Que se Muestra con Cuatro Hojas de
Estilo Diferentes. Haga clic en la "Hoja de Estilo 1", "Hoja de Estilo 2",
"Hoja de Estilo 3", "Hoja de Estilo 4", una Continuación para ver los
Diferentes Estilos:

¿Por Qué CSS USAR?

CSS se utiliza para definir estilos para sus páginas web, incluyendo el
diseño, la disposición y las variaciones en la pantalla para diferentes
dispositivos y tamaños de pantalla.
CSS resuelto un problema grande
HTML fue nunca tuvo la intención de contener etiquetas para dar
formato a una página web!

HTML fue creado para describir el contenido de una página web,

como:

<H1> Este es un encabezado </ h1>

<P> Esto es un párrafo. </ P>

Cuando se añaden etiquetas como <tipo> y los atributos de color a la

especificación HTML 3.2, que comenzó una pesadilla para los
desarrolladores web. El desarrollo de grandes sitios web, que se han
añadido fuentes y color de información para cada página, se realiza en
un proceso largo y costoso.

Para resolver este problema, el World Wide Web Consortium (W3C) creó
CSS.

CSS elimina el estilo de formato de la página HTML!

Si No sabe Qué es HTML, le sugerimos Que lea Nuestro Tutorial de

HTML .

CSS Ahorra Mucho trabajo!

Las definiciones de Estilo normalmente se guardan en Archivos Externos
.css.

Con Un archivo externo de hojas de Estilo, PUEDE change Aspecto de la

ONU Cambiando sitio web completo solo un archivo.

Sintaxis CSS Y selectores

Sintaxis CSS
Un conjunto de reglas CSS Consta de selector y un bloque de
declaración:
El selector Apunta al Elemento HTML Que DESEA estilizar.

El Bloque de Declaración Contiene Una o mas Declaraciones Separadas

por punto y coma.

Cada Declaración INCLUYE UN Nombre de propiedad CSS Y Valor de la

ONU, Separados por dos puntos.

Una Declaración CSS siempre Termina Con Un punto y coma, y los

bloques de Declaración ESTÁN rodeados por llaves.

En the example siguiente, todos los Elementos <p> se alinearán en el

centro, ONU de la estafa de color rojo de texto:

Example
p {
color: red;
text-align: center;
}

Inténtalo tú mismo "

Selectores de CSS
Los selectores de CSS se utilizan para "encontrar" (o select) Elementos
HTML en Función de su Nombre de Elemento, identificación, clase,
atributo y Más.

El selector de Elementos
El selector de Elementos Elementos Selecciona en Función del nombre
del elemento m.
Puede seleccionar todos los elementos <p> en una página como esta
(en este caso, todos los elementos <p> serán centro del texto, con un
color rojo texto):

Ejemplo
p {
text-align: center;
color: red;
}

Inténtalo tú mismo

El selector de ID
El selector de ID utiliza el atributo ID de un elemento HTML para
seleccionar un elemento específico.

El ID DE UN Elemento Dębe Ser Único Dentro De Una page, por lo Que

El selector de ID se utilizació to select Único Elemento de la ONU.

To select ONU Elemento con Específico ONU ID, Escribà ONU Carácter de
almohadilla (#), Seguido del ID del Elemento.

La siguiente regla de Estilo se aplicará al Elemento HTML con id =

"párrafo1":

Example
#para1 {
text-align: center;
color: red;
}

Inténtalo tú mismo "

Nota: ¡ Un nombre de identificación No Puede Comenzar con Número

ONU!

El selector de clase
El selector de clase Selecciona Elementos Con Un atributo de clase
Específico.

Elementos to select con Una clase Específica, Escribá ONU Carácter de

punto (.), Seguido del nombre de la clase.

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

Ejemplo
.center {
text-align: center;
color: red;
}

Inténtalo tú mismo

También se pueden especificar los elementos.

En el siguiente Ejemplo, en solitario Los Elementos <p> con clase =

"centro" se alinearán en el centro:

Example
p.center {
text-align: center;
color: red;
}

Inténtalo tú mismo "

Los Elementos HTML también pueden referirse a Más De Una clase.

En el siguiente Ejemplo, el Elemento <p> se diseñará de Acuerdo con

class = "centro" y class = "grande":

Example
<p class="center large">This paragraph refers to two classes.</p>

Inténtalo tú mismo "

Nota: ¡ Un nombre de clase No Puede Comenzar con Número ONU!

Selectores de agrupación
Si tienes Elementos con las Mismas definiciones de Estilo, la ASI:
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}

Será Mejor agrupar los selectores, para Minimizar el Código.

Para agrupar los selectores, separe selector Cada estafa Una coma.

En el siguiente Ejemplo, HEMOS Agrupado Los selectores del código

anterior:

Example
h1, h2, p {
text-align: center;
color: red;
}

Inténtalo tú mismo "

CSS comentarios
Los comentarios se utilizan para explicar el Código, utiles y pueden Ser
CUANDO edite el código fuente En Una Fecha posterior.

Los comentarios ignorados hijo Por los Navegadores.

Un comentario de CSS Comienza con / * y * Termina con /. Los

comentarios también pueden abarcar Múltiples Líneas:

Example
p {
color: red;
/* This is a single-line comment */
 text-align: center;
}

/* This is
a multi-line
comment */

Inténtalo tú mismo "

¡Ponte a prueba con los Ejercicios!

Ejercicio 1 »Ejercicio 2»Ejercicio 3 »Ejercicio 4»

❮ AnteriorSiguiente ❯