Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Tutorial Guía de Referencia Rápida de CSS 3 [Parte 2]
#1
Hola que tal de nuevo,como prometi y les dije aca les vengo a compartir otros 2 selectores y propiedades del CSS 3,espero que les guste y comprendan el lenguage...

Selectores de CSS 3

Box model
Propiedades:

clear: Permite distribuir elementos de bloque como se necesiten en la estructura web.

Parámetros: none, both, left, right

Cita:EJEMPLOS:

clear:both;
clear:left;
clear:right;

display: Permite definir como debe ser visualizado un elemento HTML. No todos los parámetros son soportados por los navegadores.

Parámetros: none, inline, block, inline-block, list-item, run-in, compact, table, inline-table, table-row-group, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, ruby, ruby-base, ruby-text, ruby-base-group, ruby-text-group

Cita:EJEMPLOS:

Ejemplos de las propiedades compatibles con todos los navegadores:
display: block;
display: inline;
display: list-item;

float: Establece la alineación de un elemento dentro de otro.

Parámetros: left, right, none

Cita:EJEMPLOS:

float:none;
float:left;
float:right;

height:
Determina la altura de un elemento de bloque.
max-height
min-height

Parámetros: auto,longitud en píxels,longitud en %

Cita:EJEMPLOS:

height: 100px;
height: 25%;

width: Determina el ancho de un elemento de bloque.

Parámetros: auto, longitud en píxels, longitud en %

Cita:EJEMPLOS:

width: 100px;
width: 25%;

margin: Determina los márgenes de un elemento con respecto a otro.
margin-top
margin-bottom
margin-left
margin-right

Parámetros: auto, longitud en píxels, longitud en %

Cita:EJEMPLOS:

margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 100px;

padding: Determina el espacio en blanco de un elemento con respecto a otro.
padding-top
padding-bottom
padding-left
padding-right

Parámetros: auto, longitud en píxels, longitud en %

Cita:EJEMPLOS:

padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 100px;

marquee-direction: Determina la dirección inicial en la que se mueve el contenido de una marquesina, esto es cuando el marquee-effect es usado.

Parámetros: foward, reversed

Cita:EJEMPLOS:

marquee-direction:foward;
marquee-direction:reversed;

marquee-play-count: Especifica cuantas veces se mueve el contenido de una marquesina.

Parámetros: infinite, íntegro

Cita:EJEMPLOS:

marquee-play-count:infinite;
marquee-play-count:2;

marquee-speed:
Especifica la velocidad con la que se mueve el contenido de la marquesina.

Parámetros: slow, normal, fast

Cita:EJEMPLOS:

marquee-speed:slow;
marquee-speed:fast;

marquee-style: Determina el tipo de movimiento de su contenido (movimiento de un lado a otro,scroll
, aparece por un lado y se para una vez mostrado todo el contenido,slide
o movimientos alternativos,alternate).

Parámetros: scroll, slide, alternate

Cita:EJEMPLOS:

marquee-style:scroll;
marquee-style:slide;

overflow: Forma de delimitar un contenido determinado de forma que parte del contenido sea visible y la otra parte sea invisible (hidden
), se mueva con barras de desplazamiento (scroll), etc...
overflow-x
overflow-y

Parámetros: visible, hidden, scroll, auto, no-display, no-content

Cita:EJEMPLOS:

overflow:hidden;
overflow:scroll;

rotation: Determina el ángulo de rotación de un elemento de bloque.

Parámetros: ángulo de rotación

Cita:EJEMPLOS:

rotation:45deg;

visibility: Determina si el elemento en sí es visible u oculto.

Parámetros: visible, hidden, collapse

Cita:EJEMPLOS:

visibility:visible;
visibility:hidden;

font
Propiedades:

font-family: Especifica el nombre de la familia de la fuente.

Parámetros: nombre de la familia de la fuente, nombre genérico de la, familia, inherit

Cita:EJEMPLO:

