Create css-es.html

1 files changed, 327 insertions, 0 deletions

diff --git a/css-es.html b/css-es.html
new file mode 100644
index 00000000..506a9467
--- /dev/null
+++ b/css-es.html
@@ -0,0 +1,327 @@
+---
+language: css
+contributors:
+    - ["Mohammad Valipour", "https://github.com/mvalipour"]
+    - ["Marco Scannadinari", "https://github.com/marcoms"]
+    - ["Geoffrey Liu", "https://github.com/g-liu"]
+    - ["Connor Shea", "https://github.com/connorshea"]
+    - ["Deepanshu Utkarsh", "https://github.com/duci9y"]
+    - ["Brett Taylor", "https://github.com/glutnix"]
+    - ["Tyler Mumford", "https://tylermumford.com"]
+translators:
+    - ["miky ackerman", "https://github.com/mikyackerman"]
+lang: es-es
+filename: learncss-es.css
+---
+
+Paginas web estan contruidas en HTML, lo cual especifica el contenido de una pagina
+CSS(Hoja de Estilos en Cascada) es un lenguaje separado el cual especifica
+la **apariencia** de una pagina.
+
+codigo CSS esta hecho de *reglas* estaticas. Cada regla toma uno o mas *selectores* y da *valores* especificos a un numero de *propiedades* visuales. Esas propiedades estan entonces aplicadas a los elementos indicados en una pagina por los selectores
+
+Esta guia ha sido escrita con CSS 2 en mente, la cual es extendida por una nueva caracterica de CSS 3.
+
+**NOTA:** Debido a que CSS produce resultados visuales, para aprenderlo, necesitas
+Probar todo en un patio de juegos CSS como [dabblet] (http://dabblet.com/).
+El objetivo principal de este artículo es la sintaxis y algunos consejos generales.
+
+## Sintaxis
+
+```css
+/* Los comentarios aparecen dentro  de un diagonal-asterisco, justo como esta linea
+   no hay "comentarios en una linea"; este es el unico estilo de comentario.*/
+ 
+
+/* ####################
+   ## SELECTORS
+   #################### */
+
+/* el selector es usado para apuntar a un elemento de la pagina. */
+selector { property: value; /* more properties...*/ }
+
+/*
+Here is an example element:
+
+<div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' />
+*/
+
+/* You can target it using one of its CSS classes */
+.class1 { }
+
+/* or both classes! */
+.class1.class2 { }
+
+/* or its name */
+div { }
+
+/* or its id */
+#anID { }
+
+/* or using the fact that it has an attribute! */
+[attr] { font-size:smaller; }
+
+/* or that the attribute has a specific value */
+[attr='value'] { font-size:smaller; }
+
+/* starts with a value (CSS 3) */
+[attr^='val'] { font-size:smaller; }
+
+/* or ends with a value (CSS 3) */
+[attr$='ue'] { font-size:smaller; }
+
+/* or contains a value in a space-separated list */
+[otherAttr~='foo'] { }
+[otherAttr~='bar'] { }
+
+/* or contains a value in a dash-separated list, e.g., "-" (U+002D) */
+[otherAttr|='en'] { font-size:smaller; }
+
+
+/* You can combine different selectors to create a more focused selector. Don't
+   put spaces between them. */
+div.some-class[attr$='ue'] { }
+
+/* You can select an element which is a child of another element */
+div.some-parent > .class-name { }
+
+/* or a descendant of another element. Children are the direct descendants of
+   their parent element, only one level down the tree. Descendants can be any
+   level down the tree. */
+div.some-parent .class-name { }
+
+/* Warning: the same selector without a space has another meaning.
+   Can you guess what? */
+div.some-parent.class-name { }
+
+/* You may also select an element based on its adjacent sibling */
+.i-am-just-before + .this-element { }
+
+/* or any sibling preceding it */
+.i-am-any-element-before ~ .this-element { }
+
+/* There are some selectors called pseudo classes that can be used to select an
+   element only when it is in a particular state */
+
+/* for example, when the cursor hovers over an element */
+selector:hover { }
+
+/* or a link has been visited */
+selector:visited { }
+
+/* or hasn't been visited */
+selected:link { }
+
+/* or an element is in focus */
+selected:focus { }
+
+/* any element that is the first child of its parent */
+selector:first-child {}
+
+/* any element that is the last child of its parent */
+selector:last-child {}
+
+/* Just like pseudo classes, pseudo elements allow you to style certain parts of
+    a document  */
+
+/* matches a virtual first child of the selected element */
+selector::before {}
+
+/* matches a virtual last child of the selected element */
+selector::after {}
+
+/* At appropriate places, an asterisk may be used as a wildcard to select every
+   element */
+* { } /* all elements */
+.parent * { } /* all descendants */
+.parent > * { } /* all children */
+
+/* ####################
+   ## PROPERTIES
+   #################### */
+
+selector {
+
+    /* Units of length can be absolute or relative. */
+
+    /* Relative units */
+    width: 50%;       /* percentage of parent element width */
+    font-size: 2em;   /* multiples of element's original font-size */
+    font-size: 2rem;  /* or the root element's font-size */
+    font-size: 2vw;   /* multiples of 1% of the viewport's width (CSS 3) */
+    font-size: 2vh;   /* or its height */
+    font-size: 2vmin; /* whichever of a vh or a vw is smaller */
+    font-size: 2vmax; /* or greater */
+
+    /* Absolute units */
+    width: 200px;     /* pixels */
+    font-size: 20pt;  /* points */
+    width: 5cm;       /* centimeters */
+    min-width: 50mm;  /* millimeters */
+    max-width: 5in;   /* inches */
+
+    /* Colors */
+    color: #F6E;                 /* short hex format */
+    color: #FF66EE;              /* long hex format */
+    color: tomato;               /* a named color */
+    color: rgb(255, 255, 255);   /* as rgb values */
+    color: rgb(10%, 20%, 50%);   /* as rgb percentages */
+    color: rgba(255, 0, 0, 0.3); /* as rgba values (CSS 3) Note: 0 <= a <= 1 */
+    color: transparent;          /* equivalent to setting the alpha to 0 */
+    color: hsl(0, 100%, 50%);    /* as hsl percentages (CSS 3) */
+    color: hsla(0, 100%, 50%, 0.3); /* as hsl percentages with alpha */
+
+    /* Borders */
+    border-width:5px;
+    border-style:solid;
+    border-color:red;      /* similar to how background-color is set */
+    border: 5px solid red; /* this is a short hand approach for the same */
+    border-radius:20px;    /* this is a CSS3 property */    
+
+    /* Images as backgrounds of elements */
+    background-image: url(/img-path/img.jpg); /* quotes inside url() optional */
+
+    /* Fonts */
+    font-family: Arial;
+    /* if the font family name has a space, it must be quoted */
+    font-family: "Courier New";
+    /* if the first one is not found, the browser uses the next, and so on */
+    font-family: "Courier New", Trebuchet, Arial, sans-serif;
+}
+```
+
+## Usage
+
+Save a CSS stylesheet with the extension `.css`.
+
+```html
+<!-- You need to include the css file in your page's <head>. This is the
+     recommended method. Refer to http://stackoverflow.com/questions/8284365 -->
+<link rel='stylesheet' type='text/css' href='path/to/style.css'>
+
+<!-- You can also include some CSS inline in your markup. -->
+<style>
+   a { color: purple; }
+</style>
+
+<!-- Or directly set CSS properties on the element. -->
+<div style="border: 1px solid red;">
+</div>
+```
+
+## Precedence or Cascade
+
+An element may be targeted by multiple selectors and may have a property set on
+it in more than once. In these cases, one of the rules takes precedence over
+others. Rules with a more specific selector take precedence over a less specific
+one, and a rule occurring later in the stylesheet overwrites a previous one
+(which also means that if two different linked stylesheets contain rules for an
+element and if the rules are of the same specificity, then order of linking
+would take precedence and the sheet linked latest would govern styling) .
+
+This process is called cascading, hence the name Cascading Style Sheets.
+
+Given the following CSS:
+
+```css
+/* A */
+p.class1[attr='value']
+
+/* B */
+p.class1 { }
+
+/* C */
+p.class2 { }
+
+/* D */
+p { }
+
+/* E */
+p { property: value !important; }
+```
+
+and the following markup:
+
+```html
+<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
+```
+
+The precedence of style is as follows. Remember, the precedence is for each
+**property**, not for the entire block.
+
+* `E` has the highest precedence because of the keyword `!important`. It is
+recommended that you avoid its usage.
+* `F` is next, because it is an inline style.
+* `A` is next, because it is more "specific" than anything else. It has 3
+    specifiers: The name of the element `p`, its class `class1`, an attribute
+    `attr='value'`.
+* `C` is next, even though it has the same specificity as `B`.
+    This is because it appears after `B`.
+* `B` is next.
+* `D` is the last one.
+
+## Media Queries
+
+CSS Media Queries are a feature in CSS 3 which allows you to specify when certain CSS rules should be applied, such as when printed, or when on a screen with certain dimensions or pixel density. They do not add to the selector's specificity.
+
+```css
+/* A rule that will be used on all devices */
+h1 {
+  font-size: 2em;
+  color: white;
+  background-color: black;
+}
+
+/* change the h1 to use less ink on a printer */
+@media print {
+  h1 {
+    color: black;
+    background-color: white;
+  }
+}
+
+/* make the font bigger when shown on a screen at least 480px wide */
+@media screen and (min-width: 480px) {
+  h1 {
+    font-size: 3em;
+    font-weight: normal;
+  }
+}
+```
+
+Media queries can include these features:
+`width`, `height`, `device-width`, `device-height`, `orientation`, `aspect-ratio`, `device-aspect-ratio`, `color`, `color-index`, `monochrome`, `resolution`, `scan`, `grid`. Most of these features can be prefixed with `min-` or `max-`.
+
+The `resolution` feature is not supported by older devices, instead use `device-pixel-ratio`.
+
+Many smartphones and tablets will attempt to render the page as if it were on a desktop unless you provide a `viewport` meta-tag.
+
+```html
+<head>
+  <meta name="viewport" content="width=device-width; initial-scale=1.0">
+</head>
+```
+
+## Compatibility
+
+Most of the features in CSS 2 (and many in CSS 3) are available across all
+browsers and devices. But it's always good practice to check before using
+a new feature.
+
+## Resources
+
+* [CanIUse](http://caniuse.com) (Detailed compatibility info)
+* [Dabblet](http://dabblet.com/) (CSS playground)
+* [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) (Tutorials and reference)
+* [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/) (Reference)
+
+## Further Reading
+
+* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
+* [Selecting elements using attributes](https://css-tricks.com/almanac/selectors/a/attribute/)
+* [QuirksMode CSS](http://www.quirksmode.org/css/)
+* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
+* [SASS](http://sass-lang.com/) and [LESS](http://lesscss.org/) for CSS pre-processing
+* [CSS-Tricks](https://css-tricks.com)
+
+