Resumencss

Breve introduccin a CSS
Vistanos roboticajaen.wordpress.com
Declaracin CSS:
propiedad:
color:
valor
#ff0000;
Selector:
Regla :
p; span; .clase; #identificador

selector1, selector2 {
propiedad1: valor1;
propiedad2: valor2;
}
para varios selectores.
p span {
propiedad1: valor1;
propiedad2: valor2;
}
para referenciar solo elementos que estn dentro de otros elementos (separar por espacios). En el
caso anterior elementos <span> que son hijos de elementos <p>.
Propiedades
font
Permite declarar al mismo tiempo varios estilos para el mismo texto, como grosor, tamao, tipo de
letra, etc. Los valores deben ser separados por un espacio declarados en un orden especfico (p.e.,
font: bold 24px arial, sans-serif).
Podemos adems declarar cada estilo de forma independiente usando las propiedades asociadas
font-style, font-variant, font-weight, font-size, line-height y font-family.
color
Declara el color de un elemento. El valor puede ser expresado en un nmero hexadecimal (#ff0000)
o nmeros decimales (rgb(a, b, c))
background
Permite aplicar al mismo tiempo varios estilos al fondo de un elemento, como color, imagen,
repeticin, etc. Los valores especificados deben estar separados por un espacio.
P.e.: background: #0000ff url('bricks.jpg') no-repeat;
width
Declara el ancho de un elemento (p.e., width: 200px;).
height
Declara la altura de un elemento (p.e., height: 200px;).
margin
Declara el margen externo de un elemento. Puede tomar cuatro valores: up (arriba), right (derecha),
bottom (debajo), y left (izquierda), en ese orden y separado por un espacio.
Si solo uno, dos o tres parmetros son declarados, los otros tomarn sus mismos valores. Adems,
los valores pueden ser tambin declarados de forma independiente (p.e., margin-top: 10px;)
padding
Propiedad que declara el margen interno de un elemento. Es decir, el espacio alrededor del
contenido de un elemento y dentro de sus bordes. Los valores son declarados del mismo modo que
la propiedad margin.
Los valores pueden ser tambin declarados independientemente usando las propiedades asociadas
(p.e., padding-top: 10px;).
border
Nos permite declarar el ancho, estilo y color del borde de un elemento (p.e., border: 1px solid
#990000;).
Los valores posibles para el estilo son none, hidden, dotted, dashed, solid, double, groove, ridge,
inset, outset o inherit.
Esta propiedad tiene tambin propiedades asociadas para cada lado del elemento (p.e., border-top).
Tambin podemos asignar valorse para el ancho, estilo y color de cada lado de forma independiente
agregando el nombre al final de la propiedad, pero siempre tenemos que declarar el borde antes de
hacer cualquier cambio (p.e., border-style: solid; border-top-width: 10px;).
text-align
Propiedad que alinea un elemento dentro de su padre. Los valores posibles son left, right, center,
justify o inherit.
Estilos en Lnea
Podemos asignar estilos dentro de cada elemento por medio de un atributo.
<body>
<p style=font-size: 20px>Texto en 20px de tamao</p>
</body>
Esta tcnica no es recomendable para proyectos complejos.
Estilos embebidos
Como alternativa a la tcnica anterior podemos insertar estilos en la cabecera del documento y usar
referencias para afectar los correspondientes elementos HTML.
<head>
<title>Ttulo de la pgina</title>
<style>
p { font-size: 20px; }
</style>
</head>
Archivos externos
La solucin anterior requiere que agregemos una copia de los estilos a cada documento del sitio
web. La solucin para evitar esta replicacin es mover todos los estilos a un archivo externo y usar
el elemento <link> para insertarlo en todo documento que lo necesite.
<head>
<title>Ttulo de la pgina</title>
<link rel=stylesheet href=estilo.css>

</head>
Referencias
Existen tres mtodos bsicos para seleccionar el elemento HTML que ser afectado por una regla
CSS:
i)
por la palabra clave del elemento
ii)
por el atributo id
iii)
por el atributo class
Referenciando por Palabra Clave

Afectar todos los elementos de ese tipo en el documento. P.e., p {font-size: 20px}
Referenciando con el atributo id

El atributo id es un identificador del elemento, y debe ser nico en todo el documento (no puede ser
duplicado).
#identificador1 { font-size: 20px; }
Esta es una forma extremadamente especfica de referenciar un elemento y por ello es normalmente
aplicada para los de uso general, como elementos estructurales. El atributo id y su especificidad es
de hecho ms apropiado para referenciar elementos desde Javascript.
Referenciando con el atributo class