font-family: 'Arial', 'Times-New-Roman', sans-serif;

font-size: Especifica el tamaño de la fuente.

Parámetros: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, inherit
longitud en pixels
longitud en %

Cita:EJEMPLOS:

font-size: 1em;
font-size: 12px;
font-size: 105%;

font-size-adjust: Especifica el tamaño de la fuente que debería utilizarse basándose en el tamaño de las minúsculas en lugar de las mayúsculas

Parámetros: none, inherit
número

Cita:EJEMPLOS:

font-size-adjust: 0.5;
font-size-adjust: none;

font-stretch: Permite ensanchar o estrechar un texto determinado.

Parámetros: normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit

Cita:EJEMPLOS:

font-stretch: expanded;
font-stretch: condensed;

font-style: Determina el estilo de la fuente, si ésta es normal, cursiva, oblicua, etc..

Parámetros: normal, italic, oblique, inherit

Cita:EJEMPLOS:

font-style: normal;
font-style: italic;

font-variant: Determina si la fuente se muestra en mayúsculas normales o del tipo "small-caps" a menor tamaño.

Parámetros: normal, small-caps, inherit

Cita:EJEMPLOS:

font-variant: normal;
font-variant: small-caps;

font-weight: Determina el grosor de la fuente.

Parámetros: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit

Cita:EJEMPLO:

font-weight: bold;

_________________________

Proximamente text (Texto) y column (Columna),saludos!
#2
Como el anterior post. Impecable.

Muchas gracias por compartirlo aquí en Skylium Guiño
WWW
#3
muy buena guia me guste la 1 voy a seguir la 2
#4
hay unas reglas que no me las sabia, Gracias amigo
#5
muy buena guía gracias
#6
Impecable, aunque la mayoria son de css2
#7
Gracias exelente.

esperando la parte 3...
Crear tipo de nodo. Agregar campos CCK. Crear Vista. Enjuague. Y repita.
WWW
#8
Gracias amigo Sonrisa

Lo probare
Firma editada por @Juliens
#9
gracias por compartir esta guia bien explicada! Gran sonrisa
#10
Bien explicado Gran sonrisa me servirá mucho pues apenas y conozco el css jeje pero debo aprender más pues es algo fundamental en el diseño de las webs Lengua ¡Gracias por tu aporte! me ha servido, a favoritos en mi navegador para repasar de nuevo xD
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Tutorial] Trucos con CSS parte I JancoBH 2 313 13-03-2016, 01:00 AM
Último mensaje: JancoBH
  [Aporte] Rails o Django, una guía para decidirse. edisson 4 826 22-10-2015, 12:29 PM
Último mensaje: Minikole
  Guia para desactivar java ante un nuevo agujero 0 day con exploit romeho 7 764 07-09-2014, 03:32 AM
Último mensaje: Luis Felipe Fuentes
  como dominar CSS sin salir del escritorio parte 1 postnix 20 2,082 02-06-2014, 12:33 PM
Último mensaje: piinbook
  50 Herramientas de Diseño Web Gratis! [Parte 3] lukas 2 658 03-07-2013, 09:45 PM
Último mensaje: lukas
  50 Herramientas de Diseño Web Gratis! [Parte 1] lukas 2 439 18-06-2013, 10:59 PM
Último mensaje: fercol
  50 Herramientas de Diseño Web Gratis! [Parte 2] lukas 0 476 18-06-2013, 07:35 PM
Último mensaje: lukas
  Guía para controlar un ataque de DDOS Kevin9908 22 2,334 09-06-2013, 07:15 PM
Último mensaje: ronalsito
  Guía de Referencia Rápida de CSS 3 [Parte 1] Static-X 14 2,003 13-04-2013, 11:05 PM
Último mensaje: Infamer
  Manual de lenguaje HTML (Parte III) DiosOne 2 938 01-04-2013, 08:49 PM
Último mensaje: DiosOne



Usuarios navegando en este tema: 1 invitado(s)