Hojas de estilo en cascada CSS

Las novedades de CSS3

  1. Posibilidad de crear efectos visuales, sin usar imagenes.
  2. Esquinas redondeadas
  3. Creacion de sombras
  4. Fondos semi-transparentes
  5. Gradientes
  6. Usar imagenes como bordes en cajas
  7. Transformacion de cajas, en 2D y 3D: rotar, estrechar - Modulo Transform
  8. Fuentes unicas - Modulo Font
  9. Nuevos selectores - Modulo Selectors
  10. Trasiciones y animaciones - Modulos Transition y Animation
  11. Actuar facilmente con muchos tamaños de pantalla: PC, Smartphones, Tablets - Modulo Page Media
  12. Creacion de columnas - Modulo Multicolumn
  13. Cajas muy flexibles - Modulo Flexible box

Aqui una lista de los modulos CSS:

Animation

Propiedad Descripcion CSS
@keyframes Specifies the animation 3
animation A shorthand property for all the animation properties below, except the animation-play-state property 3
animation-name Specifies a name for the @keyframes animation 3
animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle 3
animation-timing-function Specifies the speed curve of the animation 3
animation-delay Specifies when the animation will start 3
animation-iteration-count Specifies the number of times an animation should be played 3
animation-direction Specifies whether or not the animation should play in reverse on alternate cycles 3
animation-play-state Specifies whether the animation is running or paused 3

Background

Propiedad Descripcion Valores CSS
background Establece todas las propiedades de fondo en una sola declaración {background: url("uno.gif") gray 50% repeat fixed} 1
background-color Establece el color de fondo de un elemento "color" | transparent 1
background-attachment Establece si una imagen de fondo se fija o se desplaza con el resto de la página scroll | fixed 1
background-image Establece la imagen de fondo de un elemento URL | none 1
background-position Establece la posición de partida de una imagen de fondo. Son dos valores horizontal/vertical. "largo fijo" | "porcentaje" |left=0% |center|right/top=0%|center|bottom 1
background-repeat Define la forma en una imagen de fondo se repetirá repeat | repeat-x | repeat-y | no-repeat 1
background-origin Especifica el área de posicionamiento de las imágenes de fondo "box"[,"box"] donde box=border-box|padding|content-bos 3
background-size Especifica el tamañe las imágenes de fondo "bg-size"[,"bg-size"] donde bg-size=lenght|percent|auto 3
background-clip Especifica el área de la pintura del fondo "box"[,"box"] donde box=border|padding|content 3

Border y Outline

Propiedad Descripcion Valores CSS
border Sets all the border properties in one declaration 1
border-color Sets the color of the four borders "color" 1
border-width Sets the width of the four borders "largo fijo" | thin | medium | thick 1
border-style Sets the style of the four borders none | hidden | dotted | dashed | solid |double | groover | outset 1
box-shadow Attaches one or more drop-shadows to the box none | "sombra"[,"sombra"] 3
box-decoration-break Cuando una caja se rompe en un salto de página o columna, especifica si los fragmentos de caja son tratados como fragmentos rotos de un cuadro de continuo, o si cada fragmento está embalada individualmente, con el borde y el relleno. Para los fondos se define como el área de posicionamiento de fondo se deriva de estos múltiples fragmentos y cómo el elemento del fondo se dibuja en su interior. slice | clone 3
border-radius A shorthand property for setting all the four border-*-radius properties "largo fijo" | "percent" 3
border-top Sets all the top border properties in one declaration width | style | "color" 1
border-top-color Sets the color of the top border 1
border-top-style Sets the style of the top border 1
border-top-width Sets the width of the top border 1
border-top-left-radius Defines the shape of the border of the top-left corner 3
border-top-right-radius Defines the shape of the border of the top-right corner 3
border-left Sets all the left border properties in one declaration 1
border-left-color Sets the color of the left border 1
border-left-style Sets the style of the left border 1
border-left-width Sets the width of the left border 1
border-right Sets all the right border properties in one declaration 1
border-right-color Sets the color of the right border 1
border-right-style Sets the style of the right border 1
border-right-width Sets the width of the right border 1
border-bottom Sets all the bottom border properties in one declaration 1
border-bottom-color Sets the color of the bottom border 1
border-bottom-style Sets the style of the bottom border 1
border-bottom-width Sets the width of the bottom border 1
border-bottom-left-radius Defines the shape of the border of the bottom-left corner 3
border-bottom-right-radius Defines the shape of the border of the bottom-right corner 3
outline Sets all the outline properties in one declaration 2
outline-color Sets the color of an outline 2
outline-style Sets the style of an outline 2
outline-width Sets the width of an outline 2
border-image A shorthand property for setting all the border-image-* properties 3
border-image-outset Specifies the amount by which the border image area extends beyond the border box 3
border-image-repeat Specifies whether the image-border should be repeated, rounded or stretched 3
border-image-slice Specifies the inward offsets of the image-border 3
border-image-source Specifies an image to be used as a border 3
border-image-width Specifies the widths of the image-border 3