Este atributo es ms flexible y el mismo valor puede ser empleado en todos los elementos HTML
que comparten los mismos estilos.
.clase1 { font-size:
20px; }
Se pueden asigner varias clases al mismo elemento. P.e., class = clase1 clase2.
La clase puede declararse exclusivamente para ciertos tipos de elementos agregando un selector
antes del punto.
p.clase1 { font-size: 20px; }
Referenciando con cualquier atributo

Las ltimas versiones de CSS incorporaron un Selector de Atributos. Ahora podemos referenciar un
elemento por cualquier atributo.
p[name] { font-size: 20px; }
Es posible especificar el valor del atributo. P.e., p[name=nombre] { font-size: 20px }
CSS3 permite hacer una seleccin ms detallada. P.e.:
p[name^=mi] { font-size: 20px }

Para todo elemento <p> que posee un atributo name cuyo valor comienza en mi (p.e., micoche).
p[name$=mi] { font-size: 20px }
Para todo elemento <p> que posea un atributo name cuyo valor termina en mi.
p[name*=mi] { font-size: 20px }
Para todo elemento <p> que posee un atributo name cuyo valor contiene el texto mi.
Referenciando con Pseudo-clases

Nos permiten referenciar elementos HTML por sus caractersticas, como la posicin en el cdigo o
determinadas condiciones.
<body>
<div id=envoltura>
<p class=clase1>Mi texto1</p>
</div>
</body>
Los cuatro elementos <p> son hermanos entre s y a su vez todos hijos del mismo elemento <div>.
p:nth-child(2) {
background: #999999;
}
Una pseudo-clase se agrega usando dos puntos luego de la referencia y antes del nombre. Esta regla
tambin podra ser escrita como .envoltura:nth-child(2).
La pseudo-clase nth-child() permite encontrar un hijo especfico. Las palabras clave odd (impar) y
even (par) nos aportan ms eficiencia a la hora de referirnos a los ndices.
Otras pseudo-clases importantes son: first-child, last-child y only-child; esta ltima solo afecta un
elemento si es el nico hijo de su elemento padre.
Otra pseudo-clase importante es la de negacin, not().
:not(p) {
margin: 0px;
}
La regla anterior asigna un margen de 0 pxeles a cada elemento en el documento excepto los
elementos <p>. Podemos usar cualquier referencia que necesitemos, p.e.,
:not(.miclase) {
margin: 0px;
}
Nuevos Selectores
El selector > indica que el elemento afectado es el segundo elemento cuando tiene al primer
elemento como su padre.
div > p.miclase {
color: #990000;
}
El selector construido con el smbolo + referencia al segundo elemento cuando est inmediatamente
precedido por el primer elemento. Ambos elementos deben compartir el mismo elemento padre.
p.miclase + p {
color: #990000;
}
El ltimo selector es construido con el smbolo ~ , es similar al anterior, pero el elemento afectado
no tiene que estar necesariamente precediendo el primer elemento. Adems, puede afectar a ms de
un elemento.
p.miclase ~ p {
color: #990000;
}
Aplicando CSS al Documento

Cada navegador ordena los elementos por defecto bsicamente acorde con su tipo: bloque (block) o
en lnea (inline).
Los elementos bloque son posicionados uno sobre otro, desde la parte superior hasta la parte
inferior de la pgina web. Mostrado por defecto tan ancho como sea posible y tan alto como la
informacin que contiene
Los elementos en lnea son posicionados lado a lado, uno luego del otro, sin un salto de lnea a
menos que no haya ms espacio horizontal.
Modelos de Caja
Los navegadores consideran cada elemento como una caja.
Modelo de Caja Tradicional

