summaryrefslogtreecommitdiffhomepage
path: root/es-es/css-es.html
diff options
context:
space:
mode:
authorBoris Verkhovskiy <boris.verk@gmail.com>2024-04-04 04:26:14 -0700
committerGitHub <noreply@github.com>2024-04-04 04:26:14 -0700
commit4d59048f0df8441e5ad2c2c440e8d54b0e9c11b6 (patch)
treefa2dbdd40da35b3c27f928f1112ea43193a7482e /es-es/css-es.html
parentb38d4437120e700646a45dff68b7c4ff3f7109c0 (diff)
parent327001f58739489b41f6b1f7bbc8be900847b381 (diff)
Merge branch 'master' into patch-2
Diffstat (limited to 'es-es/css-es.html')
-rw-r--r--es-es/css-es.html327
1 files changed, 0 insertions, 327 deletions
diff --git a/es-es/css-es.html b/es-es/css-es.html
deleted file mode 100644
index 506a9467..00000000
--- a/es-es/css-es.html
+++ /dev/null
@@ -1,327 +0,0 @@
----
-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)
-
-