Box

Propiedad Descripcion CSS
overflow-x Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area 3
overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area 3
overflow-style Specifies the preferred scrolling method for elements that overflow 3
rotation Rotates an element around a given point defined by the rotation-point property 3
rotation-point Defines a point as an offset from the top left border edge 3

Color

Propiedad Descripcion CSS
color-profile Permits the specification of a source color profile other than the default 3
opacity Sets the opacity level for an element 3
rendering-intent Permits the specification of a color profile rendering intent other than the default 3

Content for Paged Media

Propiedad Descripcion CSS
bookmark-label Specifies the label of the bookmark 3
bookmark-level Specifies the level of the bookmark 3
bookmark-target Specifies the target of the bookmark link 3
float-offset Pushes floated elements in the opposite direction of the where they have been floated with float 3
hyphenate-after Specifies the minimum number of characters in a hyphenated word after the hyphenation character 3
hyphenate-before Specifies the minimum number of characters in a hyphenated word before the hyphenation character 3
hyphenate-character Specifies a string that is shown when a hyphenate-break occurs 3
hyphenate-lines Indicates the maximum number of successive hyphenated lines in an element 3
hyphenate-resource Specifies a comma-separated list of external resources that can help the browser determine hyphenation points 3
hyphens Sets how to split words to improve the layout of paragraphs 3
image-resolution Specifies the correct resolution of images 3
marks Adds crop and/or cross marks to the document 3
string-set   3

Dimention

Propiedad Descripcion CSS
width Sets the width of an element 1
min-width Sets the minimum width of an element 2
max-width Sets the maximum width of an element 2
height Sets the height of an element 1
min-height Sets the minimum height of an element 2
max-height Sets the maximum height of an element 2

Flexible Box

Propiedad Descripcion CSS
box-align Specifies how to align the child elements of a box 3
box-direction Specifies in which direction the children of a box are displayed 3
box-flex Specifies whether the children of a box is flexible or inflexible in size 3
box-flex-group Assigns flexible elements to flex groups 3
box-lines Specifies whether columns will go onto a new line whenever it runs out of space in the parent box 3
box-ordinal-group Specifies the display order of the child elements of a box 3
box-orient Specifies whether the children of a box should be laid out horizontally or vertically 3
box-pack Specifies the horizontal position in horizontal boxes and the vertical position in vertical boxes 3

Font

Propiedad Descripcion Valores CSS
font Poner todas las propiedades en una sola declaracion. Estilo, variante, peso, tamaño, familia font: normal bold normal 12px arial 1
font-style Epecifica el estilo del texto normal
italic
oblique
1
font-variant Especifica si se mostrata en minusculas o no. normal
small-caps
1
font-weight Especifica el peso de letra normal
boldbolderlighter
1
font-size Especifica el tamaño de texto. absoluto (px)
absoluto pt
relativo (%)
small
medium
large
1
font-family Especifica la familia de letras del texto. Arial
Sans-serif
Tahoma
1
@font-face A rule that allows websites to download and use fonts other than the "web-safe" fonts 3
font-size-adjust Especificar un reajuste de tamaño de letra. valor entre 0 y 1 3
font-stretch Especifica el espaciado entre letras del texto. normal
wider
narrower
condensed
expanded
utra-condensed
semi-expanded
3

Generated Content

Propiedad Descripcion CSS
content Used with the :before and :after pseudo-elements, to insert generated content 2
counter-increment Increments one or more counters 2
counter-reset Creates or resets one or more counters 2
quotes Sets the type of quotation marks for embedded quotations 2
crop Allows a replaced element to be just a rectangular area of an object, instead of the whole object 3
move-to Causes an element to be removed from the flow and reinserted at a later point in the document 3
page-policy Determines which page-based occurance of a given element is applied to a counter or string value 3

Grid

Propiedad Descripcion CSS
grid-columns Specifies the width of each column in a grid 3
grid-rows Specifies the height of each column in a grid 3

Gradiente

Propiedad Descripcion CSS
linear-gradient Specifies the width of each column in a grid 3
radial-gradient Specifies the height of each column in a grid 3
repeating-linear-gradient Specifies the height of each column in a grid 3
repeating-radial-gradient Specifies the height of each column in a grid 3

Propiedad Descripcion CSS
target A shorthand property for setting the target-name, target-new, and target-position properties 3
target-name Specifies where to open links (target destination) 3
target-new Specifies whether new destination links should open in a new window or in a new tab of an existing window 3
target-position Specifies where new destination links should be placed 3

