Manual CSS

Manual CSS
Para asignar una regla a un elemento por su etiqueta: p { font-size: 20px} Para asignar una regla a un elemento por su id: #id01 { font-size: 20px} Para asignar una regla a un elemento por su clase: .grande { font-size: 32px} Asignando reglas a todos los elementos de la pgina: * { margin: 0px } Asignando varias reglas a un elemento: p { margin:0px; padding: 0px } Asignando reglas a varios elementos: header, section, footer { display: block; }
Pseudo-clase nt-child(n): Asigna una regla a cada elemento que sea hijo in importar su padre. Ejemplo para cambiar de color de fondo a todos los primeros hijos que sean p: p:nth-child(1){ background: #999999}
La n es un parmetro que puede ser nmero para indicar posicin, odd para hijos que sean impares y even para hijos pares.
first-child, last-child y only-child: Similar a nt-child. Ejemplo: p: last-child{ background: #999999}
Selectores Padre > hijo: Aplica reglas al hijo que venga de cierto padre. Ejemplo: Aplicando reglas a todos los p que vengan del div de clase div1: div.div1 > p {background: #ccc}
Mas (+) Aplica reglas al elemento (slo uno) que sigue al elemento inicial especificado. Deben ser hijos del mismo padre. Ejemplo: Aplicando reglas al div que sigue del div de clase div1: div.div1 + div {background: #ccc} Aplicando reglas al p que sigue de p con clase estilo1: p.estilo1 + p {background: #ccc}
Virgulilla (~) Aplica reglas a todos los elementos que sigan despus de un elemento inicial especificado. Deben ser hijos del mismo padre. Ejemplo: Aplicar fondo a todos los que sigan de un p de clase clase1: p.estilo1 ~ p {background: #ccc}
Dando estilo al documento: En este ejemplo se dar estilo a un div que contiene lo que se desea mostrar al usuario #agrupar { width: 960px; margin: 15px auto; text-align: left; } Explicacin: Width especifica el ancho del div, margin acepta superior, derecho, inferior, izquierdo, en este caso auto determina automticamente el resto de mrgenes de acuerdo al
ancho del div. Si slo se especifica un parmetro, ste se utilizar para todos, si se especifican dos valores, se utilizarn para superior inferior y derecha izquierda.
Diseo web responsive: Para ajustar el tamao de los elementos, se debe crear una consulta en CSS. Esta consulta consiste en detectar si el tamao de la pantalla que est mostrando el documento es mayor o menor a una resolucin especificada por el usuario. Ejemplo: Creamos la siguiente pgina:
<!DOCTYPE html> <head> <link rel="stylesheet" href="estilo.css" /> <link rel="stylesheet" href="media-queries.css" /> <meta name="viewport" content="width=device-width"> </head> <body> <div id="contenido"> <header id="cabecera"> <h1>Inversiones Garibaldi</h1> </header> <nav id="navegador"> <ul> <li>Productos</li> <li>Ofertas del mes</li> <li>Lo mas vendido</li> </ul> </nav> <section id="seccion"> <article class="art_main"> Celulares pasando </article> <article class="art_main"> Celulares baratos </article> <article class="art_main"> Laptop pasando </article> <article class="art_main"> Laptop baratas </article> </section> <aside id="lateral"> <article class="art_lateral"> Novedad celular </article> <article class="art_lateral"> Novedad laptop </article> <article class="art_lateral"> recibir email </article> <article class="art_lateral"> Facebook
</article> </aside> <footer id="pie"> <small>Derechos reservados © Inversiones Garibaldi</small> </footer> </div> </body> </html>
Le aadimos el siguiente estilo:

@charset "utf-8"; /* CSS Document */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } #cabecera { text-align:center } #contenido { width: 720px; margin: 0px auto; } #cabecera { height: 160px } #seccion { width: 480px; float: left; } /*art_main tiene 460px de ancho */ .art_main { height: 220px; width: 460px;margin: 10px; background: #0C6} #lateral { width: 240px; float: left;} .art_lateral { height: 220px; width: 220px;background: #069; margin: 10px } #pie{ clear: both } Y este ser el archivo CSS que har la consulta a la pgina: @media screen and (max-width: 700px) { #contenido { width: 480px; } #seccion { float: none; } #lateral { width: 480px;float: none; } .art_lateral { float: left } }
Si max-width llega a 700 o menos se usarn las siguientes reglas CSS. Para cambiar de valor de o menos a o ms se usar min-width. Para que un dispositivo mvil de Apple no ajuste automticamente la pgina, se usa: <meta name="viewport" content="width=device-width; initial-scale=1.0"> Para que un dispositivo android utilice los queries: <meta name="viewport" content="width=device-width"> Para ajustar el tamao de las imgenes de acuerdo a la resolucin de la pantalla: img { max-width: 100%; }
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Manual CSS

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Manual CSS

Încărcat de

Drepturi de autor:

Formate disponibile

Manual CSS

first-child, last-child y only-child: Similar a nt-child. Ejemplo: p: last-child{ background: #999999}

Le aadimos el siguiente estilo:

S-ar putea să vă placă și