1. No category

Metodologías CSS
Porque el CSS no es complicado.
Daniel
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0
Unported License
¡Twitea sobre el libro!
Por favor ayuda a Daniel hablando sobre el libro en Twitter!
El tweet sugerido para este libro es:
He comprado el libro definitivo para escribir CSS: CSS Meth. Por @Wakkos
El hashtag sugerido para este libro es #CSSMeth.
Descubre lo que otra gente está diciendo sobre el libro haciendo click en este enlace para buscar el
hashtag en Twitter:
https://twitter.com/search?q=#CSSMeth
A Andrea, que me aguanta y me pinta.
Índice general
Repaso a Selectores CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
2
Repaso a Selectores CSS
Este capítulo va para todos nuestros amigos recién llegados a CSS y haré un breve resumen de la
terminología utilizada en CSS.
Repaso a Selectores CSS
2
Selector
Un selector CSS es la parte de una declaración que va a indicar qué contenido se va a modificar
o estilizar. Hay muchos tipos de selectores pero me gustaría que viésemos un repaso a los más
relevantes:
Selector Universal
Funciona como un comodín, seleccionando todos los elementos y etiquetas HTML:
1
2
3
* {
font-size: 18px;
}
Todos los elementos dentro del HTML tendrán la propiedad font-size: 18px;. Es el selector ideal
para normalizar la propiedad box-sizing como bien lo expone Paul Irish en su artículo * { Box-sizing:
Border-box } FTW¹:
1
2
3
*, *:before, *:after {
box-sizing: border-box;
}
Añadir prefijos según la orden del día.
Con esto ajustamos la relación entre el ancho o widthy el margen interior opadding para que el
padding no afecte el ancho total de la caja, si decimos que el ancho son 200px no vamos a tener que
reajustar si cambiamos el padding.
Selector de elemento
Selecciona uno o varios elementos HTML con el mismo nombre:
¹http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Repaso a Selectores CSS
1
2
3
4
5
6
7
8
3
h1 {
color: olive;
}
main {
max-width: 80%;
margin-left: 0;
margin-right: 0;
}
Las declaraciones anteriores van a afectar todos los elementos <h1> y <main> del HTML directamente.
Estos selectores son ideales para dar estilos base y cierta consistencia a nuestro HTML pero cuando
requieren una modificación o alteración del estilo base es mejor utilizar un selector de clase (que
veremos a continuación). Por ejemplo si voy a empezar un proyecto y quiero que todos mis
encabezados tengan una misma fuente y que cada encabezado tenga siempre un mismo tamaño
utilizaré selectores de elemento para definirlo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 {
font-size: 38px;
}
h2 {
font-size: 32px;
}
…
etc…
Luego, más adelante, creamos los posibles modificaciones.
Selector de clase
El selector de clase es el más versátil de todos, ya que puede ser asignado a cualquier elemento
HTML y le aplicará las propiedades que definamos en ese selector. Es definido con un punto y a
continuación el nombre del selector:
Repaso a Selectores CSS
1
2
3
4
.intro {
color: olive;
}
Aplicará la declaración de .intro a cualquier elemento HTML que tenga la clase intro:
1
2
3
4
5
6
7
<p class="intro">
…
</p>
<h2 class="intro">
…
</h2>
Tal como venía diciendo en los selectores de elemento con los selectores de clase podemos (y
debemos) crear modificaciones: el elemento tiene todas las propiedades creadas en el selector de
elemento pero le aplica los cambios o modificaciones del selector de clase.
Esto nos ayuda a tener un orden y a aprovechar la herencia de nuestro CSS pero no es el único uso,
de hecho los selectores de clase son los más utilizados a lo largo del CSS, ya que elementos tenemos
un número limitado de ellos, pero las modificaciones y los módulos suelen ser siempre definidos con
selectores de clase o clases si es HTML.
Por ejemplo podemos crear un selector de clase para dar formato a un formulario de búsqueda y
que siempre que usemos ese formulario de búsqueda tenga un comportamiento acorde a nuestras
necesidades:
1
2
3
4
<div class="search-box
">
<input type="text" class="search-box__input">
<input type="submit" class="search-box__submit">
</div>
Tenemos un módulo que debe tener unos estilos únicos, no podemos usar un selector de elemento
div {…} porque se aplicaría a todos los divs de nuestra web, tampoco un selector de input porque
tendremos muchos más en nuestra web; usamos un selector de clase y a la vez nos aprovechamos
de todos los estilos que hayamos declarado para todos nuestros inputs en el selector de elemento.
Veamos un ejemplo para aclarar:
Repaso a Selectores CSS
1
2
3
4
5
6
7
8
9
10
11
12
5
input {
border: 1px solid #ededed;
border-radius: 3px;
}
.search-box__input {
float: left;
}
.search-box__submit {
float: left;
}
Tenemos el selector de elemento (input) definiendo la base de todos los inputs de nuestra web,
y luego con el selector de clase (.search-box__submit y .search-box__input) definimos el
comportamiento dentro del módulo search-box.
Selector de ID
Un selector de ID se declara con el símbolo # seguido del nombre que le queramos dar. Este selector
afecta a cualquier elemento HTML al que le asignemos la propiedad ID:
1
<div id="MiSelector">
Y en el CSS podemos afectar ese selector metiendo las respectivas declaraciones dentro del selector
de ID:
1
2
3
#MiSelector {
…
}
El problema con los selectores de ID es que sólo los podemos tener una sola vez en cada página,
limitando esto la reutilización del mismo por lo que mi consejo es usarlo únicamente como un nexo
con JavaScript y no para dar estilos.
Selector de atributo
Podemos asignar un atributo y su valor en el HTML - nombre:"valor" - como vemos en el
siguiente ejemplo, donde el atributo RobotOwner tiene un valor diferente en cada ‘
Repaso a Selectores CSS
1
2
3
6
<span RobotOwner="Koji Kabuto">Mazinger</span>
<span RobotOwner="Sayaka Yumi">Aphrodite A</span>
<span RobotOwner="Nuke & Mucha">Boss</span>
Y los elementos con estos atributos pueden ser estilizados por CSS según el valor del atributo:
1
2
3
4
5
6
7
8
9
10
11
span[RobotOwner="Koji Kabuto"] {
color: black;
}
span[RobotOwner="Sayaka Yumi"] {
color: red;
}
span[RobotOwner="Nuke & Mucha"] {
color: red;
}
Por ahora la mayor ventaja que proporciona este selector attr() es su accesibilidad desde CSS y desde
JavaScript para realizar cambios relativos al valor del atributo, que puede venir por base de datos
por ejemplo, y mostrarlo en un renderizado del HTML sin que esté realmente en el HTML:
1
<span class="robots" RobotOwner="Koji Kabuto">Robot Owner:</span>
Como vemos, el nombre del dueño del robot (Koji Kabuto) no aparece en el contenido del elemento
<span> sino que se lo asignaremos por CSS
1
2
3
4
5
6
7
8
.robots {
font-family: Helvetica, Arial, sans-serif;
}
.robots::after {
content: " " attr(RobotOwner);
color: maroon;
font-weight: bold;
}
Y el renderizado HTML quedaría de la siguiente manera:
7
Repaso a Selectores CSS
propiedad content de CSS
Podemos ver que a pesar de tener un span solo con el texto de Robot Owner al ver el HTML podemos
leer el texto seguido de la propiedad del atributo RobotOwner.
Tanto los selectores de atributos como los selectores de clase tienen la capacidad de filtrar contenido
con algunos comodines:
• [attr="valor"] o [class="nombreclase"] Selecciona un elemento cuyo valor de atributo o
clase es igual al descrito dentro del selector:
1
2
3
span[icon="icon-house"], span[class="icon-house"] {
color: maroon;
}
1
2
<span class="icon-house"></span>
<span icon="icon-house"></span>
• [attr∼="valor"] o [class∼="nombreclase"] Selecciona un elemento cuyo valor de atributo
o clase forma parte de una lista de palabras separadas por un espacio en blanco en la cual una
de ellas es el valor exacto:
1
2
3
span[icon~="icon-house"], span[class=~"icon-house"] {
color: maroon;
}
1
2
<span class="icon-house icon-label intro"></span>
<span icon="icon-bubble icon-house"></span>
• [attr|="valor"] o [class|="nombreclase"] Selecciona un elemento cuyo valor de atributo
o clase puede ser exactamente el valor o el valor seguido por el carácter - (u+002D):
Repaso a Selectores CSS
1
2
3
span[icon|="icon"], span[class=|"icon"] {
color: maroon;
}
1
2
<span class="icon-house intro"></span>
<span icon="icon-bubble"></span>
8
• [attrˆ="valor"] o [classˆ="nombreclase"] Selecciona un elemento cuyo valor de atributo
o clase es prefijo del valor:
1
2
3
span[icon^="icon"], span[class^="icon"] {
color: maroon;
}
1
2
<span class="icon-house intro"></span>
<span icon="iconographic"></span>
• [attr$="valor"] o [class$="nombreclase"] Selecciona un elemento cuyo valor de atributo
o clase es sufijo del valor:
1
2
3
span[icon$="icon"], span[class$="icon"] {
color: maroon;
}
1
2
<span class="lefticon"></span>
<span icon="wheel-icon"></span>
• [attr*="valor"] o [class*="nombreclase"] Selecciona un elemento cuyo valor de atributo
o clase se encuentra en la cadena (string) total del valor:
1
2
3
span[icon*="icon"], span[class*="icon"] {
color: maroon;
}
Repaso a Selectores CSS
1
2
9
<span class="iloveiconsforever"></span>
<span icon="iconic"></span>
Todos estos son atributos creados por nosotros, pero los elementos HTML tienen muchos y diferentes
atributos tal y como podemos ver en esta tabla de referencia de atributos² de la MDN.
Con tantos atributos tenemos MUCHAS posibilidades de crear selectores para diferentes situaciones:
• Dar un color específico a los links internos a[href*=”midominio”] { … }
• Colocar un símbolo a links externos a[hrefˆ=”http”]::after { content: “ \00BB”; }
• Colocar un borde a imágenes con cierto título img[title*=”palabraclave”] { border: 2px solid
maroon}
Y muchos otros selectores para ciertos elementos y situaciones que a veces pensamos que no se
pueden hacer cuando solo hay que buscar un poco las posibilidades con los atributos exigentes.
¿Os imagináis no tener que añadir clases en el HTML para seleccionar todos los links internos o
para añadir un icono a los externos? Pues de eso se trata: de tener mayor control de la presentación
visual con CSS sin depender del HTML (Hasta cierto punto).
²https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes