{"id":1738,"date":"2018-12-04T16:36:38","date_gmt":"2018-12-04T22:36:38","guid":{"rendered":"http:\/\/naps.com.mx\/blog\/?p=1738"},"modified":"2018-12-07T10:02:54","modified_gmt":"2018-12-07T16:02:54","slug":"cambiar-estilo-etiqueta-html-selectores-id","status":"publish","type":"post","link":"https:\/\/naps.com.mx\/blog\/cambiar-estilo-etiqueta-html-selectores-id\/","title":{"rendered":"Cambiar el estilo de una etiqueta HTML: selectores id y class"},"content":{"rendered":"

Veamos c\u00f3mo cambiar el estilo de una etiqueta HTML usando los selectores id y class, y c\u00f3mo cambiar el estilo a varios elementos en forma simult\u00e1nea.<\/strong><\/em>\u00a0<\/span><\/p>\n

<\/p>\n

Un selector es una especie de condici\u00f3n que definimos en nuestra hoja de estilos<\/a> para \u201cseleccionar\u201d uno o varios elementos ubicados dentro del HTML. Una vez \u201cseleccionados\u201d podemos definir en nuestra hoja de estilos cu\u00e1l ser\u00e1 la apariencia de esos elementos seleccionados (Beati, 2015).<\/p>\n

La idea detr\u00e1s de los selectores es decidir a qu\u00e9 elemento o componente de HTML vamos a darle estilo.\u00a0<\/span><\/p>\n

Hay tres tipos de selectores: selectores simples, selectores de atributos y pseudoclases. En \u00e9ste art\u00edculo nos centramos en los selectores simples que son aquellos que seleccionan los elementos por el tipo de elemento, por su clase o por su id.\u00a0<\/span><\/p>\n

\"Cambiar<\/a>

Aprende c\u00f3mo cambiar el estilo de una etiqueta HTML.<\/p><\/div>\n

Cambiar el estilo de una etiqueta HTML<\/h2>\n
h2{\r\n\tfont-family: arial;\r\n\tfont-size: 18pt;\r\n\tcolor: crimson;\r\n}\r\n\r\np{\r\n\tfont-family: verdana;\r\n\tfont-size: 12pt;\r\n\tcolor: darkred;\r\n}<\/pre>\n
En el ejemplo anterior, se desea cambiar el estilo a todo texto que est\u00e9 marcado como h2 (t\u00edtulo o subt\u00edtulo). De igual forma, si utilizamos p{estilos} estamos aplicando esos estilos a cualquier p\u00e1rrafo \u00a0del documento.<\/p>\n
Cambiar el estilo de un elemento HTML \u00fanico<\/h2>\n
Si deseamos aplicar un estilo a un \u00fanico elemento dentro de HTML, marcamos \u00e9ste utilizando el atributo id<\/p>\n
<span id=\"capital\"> E <\/span>n<\/pre>\n
En el ejemplo anterior deseamos aplicar un estilo a la letra E, por lo que encerramos \u00e9sta entre etiquetas span que tienen un atributo id con valor \u00abcapital\u00bb.<\/p>\n
Ahora podemos darle estilos a \u00abcapital\u00bb de \u00e9sta forma:<\/p>\n
#capital{\r\n\tfont-size: 46pt;\r\n\tdisplay: inline-block;\r\n}<\/pre>\n
De modo que se utiliza un s\u00edmbolo # para seleccionar un id con determinado valor.<\/p>\n
Cuando varios elementos comparten el mismo estilo<\/h2>\n
Si tenemos varios elementos en HTML que comparten el mismo estilo podemos utilizar clases. Por ejemplo, marcar\u00edamos todos esos elementos en HTML de \u00e9sta forma:<\/p>\n
<span class=\"glosario\">adarga<\/span> antigua, <span class=\"glosario\">roc\u00edn<\/span> flaco<\/pre>\n
Aqu\u00ed las palabras \u00abadarga\u00bb y \u00abroc\u00edn\u00bb van a tener cierto estilo, por lo que ambas comparten la clase \u00abglosario\u00bb. Entonces en la hoja de estilos css tendr\u00edamos:<\/p>\n
.glosario{\r\n\tbackground: red;\r\n\tcolor:white;\r\n}<\/pre>\n
Cambiar el estilo de dos o m\u00e1s etiquetas HTML simult\u00e1neamente<\/h2>\n
.resaltado, .glosario{\r\n\tfont-style: italic;\r\n}\r\n.glosario{ \r\n        background: red; \r\n        color:white;\r\n}<\/pre>\n
En \u00e9ste ejemplo tenemos dos clases, una llamada \u00abresaltado\u00bb y otra llamada \u00abglosario\u00bb. A ambas deseamos aplicarle el mismo estilo, por lo que utilizamos la coma \u00ab,\u00bb para realizar \u00e9sto.<\/p>\n
Cambiar el estilo de una etiqueta HTML que est\u00e9 dentro de otra<\/h2>\n
p span{\r\n\tfont-weight: bold;\r\n}<\/pre>\n
En el ejemplo anterior el estilo solo aplicar\u00e1 a los elementos marcados por \u00abspan\u00bb pero que est\u00e9n dentro de un p\u00e1rrafo \u00abp\u00bb. No es necesario que sea un \u00abhijo\u00bb directo de \u00abp\u00bb, sino simplemente que est\u00e9 dentro del p\u00e1rrafo.<\/p>\n
Mira el ejemplo completo:<\/p>\n
See the Pen Selectores id y class <\/a> by Gibr\u00e1n Garc\u00eda (@napsmx<\/a>) on CodePen<\/a>.<\/p>\n