Herramientas de usuario
wiki2:html_css
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
wiki2:html_css [2018/11/30 11:52] alfred |
wiki2:html_css [2022/06/06 13:12] (actual) |
||
|---|---|---|---|
| Línea 25: | Línea 25: | ||
| <div id="b">Div B</div> | <div id="b">Div B</div> | ||
| </code> | </code> | ||
| + | |||
| + | Remove inherited attributes: | ||
| + | <code> | ||
| + | .gtd-button { | ||
| + | all: unset; | ||
| + | position: absolute; | ||
| + | z-index: 10000; | ||
| + | ... | ||
| + | </code> | ||
| + | |||
| + | ===== CSS Selectors ===== | ||
| + | ^ Selector ^ Example ^ Example description ^ | ||
| + | | .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""> <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 | | ||
| + | | element | p | Selects all <p> elements | | ||
| + | | element,element | div, p | Selects all <div> elements and all <p> elements | | ||
| + | | element element | div p | Selects all <p> elements inside <div> elements | | ||
| + | | element>element | div > p | Selects all <p> elements where the parent is a <div> element | | ||
| + | | element+element | div + p | Selects all <p> elements that are placed immediately after <div> elements | | ||
| + | | element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element | | ||
| + | | [attribute] | [target] | Selects all elements with a target attribute | | ||
| + | | [attribute=value] | [target=_blank] | "Selects all elements with target=""_blank""" | | ||
| + | | [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""" | | ||
| + | | <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""" | | ||
| + | | :active | a:active | Selects the active link | | ||
| + | | ::after | p::after | Insert something after the content of each <p> element | | ||
| + | | ::before | p::before | Insert something before the content of each <p> element | | ||
| + | | :checked | input:checked | Selects every checked <input> element | | ||
| + | | :default | input:default | Selects the default <input> element | | ||
| + | | :disabled | input:disabled | Selects every disabled <input> element | | ||
| + | | :empty | p:empty | Selects every <p> element that has no children (including text nodes) | | ||
| + | | :enabled | input:enabled | Selects every enabled <input> element | | ||
| + | | :first-child | p:first-child | Selects every <p> element that is the first child of its parent | | ||
| + | | ::first-letter | p::first-letter | Selects the first letter of every <p> element | | ||
| + | | ::first-line | p::first-line | Selects the first line of every <p> element | | ||
| + | | :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent | | ||
| + | | :focus | input:focus | Selects the input element which has focus | | ||
| + | | :hover | a:hover | Selects links on mouse over | | ||
| + | | :in-range | input:in-range | Selects input elements with a value within a specified range | | ||
| + | | :indeterminate | input:indeterminate | Selects input elements that are in an indeterminate state | | ||
| + | | :invalid | input:invalid | Selects all input elements with an invalid value | | ||
| + | | :lang(language) | p:lang(it) | "Selects every <p> element with a lang attribute equal to ""it"" (Italian)" | | ||
| + | | :last-child | p:last-child | Selects every <p> element that is the last child of its parent | | ||
| + | | :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent | | ||
| + | | :link | a:link | Selects all unvisited links | | ||
| + | | :not(selector) | :not(p) | Selects every element that is not a <p> element | | ||
| + | | :nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent | | ||
| + | | :nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child | | ||
| + | | :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child | | ||
| + | | :nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent | | ||
| + | | :only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent | | ||
| + | | :only-child | p:only-child | Selects every <p> element that is the only child of its parent | | ||
| + | | :optional | input:optional | "Selects input elements with no ""required"" attribute" | | ||
| + | | :out-of-range | input:out-of-range | Selects input elements with a value outside a specified range | | ||
| + | | ::placeholder | input::placeholder | Selects input elements with placeholder text | | ||
| + | | :read-only | input:read-only | "Selects input elements with the ""readonly"" attribute specified" | | ||
| + | | :read-write | input:read-write | "Selects input elements with the ""readonly"" attribute NOT specified" | | ||
| + | | :required | input:required | "Selects input elements with the ""required"" attribute specified" | | ||
| + | | :root | :root | Selects the document's root element | | ||
| + | | ::selection | ::selection | Selects the portion of an element that is selected by a user | | ||
| + | | :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) | | ||
| + | | :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> | ||
| + | |||
wiki2/html_css.1543578739.txt.gz · Última modificación: 2020/05/09 09:24 (editor externo)
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