lineas - Linebox

Propiedad Descripcion CSS
alignment-adjust Allows more precise alignment of elements 3
alignment-baseline Specifies how an inline-level element is aligned with respect to its parent 3
baseline-shift Allows repositioning of the dominant-baseline relative to the dominant-baseline 3
dominant-baseline Specifies a scaled-baseline-table 3
drop-initial-after-adjust Sets the alignment point of the drop initial for the primary connection point 3
drop-initial-after-align Sets which alignment line within the initial line box is used at the primary connection point with the initial letter box 3
drop-initial-before-adjust Sets the alignment point of the drop initial for the secondary connection point 3
drop-initial-before-align Sets which alignment line within the initial line box is used at the secondary connection point with the initial letter box 3
drop-initial-size Controls the partial sinking of the initial letter 3
drop-initial-value Activates a drop-initial effect 3
inline-box-align Sets which line of a multi-line inline block align with the previous and next inline elements within a line 3
line-stacking A shorthand property for setting the line-stacking-strategy, line-stacking-ruby, and line-stacking-shift properties 3
line-stacking-ruby Sets the line stacking method for block elements containing ruby annotation elements 3
line-stacking-shift Sets the line stacking method for block elements containing elements with base-shift 3
line-stacking-strategy Sets the line stacking strategy for stacked line boxes within a containing block element 3
text-height Sets the block-progression dimension of the text content area of an inline box 3

List

Propiedad Descripcion CSS
list-style Sets all the properties for a list in one declaration 1
list-style-image Specifies an image as the list-item marker 1
list-style-position Specifies if the list-item markers should appear inside or outside the content flow 1
list-style-type Specifies the type of list-item marker 1

Margin

Propiedad Descripcion Valores CSS
margin Poner todos los margenes. Arriba, derecho, abajo, izquierdo. inherit
auto
px, cm
%
1
margin-top Margen superios
margin-left Margen izquierdo.
margin-bottom Margen inferior.
margin-right Margen derecho.

Marquee

Propiedad Descripcion Opciones CSS
marquee-direction Sets the direction of the moving content forward | reverse 3
marquee-play-count Sets how many times the content move 3
marquee-speed Sets how fast the content scrolls 3
marquee-style Sets the style of the moving content scroll | slide | alternate 3

Multi-column

Propiedad Descripcion CSS
column-count Specifies the number of columns an element should be divided into 3
column-fill Specifies how to fill columns 3
column-gap Specifies the gap between the columns 3
column-rule A shorthand property for setting all the column-rule-* properties 3
column-rule-color Specifies the color of the rule between columns 3
column-rule-style Specifies the style of the rule between columns 3
column-rule-width Specifies the width of the rule between columns 3
column-span Specifies how many columns an element should span across 3
column-width Specifies the width of the columns 3
columns A shorthand property for setting column-width and column-count 3

Padding

Propiedad Descripcion CSS
padding Sets all the padding properties in one declaration 1
padding-top Sets the top padding of an element 1
padding-left Sets the left padding of an element 1
padding-right Sets the right padding of an element 1
padding-bottom Sets the bottom padding of an element 1

Paged Media

Propiedad Descripcion CSS
fit Gives a hint for how to scale a replaced element if neither its width nor its height property is auto 3
fit-position Determines the alignment of the object inside the box 3
image-orientation Specifies a rotation in the right or clockwise direction that a user agent applies to an image 3
page Specifies a particular type of page where an element SHOULD be displayed 3
size Specifies the size and orientation of the containing box for page content 3

Positioning

Propiedad Descripcion Valor CSS
clear Specifies which sides of an element where other floating elements are not allowed 1
clip Clips an absolutely positioned element auto | "shape" 2
cursor Specifies the type of cursor to be displayed 2
display Specifies how a certain HTML element should be displayed block | inline 1
float Especificar si un elemento es flotante o no. none | left | right | initial | inherit 1
overflow Specifies what happens if content overflows an element's box 2
position Specifies the type of positioning method used for an elemen Static | relative | absolute | center | page | fixed | 2
top Specifies the top position of a positioned element auto | "largo" | % 2
right Specifies the right position of a positioned element auto | "largo" | % 2
bottom Specifies the bottom position of a positioned element auto | "largo" | % 2
left Specifies the left position of a positioned element auto | "largo" | % 2
visibility Specifies whether or not an element is visible 2
z-index Sets the stack order of a positioned element auto | "integer" 2

Print

Propiedad Descripcion CSS
orphans Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element 2
page-break-after Sets the page-breaking behavior after an element 2
page-break-before Sets the page-breaking behavior before an element 2
page-break-inside Sets the page-breaking behavior inside an element 2
widows Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element 2

