Různé kousky CSS: Porovnání verzí
m |
m |
||
| (Není zobrazeno 12 mezilehlých verzí od stejného uživatele.) | |||
| Řádek 1: | Řádek 1: | ||
[[Kategorie:CSS]] | [[Kategorie:CSS]] | ||
| − | + | == Stylování <nowiki><abbr></nowiki> == | |
* [http://html5doctor.com/the-abbr-element/ The abbr element] | * [http://html5doctor.com/the-abbr-element/ The abbr element] | ||
* S tím souvisí článek [http://camendesign.com/abbr_redux Abbreviations, Definitions & Citations Revisited] | * S tím souvisí článek [http://camendesign.com/abbr_redux Abbreviations, Definitions & Citations Revisited] | ||
* Jiný nateriál: [http://maxdesign.com.au/news/abbreviations/ Styling abbreviations and acronyms] - popisuje typy zkratek, jak je používat a stylovat. | * Jiný nateriál: [http://maxdesign.com.au/news/abbreviations/ Styling abbreviations and acronyms] - popisuje typy zkratek, jak je používat a stylovat. | ||
| − | + | == Stylování externích odkazů ve WP == | |
Podobně jako ve wikipedii - k externímu odkazu se přidá nějaká vizuální indikace: | Podobně jako ve wikipedii - k externímu odkazu se přidá nějaká vizuální indikace: | ||
| Řádek 18: | Řádek 18: | ||
[[Soubor:External-link-with-text.png]] | [[Soubor:External-link-with-text.png]] | ||
| + | |||
| + | "wpmu.dev" musíme nahradit svou doménou. | ||
| + | |||
| + | Tento kód prochází všechny odkazy na webové stránce a porovnává je s naší doménou. V případě, že odkaz je jinam než na naši doménu, přidá na konec odkazu text ''(EXTERNAL LINK)''. | ||
| + | |||
| + | ==== Externí odkazy s ikonou ==== | ||
| + | Opatříme si vhodnou ikonu. Mnoho ikon je na webu [http://www.flaticon.com/ Flat Icon]. Zvolenou ikonu umístíme do složky "images" v naší šabloně. | ||
| + | |||
| + | Do stylovacího souboru v odvozené šabloně (child theme) přidáme kód: | ||
| + | a[href^="http://"]:not([href*="wpmu.dev"]):after, | ||
| + | a[href^="https://"]:not([href*="wpmu.dev"]):after { | ||
| + | content: "" url('/wp-content/themes/twentyfourteen/images/external-icon.png'); | ||
| + | padding-left:5px; | ||
| + | } | ||
| + | "wpmu.dev" musíme nahradit svou doménou, a upravíme URL odkazující na ikonu. | ||
| + | Odkazy na nšem webu pak budou vypadat podobně jako: | ||
| + | |||
| + | [[soubor:External-link-with-icon.png]] | ||
| + | |||
| + | V přidaném kódu je u ikony přidán ''padding'', aby nebyla přilepená k odkazu. | ||
| + | |||
| + | Stylování externího odkazu je popsáno také na [http://stackoverflow.com/questions/5379752/css-style-external-links Stack Exchange]. | ||
| + | ==== Použitá ikona ==== | ||
| + | Ikonu externího odkazu jsem stáhl z [http://www.flaticon.com/free-icon/external-link-symbol_25284 Flat Icon]. | ||
| + | |||
| + | Stáhl jsem: | ||
| + | * [[Media:External-link-symbol-black.svg]] - ve formátu .svg | ||
| + | * [[Media:External-link-symbol-green.png]] - ve formátu .png, barva zelená. V Gimpu jsem upravil velikost na 10x10px a zelenou upravil na odstín pro použití v csga.cz. | ||
| + | |||
| + | Autor vyžaduje k použití ikony '''zveřejnění kreditu''': | ||
| + | |||
| + | <code><nowiki> | ||
| + | <div>Icons made by <a href="http://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div> | ||
| + | </nowiki></code> | ||
| + | |||
| + | == Význam [dir] v CSS == | ||
| + | |||
| + | Popsáno v [https://stackoverflow.com/questions/63609142/what-is-the-meaning-of-dir-with-html-css what is the meaning of "[dir<nowiki>]</nowiki>" with html css] | ||
| + | |||
| + | == Výběr elementů v CSS podle atributu == | ||
| + | |||
| + | Popsáno v [https://stackoverflow.com/questions/5324415/select-elements-by-attribute-in-css Select elements by attribute in CSS] - a tam odkazy na další prameny, např. | ||
| + | |||
| + | [https://www.w3.org/TR/selectors/#attribute-selectors Attribute selectors] | ||
| + | |||
| + | |||
| + | {{Tags}} css | ||
Aktuální verze z 5. 9. 2021, 16:22
Obsah
Stylování <abbr>
- The abbr element
- S tím souvisí článek Abbreviations, Definitions & Citations Revisited
- Jiný nateriál: Styling abbreviations and acronyms - popisuje typy zkratek, jak je používat a stylovat.
Stylování externích odkazů ve WP
Podobně jako ve wikipedii - k externímu odkazu se přidá nějaká vizuální indikace:
How to Style External Links in WordPress Like Wikipedia
Externí odkazy s textem
Do stylovacího souboru v odvozené šabloně (child theme) přidáme kód:
a[href^="http://"]:not([href*="wpmu.dev"]):after,
a[href^="https://"]:not([href*="wpmu.dev"]):after {
content: "(EXTERNAL LINK)";
padding-left:5px;
}
Externí a interní odkazy pak budou vypadat takto:
"wpmu.dev" musíme nahradit svou doménou.
Tento kód prochází všechny odkazy na webové stránce a porovnává je s naší doménou. V případě, že odkaz je jinam než na naši doménu, přidá na konec odkazu text (EXTERNAL LINK).
Externí odkazy s ikonou
Opatříme si vhodnou ikonu. Mnoho ikon je na webu Flat Icon. Zvolenou ikonu umístíme do složky "images" v naší šabloně.
Do stylovacího souboru v odvozené šabloně (child theme) přidáme kód:
a[href^="http://"]:not([href*="wpmu.dev"]):after,
a[href^="https://"]:not([href*="wpmu.dev"]):after {
content: "" url('/wp-content/themes/twentyfourteen/images/external-icon.png');
padding-left:5px;
}
"wpmu.dev" musíme nahradit svou doménou, a upravíme URL odkazující na ikonu. Odkazy na nšem webu pak budou vypadat podobně jako:
V přidaném kódu je u ikony přidán padding, aby nebyla přilepená k odkazu.
Stylování externího odkazu je popsáno také na Stack Exchange.
Použitá ikona
Ikonu externího odkazu jsem stáhl z Flat Icon.
Stáhl jsem:
- Media:External-link-symbol-black.svg - ve formátu .svg
- Media:External-link-symbol-green.png - ve formátu .png, barva zelená. V Gimpu jsem upravil velikost na 10x10px a zelenou upravil na odstín pro použití v csga.cz.
Autor vyžaduje k použití ikony zveřejnění kreditu:
<div>Icons made by <a href="http://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
Význam [dir] v CSS
Popsáno v what is the meaning of "[dir]" with html css
Výběr elementů v CSS podle atributu
Popsáno v Select elements by attribute in CSS - a tam odkazy na další prameny, např.
Štítky: css