a) Documento HTML
Es un modelo ampliamente adoptado y usado desde la primera versin de CSS. Es soportado por
todos los navegadores del mercado.
El modelo de Caja Tradicional necesita que las cajas sean envueltas por una caja general para
ordenarlas horizontalmente, esta envoltura se consigue agregando un elemento <div>.
b) Selector Universal *
Asigna la misma regla a todo elemento en el documento y es til para establecer algunas reglas
bsicas.
Normalmente, los mrgenes de la mayora de los elementos deben ser personalizados o mantenidos
al mnimo. Algunos elementos tienen por defecto mrgenes mayores que cero y a veces son
demasiado anchos.
*{
margin: 0px;
padding: 0px;
}
c) Cabeceras
Utilizaremos los elementos <h1> y <h2> para declarar los ttulos y los subttulos de las diferentes
secciones.
h1 {
font: bold 20px verdana, sans-serif;
}
h2 {
}
d) Declarando nuevos elementos de HTML5
Otra regla bsica es la definicin por defecto de los elementos estructurales de HTML5. Algunos
navegadores todava no reconocen estos elementos o los tratan como elementos en lnea.
header, section, footer, aside, nav, article, figure, figcaption, hgroup {
display: block;
}
e) Centrando el cuerpo del documento
Normalmente, el contenido de este elemento debe ser posicionado horizontalmente, y su tamao
debe ser establecido a un valor especfico o mximo para obtener un diseo consistente a travs de
las distintas configuraciones.
body {
text-align: center;
}
Por defecto, <body> tiene un ancho de 100%.
f) Caja principal
Especificaremos el tamao mximo o fijo del contenido del cuerpo. Consideraremos al <div>
agregado como envoltura de todo el contenido del cuerpo. Es decir, la caja principal que contendr
el resto de las cajas y que determinar el ancho mximo para los dems elementos.
#envoltura {
width: 960px;
margin: 15px auto; /* espacio de 15px en la parte superior e inferior. */

text-align: left; /* devuelve este estilo a su valor por defecto, pues es una propiedad
}
hereditaria (body) */
Se ha determinado el ancho fijo para la caja de 960 px (los valores ms comunes entre 960 y 980).
En la regla del apartado anterior especificamos que el contenido del cuerpo sea centrado
horizontalmente con el estilo text-align: center. Pero esto solo afecta al contenido de elementos en
lnea, como textos o imgenes.
Para elementos de tipo bloque, como <div>, necesitamos declarar un valor especfico para sus
mrgenes y as adaptarlos automticamente al tamao del elemento padre.
g) Cabecera
Luego de la etiqueta de apertura del envoltorio, <div>, se encuentra el elemento <header>. Por
defecto, cada elemento del tipo bloque, as como el cuerpo, tienen un ancho de 100%. En el caso del
cuerpo ese espacio es el ancho de la ventana, pero para el resto de los elementos, el espacio mximo
disponible ser determinado por el tamao de su elemento padre.
#cabecera {
background: #FFFBB9;
border: 1px solid #999999;
padding: 20px;
text-align: center;
}
h) Barra de navegacin
<nav> es un elemento bloque, por lo que ser ubicado debajo del elemento anterior, su ancho por
defecto es 100%.
#menu {
background: #cccccc;
padding: 5px 15px;
text-align: center;
}
li.navegacion {
display: inline-block;
list-style: none;
padding: 5px;
}
Asignamos el estilo display: inline-block para convertirlos en elementos en lnea. Los elementos
afectados por el valor inline-block no generan saltos de lnea, pero nos dejan tratar a los elementos
como bloques y asignar un ancho para cada uno de ellos. En caso de no especificarse, el tamao del
elemento es ajustado al tamao de su contenido.
i) rea principal y barra lateral
Usando la propiedad float, podemos posicionar las cajas a derecha o a izquierda de acuerdo con
nuestras necesidades. Los elementos afectados por float actan como elementos bloque, con la
diferecia de que son dispuestos de acuerdo al valor de esta propiedad. Son movidos a la izquierda o
la derecha del espacio disponible, tan lejos como sea posible.
#seccion {
float: left;
width: 660px;
margin: 20px; /* margen a ambos lados, es decir 40px en total*/
}
#lateral {
float: left;
width: 220px;
margin: 20px 0px;
padding: 20px;
background: #CCCCCC;
}
j) Pie de pgina
La propiedad clear restaura el flujo normal del documento. Esta propiedad limpia el rea ocupada
por el elemento, no permitindole posicionarse adyacente a una caja flotante. El valor ms comn
es both, lo que significa que ambos lados sern limpiados y que el elemento respetar el flujo
natural (ya no flota).
#pie {
clear: both;
text-align:
center;
padding:
20px;
border-top: 2px solid #999999;
}

Resumencss

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Resumencss

Diunggah oleh

Hak Cipta:

Format Tersedia

Breve introduccin a CSS

p; span; .clase; #identificador

<link rel=stylesheet href=estilo.css>

Referenciando por Palabra Clave

Referenciando con el atributo id

Referenciando con el atributo class

Referenciando con cualquier atributo

p[name^=mi] { font-size: 20px }

Referenciando con Pseudo-clases

Aplicando CSS al Documento

Modelo de Caja Tradicional

margin: 15px auto; /* espacio de 15px en la parte superior e inferior. */

Anda mungkin juga menyukai