54 lines
2.1 KiB
Plaintext
54 lines
2.1 KiB
Plaintext
caption: Estilos CSS con etiquetas
|
|
created: 20141001132300000
|
|
es-title: Cómo aplicar estilos CSS mediante etiquetas
|
|
modified: 20160419152957461
|
|
tags: Learning
|
|
title: How to apply custom styles by tag
|
|
type: text/vnd.tiddlywiki
|
|
|
|
Se pueden aplicar estilos personalizados a tiddlers con una pestaña particular definiendo una clase CSS con el nombre `tc-tagged-<etiqueta>`.
|
|
|
|
Por ejemplo: Para que una serie de tiddlers con la etiqueta <<.tag ~VistaNocturna>> se muestren con un esquema de colores apropiado para leer con poca luz, tendremos que [[crear una hoja de estilos|Using Stylesheets]] que defina la clase `tc-tagged-VistaNocturna`, del modo siguiente:
|
|
|
|
```
|
|
.tc-tagged-VistaNocturna {
|
|
background-color:black;
|
|
color: orange;
|
|
padding: 35px 35px;
|
|
}
|
|
|
|
.tc-tagged-VistaNocturna .tc-tiddler-body {
|
|
font-size: 1.5em;
|
|
}
|
|
```
|
|
La clase `tc-tagged-VistaNocturna` se aplica a todo el tiddler y no sólo al texto. Si queremos referirnos sólo a una parte del tiddler, se puede habilitar el selector CSS, como hemos hecho aquí con `.tc-tagged-NightReader .tc-tiddler-body`.
|
|
|
|
Nótese que las etiquetas que contengan espacios o caracterres no alfanuméricos, para que CSS los interprete, tendrán que convertirse según la codificación URI, lo que hace que la clase CSS resultante sea difícil de predecir y más proclive a errores.
|
|
|
|
Por ejemplo:
|
|
|
|
|!Etiqueta |!Nombre de clase generado |
|
|
|`$:/mytag` |`tc-tagged-%24%3A%2Fmytag` |
|
|
|`Doctor Who` |`tc-tagged-Doctor%20Who` |
|
|
|`£35.23` |`tc-tagged-%C2%A335.23` |
|
|
|
|
Aunque ~TiddlyWiki generará las etiquetas, para usarlas en la hoja de estilos se tendrá que usar la correspondiente equivalencia en [[código porciento|https://es.wikipedia.org/wiki/C%C3%B3digo_porciento]]:
|
|
|
|
```
|
|
.tc-tagged-Doctor\%20Who {
|
|
background-image: url(./tardis_back.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: right;
|
|
color:#FBFBFB;
|
|
}
|
|
```
|
|
Hay disponible una función en ~JavaScript para realizar la conversión:
|
|
|
|
```
|
|
$tw.utils.tagToCssSelector("$:/tags/Stylesheet")
|
|
```
|
|
...que genera la siguiente respuesta:
|
|
|
|
```
|
|
tc-tagged-\%24\%3A\%2Ftags\%2FStylesheet
|
|
``` |