Diferencias

Muestra las diferencias entre dos versiones de la página.

--- wiki2:html_css [2019/07/12 13:30]
alfred [CSS Selectors]
+++ wiki2:html_css [2022/06/06 13:12] (actual)
@@ Línea 39: / Línea 39: @@
 | .class | .intro | "Selects all elements with class=""intro""" |
 | .class1.class2 | "<div class=""name1 name2"">...</div>" | Selects all elements with both name1 and name2 set within its class attribute |
-| .class1 .class2 | "<div class=""name1""> |
+| .class1 .class2 | "<div class=""name1""> <div class=""name2""> ... </div></div>" | Selects all elements with name2 that is a descendant of an element with name1 |
-|   <div class=""name2""> |
-|     ... |
-|   </div> |
-| </div>" | Selects all elements with name2 that is a descendant of an element with name1 |
 | #id | #firstname | "Selects the element with id=""firstname""" |
 | * | * | Selects all elements |
@@ Línea 56: / Línea 52: @@
 | [attribute~=value] | [title~=flower] | "Selects all elements with a title attribute containing the word ""flower""" |
 | <nowiki>[attribute|=value]</nowiki> | <nowiki>[lang|=en]</nowiki> | "Selects all elements with a lang attribute value starting with ""en""" |
-| [attribute^=value] | "a[href^=""https""]" | "Selects every <a> element whose href attribute value begins with ""https""" |
+| <nowiki>[attribute^=value]</nowiki> | <nowiki>"a[href^=""https""]"</nowiki> | "Selects every <a> element whose href attribute value begins with ""https""" |
 | [attribute$=value] | "a[href$="".pdf""]" | "Selects every <a> element whose href attribute value ends with "".pdf""" |
 | [attribute*=value] | "a[href*=""w3schools""]" | "Selects every <a> element whose href attribute value contains the substring ""w3schools""" |
@@ Línea 98: / Línea 94: @@
 | :valid | input:valid | Selects all input elements with a valid value |
 | :visited | a:visited | Selects all visited links |
+**Order of style applying**: Styles are applied according to which styles are most specific to the element, and then in textual order for rules that have equal specificity.
+===== Internalization =====
+  * From: https://www.smashingmagazine.com/2014/06/css-driven-internationalization-in-javascript/
+  * {{ :wiki2:css-driven_internationalization_in_javascript_smashing_magazine.pdf |PDF Version}}
+<code html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+	<style type="text/css">
+	[data-l11n=ru] {
+	    display: none;
+	}
+	:lang(ru) > [data-l11n] {
+	    display: none;
+	}
+	:lang(ru) > [data-l11n=ru] {
+	    display: inline;
+	}
+	</style>
+  </head>
+  <body>
+	<p>
+	  <label>
+	    <span data-l11n>Change language:</span>
+	    <span data-l11n="ru">Изменить язык:</span>
+	    <select onchange="document.documentElement.lang=this.value">
+	      <option value="en">English</option>
+	      <option value="ru">Русский</option>
+	    </select>
+	  </label>
+	</p>
+	<h1>
+	  <span data-l11n>Feedback</span>
+	  <span data-l11n="ru">Обратная связь</span>
+	</h1>
+</body>
+</html>
+</code>
+===== SVG =====
+==== Using img tag ====
+<code>
+<img src = "happy.svg" alt="My Happy SVG"/>
+</code>
+==== Using object tag ====
+<code>
+<object data="happy.svg" width="300" height="300"> </object>
+</code>
+==== Add an svg with code directly ====
+<code>
+<svg width="100" height="100">
+  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
+</svg>
+</code>
+==== Using a file ====
+It comes from: https://github.com/feathericons/feather#svg-sprite=
+<code>
+<svg
+  width="24"
+  height="24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <use href="path/to/feather-sprite.svg#circle"/>
+</svg>
+</code>
+==== From a reference in code ====
+<code>
+<div>
+  <svg>
+    <use xlink:href="#bike" />
+  </svg>
+</div>
+<svg display="none">
+  <symbol width="24" height="24" viewBox="0 0 24 24" id="bike">
+    <path d="M5,20.5A3.5,3.5 0 0,1 1.5,17A3.5,3.5 0 0,1 5,13.5A3.5,3.5 0 0,1 8.5,17A3.5,3.5 0 0,1 5,20.5M5,12A5,5 0 0,0 0,17A5,5 0 0,0 5,22A5,5 0 0,0 10,17A5,5 0 0,0 5,12M14.8,10H19V8.2H15.8L13.86,4.93C13.57,4.43 13,4.1 12.4,4.1C11.93,4.1 11.5,4.29 11.2,4.6L7.5,8.29C7.19,8.6 7,9 7,9.5C7,10.13 7.33,10.66 7.85,10.97L11.2,13V18H13V11.5L10.75,9.85L13.07,7.5M19,20.5A3.5,3.5 0 0,1 15.5,17A3.5,3.5 0 0,1 19,13.5A3.5,3.5 0 0,1 22.5,17A3.5,3.5 0 0,1 19,20.5M19,12A5,5 0 0,0 14,17A5,5 0 0,0 19,22A5,5 0 0,0 24,17A5,5 0 0,0 19,12M16,4.8C17,4.8 17.8,4 17.8,3C17.8,2 17,1.2 16,1.2C15,1.2 14.2,2 14.2,3C14.2,4 15,4.8 16,4.8Z"></path>
+  </symbol>
+</svg>
+</code>

Programming

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página