Ruby

Propiedad Descripcion CSS
ruby-align Controls the text alignment of the ruby text and ruby base contents relative to each other 3
ruby-overhang Determines whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base 3
ruby-position Controls the position of the ruby text with respect to its base 3
ruby-span Controls the spanning behavior of annotation elements 3

Speech

Propiedad Descripcion CSS
mark A shorthand property for setting the mark-before and mark-after properties 3
mark-after Allows named markers to be attached to the audio stream 3
mark-before Allows named markers to be attached to the audio stream 3
phonemes Specifies a phonetic pronunciation for the text contained by the corresponding element 3
rest A shorthand property for setting the rest-before and rest-after properties 3
rest-after Specifies a rest or prosodic boundary to be observed after speaking an element's content 3
rest-before Specifies a rest or prosodic boundary to be observed before speaking an element's content 3
voice-balance Specifies the balance between left and right channels 3
voice-duration Specifies how long it should take to render the selected element's content 3
voice-pitch Specifies the average pitch (a frequency) of the speaking voice 3
voice-pitch-range Specifies variation in average pitch 3
voice-rate Controls the speaking rate 3
voice-stress Indicates the strength of emphasis to be applied 3
voice-volume Refers to the amplitude of the waveform output by the speech synthesises 3

Table

Propiedad Descripcion Valor CSS
border Define Width, Style y Color en un solo comando Border: 1px, solid, red; 2
border-collapse Specifies whether or not table borders should be collapsed   2
border-spacing Specifies the distance between the borders of adjacent cells   2
caption-side Specifies the placement of a table caption   2
empty-cells Specifies whether or not to display borders and background on empty cells in a table   2
table-layout Sets the layout algorithm to be used for a table   2

Text

Propiedad Descripcion Valor CSS
color Sets the color of text 1
text-justify Specifies the justification method used when text-align is "justify" 3
text-align Specifies the horizontal alignment of text left, center, right, justify, inherit 1
vertical-align Poner la alineacion vertical top, botton, super, sub, baseline, %, inherit 1
text-align-last Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" 3
direction Specifies the text direction/writing direction 2
letter-spacing Increases or decreases the space between characters in a text 1
line-height Sets the line height 1
text-decoration Establece la decoracion del texto. underline, overline, line-through, blink 1
text-indent Establece la indentacion de la primera letra de un bloque de texto. px, pt 1
text-transform Controls the capitalization of text 1
unicode-bidi   2
white-space Specifies how white-space inside an element is handled 1
word-spacing Increases or decreases the space between words in a text 1
hanging-punctuation Specifies whether a punctuation character may be placed outside the line box 3
punctuation-trim Specifies whether a punctuation character should be trimmed 3
text-outline Specifies a text outline 3
text-overflow Specifies what should happen when text overflows the containing element 3
text-shadow Adds shadow to text 3
text-wrap Specifies line breaking rules for text 3
word-break Specifies line breaking rules for non-CJK scripts 3
word-wrap Allows long, unbreakable words to be broken and wrap to the next line 3

2D/3D Transform

Propiedad Descripcion CSS
transform Applies a 2D or 3D transformation to an element 3
transform-origin Allows you to change the position on transformed elements 3
transform-style Specifies how nested elements are rendered in 3D space 3
perspective Specifies the perspective on how 3D elements are viewed 3
perspective-origin Specifies the bottom position of 3D elements 3
backface-visibility Defines whether or not an element should be visible when not facing the screen 3

Ejemplo: CSS 3D Meninas
Ejemplo: 24 ways
HTML.net

Transition

Propiedad Descripcion CSS
transition A shorthand property for setting the four transition properties 3
transition-property Specifies the name of the CSS property the transition effect is for 3
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete 3
transition-timing-function Specifies the speed curve of the transition effect 3
transition-delay Specifies when the transition effect will start 3

User-interface

Propiedad Descripcion CSS
appearance Allows you to make an element look like a standard user interface element 3
box-sizing Allows you to define certain elements to fit an area in a certain way 3
icon Provides the author the ability to style an element with an iconic equivalent 3
nav-down Specifies where to navigate when using the arrow-down navigation key 3
nav-index Specifies the tabbing order for an element 3
nav-left Specifies where to navigate when using the arrow-left navigation key 3
nav-right Specifies where to navigate when using the arrow-right navigation key 3
nav-up Specifies where to navigate when using the arrow-up navigation key 3
outline-offset Offsets an outline, and draws it beyond the border edge 3
resize Specifies whether or not an element is resizable by the user 3

Para tener una idea del soporte de cada atributo en cada navegador, recomiendo visitar alguna de estas paginas: