Scribd
Cargar
18 vistas3 páginas

Introducción CSS

CSS (Cascading Style Sheets) es un lenguaje de estilo utilizado para modificar la presentación visual de sitios web, separando el contenido (HTML) de la estética. Permite referenciar elementos HTML y aplicarles propiedades visuales como ancho, alto y color. La sintaxis de CSS incluye selectores y propiedades, y se pueden vincular hojas de estilo externas a documentos HTML mediante etiquetas <link>.

Cargado por

nvmusso
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
18 vistas3 páginas

Introducción CSS

CSS (Cascading Style Sheets) es un lenguaje de estilo utilizado para modificar la presentación visual de sitios web, separando el contenido (HTML) de la estética. Permite referenciar elementos HTML y aplicarles propiedades visuales como ancho, alto y color. La sintaxis de CSS incluye selectores y propiedades, y se pueden vincular hojas de estilo externas a documentos HTML mediante etiquetas <link>.

Cargado por

nvmusso
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

CSS​

(Cascade Style Sheet)


​

Es un lenguaje de estilo que se utiliza para modificar la presentación visual de un sitio


web. Surge con el objetivo de tener separado por un lado el contenido (HTML) y por
otro diferente, la estética.

Con CSS es posible hacer referencia a cualquier elemento html y modificarlo


visualmente, otorgándole a dicho elemento un ancho, alto, color, etc, según
corresponda.

El consorcio W3C (​
w3c.org​) es una organización mundial que se dedica a la
estandarización de casi todas las tecnologías dedicadas a la web.

El lenguaje HTML se utiliza para​


estructurar contenido​ , mientras que la tarea de
interpretar recae en el navegador para poder visualizar su contenido final.

Sintaxis CSS
Para escribir una hoja de estilos se debe respetar la siguiente sintaxis de ejemplo:

selector {
propiedad​
:​valor;
}

body {
background​
-​
color​
:​tomato;​/* Establece un fondo de la página de color tomate */
color: #006699 ​ /* Establece el color de la tipografía con valores hexadecimales
*/
}

Es necesaria la utilización de llaves de apertura y cierre {} para contener las


propiedades y valores del selector: elemento html, clase o id que estamos
referenciando.

Ejemplo HTML
<div class=”clase” id=”identificador”>​
Ejemplo html​
</div>

Ejemplo CSS
div {
propiedad​
:​valor;
}

.​
clase {
propiedad​
:​valor;
}

#identificador {
propiedad​
:​valor;
}
Hojas de estilos externas
Para vincular una o más hojas de estilos a un HTML se debe incluir dentro de la
etiqueta <head> la o las siguientes lineas
<link​​
rel​
=​
"stylesheet"​​
type​
=​
"text/css"​​
href​
=​
"css/estilos-1.css"​​
/>
<link​​
rel​
=​
"stylesheet"​​
type​
=​
"text/css"​​
href​
=​
"estilos-2.css"​​
/>

Se debe respetar correctamente el nombre del archivo (mayusculas y minusculas) y


su ubicación en directorios.

Propiedades básicas

1. Maquetación básica

● width​:​Ancho de un elemento.
● height​:​Alto de un elemento.
● vertical-align​: Alineamiento vertical dentro de un elemento.
● margin​ :​Espacio que se añade entre dos elementos. Se puede diferenciar por
lado en sentido horario (arriba, abajo, izquierda, derecha).
● padding​ :​Relleno interior que se añade en los bordes del elemento. A
diferencia de margin, cuenta para el tamaño del elemento.
● float​
:​
Mueve el elemento todo lo posible hacia el lado indicado. Esta propiedad
se usa en el​posicionamiento flotante​
​ de CSS. El tema del​
posicionamiento​
​ en
CSS no es trivial y conviene estudiar​cómo funciona​
​ antes de usar esta
propiedad.

2. Fuentes y texto
● font-family​ : Tipo de letra
● font-size​: Tamaño de letra
● font-weight​ : Peso (normal, negrita, …)
● font-style​ : Estilo (normal, cursiva, …)
● text-decoration​ : “Decoraciones” como subrayado, tachado, etc.
● text-align​ : Alineación del texto (izquierda, derecha, etc.)
● text-transform​ : Mostrar un texto en mayúsculas, minúsculas o la primera
letra de cada palabra en mayúsculas.

3. Color y fondos

● color​:​
Color del texto de un elemento. Se puede especificar en diferentes
formatos como palabras predefinidas (red, green, etc.), RGB o como valor
hexadecimal (#334400).
● background-color​ : Color del fondo del elemento.
● background-image​ : Permite especificar una imagen de fondo.
● background-repeat​ : Permite usar una imagen a modo de mosaico en
diferentes modalidades.
● box-shadow​ : Crear un efecto de sombra para un elemento.

4. Listas
● list-style-image​: Usar la imagen especificada como viñeta para la lista.
● list-style-type​
: Diferentes estilos de viñetas y estilos de numeración para
elementos de lista.

5. Bordes

● border​:​Añade un borde a un elemento y establece algunas propiedades


(grosor, estilo de línea, etc.)
● border-color​ : Color del borde.
● border-style​ : Diferentes estilos para el borde (sólido, puntos, etc.)
● border-radius​ : Permite crear esquinas redondeadas para un elemento.

Referencia CSS​:
http://www.w3schools.com/cssref/
http://www.w3schools.com/cssref/default.asp
http://www.w3schools.com/cssref/css_selectors.asp

Enlaces:
http://librosweb.es/libro/css/
http://librosweb.es/libro/css_avanzado/
http://en.wikipedia.org/wiki/CSS_frameworks

También podría gustarte