Conceptos básicos de CSS
Este artículo explica los conceptos básicos de CSS.
Puedes aprender sobre selectores de CSS, combinadores y especificidad.
YouTube Video
HTML/CSS para vista previa
css-base.css
1body {
2 font-family: Arial, sans-serif;
3 line-height: 1.6;
4 margin: 20px 20px 600px 20px;
5 background-color: #f4f4f9;
6 color: #333;
7}
8
9header h1 {
10 font-size: 24px;
11 color: #333;
12 text-align: center;
13 margin-bottom: 20px;
14}
15
16h2, h3 {
17 color: #555;
18}
19
20h2 {
21 font-size: 20px;
22 border-bottom: 2px solid #ccc;
23 padding-bottom: 5px;
24}
25
26h3 {
27 font-size: 18px;
28 margin-top: 20px;
29 padding-left: 10px;
30 border-left: 2px solid #ccc;
31}
32
33h4 {
34 margin: 0;
35 margin-left: 10px;
36 font-size: 14px;
37}
38
39article section p {
40 margin-left: 40px;
41}
42
43p, pre {
44 margin: 10px 0;
45 padding: 0;
46}
47
48ul, ol, dl, menu {
49 margin: 0;
50}
51
52pre {
53 background-color: #f0f0f0;
54 border-left: 4px solid #ccc;
55 padding: 10px;
56 overflow-x: auto;
57}
58
59.sample-view {
60 border: 1px solid #eee;
61 border-left: 4px solid #eee;
62 padding: 10px;
63 overflow-x: auto;
64}
65
66p.sample, .sample {
67 background-color: #e7f4e9;
68 padding: 10px;
69 border-left: 4px solid #7bbd82;
70 color: #333;
71}
72
73p.sample-error, .sample-error {
74 background-color: #f4e7e7;
75 padding: 10px;
76 border-left: 4px solid lightcoral;
77 color: #333;
78}
79
80.example {
81 background-color: #e0f0ff;
82 padding: 10px;
83 border-left: 4px solid #4a90e2;
84 color: #333;
85}
86
87p.sample-warn, .sample-warn {
88 background-color: #f4f1e7;
89 padding: 10px;
90 border-left: 4px solid #bda97b;
91 color: #333;
92}
93
94code {
95 background-color: #f4f4f4;
96 padding: 2px 4px;
97 border-radius: 4px;
98 font-family: monospace;
99}
100
101span {
102 font-weight: bold;
103}
104
105article {
106 background-color: white;
107 padding: 20px;
108 margin-bottom: 10px;
109 border-radius: 8px;
110 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
111}
112
113section {
114 margin-bottom: 20px;
115}
116
117section div {
118 width: 400px;
119 height: 50px;
120 margin: 20px auto;
121 color: white;
122 display: flex;
123 align-items: center;
124 justify-content: center;
125 font-size: 1.2rem;
126 background-color: lightgray;
127 border: 1px solid #ccc;
128}
129
130header h4 {
131 text-align: right;
132 color: #666;
133 font-size: 0.8em;
134 text-decoration: none;
135}
136
137header + pre {
138 margin: 0;
139 margin-top: -20px;
140 padding-top: 14px;
141 font-size: 0.9em;
142}
143
144header + .sample-view {
145 margin: 0;
146 margin-top: -16px;
147}
148
149.sample-view p {
150 margin: 0;
151 padding: 0;
152}css-basics.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Basics</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-basics.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Basics</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Selectors</h2></header>
19 <article>
20 <h3>Universal Selector : *</h3>
21 <section>
22 <header><h4>CSS</h4></header>
23<pre class="sample">
24* {
25 font-family:'Courier New', Courier, monospace;
26}
27</pre>
28 </section>
29 </article>
30 <article>
31 <h3>Element Selector</h3>
32 <section>
33 <header><h4>CSS</h4></header>
34<pre class="sample">
35strong {
36 color: red;
37}
38</pre>
39 <header><h4>HTML</h4></header>
40 <pre>This is <strong>sample</strong> text.</pre>
41 <header><h4>HTML+CSS</h4></header>
42 <section class="sample-view">
43 This is <strong>sample</strong> text.
44 </section>
45 </section>
46 </article>
47 <article>
48 <h3>ID Selector : #</h3>
49 <section>
50 <header><h4>CSS</h4></header>
51<pre class="sample">
52#example1 {
53 color: steelblue;
54}
55</pre>
56 <header><h4>HTML</h4></header>
57 <pre><span id="example1">This is sample text.</span></pre>
58 <header><h4>HTML+CSS</h4></header>
59 <section class="sample-view">
60 <span id="example1">This is sample text.</span>
61 </section>
62 </section>
63 </article>
64 <article>
65 <h3>Class Selector : .</h3>
66 <section>
67 <header><h4>CSS</h4></header>
68<pre class="sample">
69.example1 {
70 background-color: yellow;
71 font-weight: bold;
72}
73</pre>
74 <header><h4>HTML</h4></header>
75 <pre><span class="example1">This is sample text.</span></pre>
76 <header><h4>HTML+CSS</h4></header>
77 <section class="sample-view">
78 <section>
79 <span class="example1">This is sample text.</span>
80 </section>
81 </section>
82 </article>
83 <article>
84 <h3>Attribute Selector : [property=value]</h3>
85 <section>
86 <header><h4>CSS</h4></header>
87<pre class="sample">
88a[href="index.html"] {
89 font-weight: bold;
90}
91</pre>
92 <header><h4>HTML</h4></header>
93<pre>
94<a href="index.html">Home</a><br>
95<a href="about.html">About</a>
96</pre>
97 <header><h4>HTML+CSS</h4></header>
98 <section class="sample-view">
99 <a href="index.html">Home</a><br>
100 <a href="about.html">About</a>
101 </section>
102 </section>
103 </article>
104 <article>
105 <h3>Descendant Combinator</h3>
106 <section>
107 <header><h4>CSS</h4></header>
108<pre class="sample">
109span strong {
110 text-decoration: underline;
111}
112</pre>
113 <header><h4>HTML</h4></header>
114 <pre><span>This is <strong>sample</strong> text.</span></pre>
115 <header><h4>HTML+CSS</h4></header>
116 <section class="sample-view">
117 <span>This is <strong>sample</strong> text.</span>
118 </section>
119 </section>
120 </article>
121 <article>
122 <h3>Child Combinator : ></h3>
123 <section>
124 <header><h4>CSS</h4></header>
125<pre class="sample">
126span > em {
127 color: blue;
128}
129</pre>
130 <header><h4>HTML</h4></header>
131<pre>
132This is <em>sample</em> text.<br>
133<span>This is <em>another</em> text.</span><br>
134<span>This text is not <s><em>blue</em></s> in color.</span>
135</pre>
136 <header><h4>HTML+CSS</h4></header>
137 <section class="sample-view">
138 This is <em>sample</em> text.<br>
139 <span>This is <em>another</em> text.</span><br>
140 <span>This text is not <s><em>blue</em></s> in color.</span>
141 </section>
142 </section>
143 </article>
144 <article>
145 <h3> Next Sibling combinator : +</h3>
146 <section>
147 <header><h4>CSS</h4></header>
148<pre class="sample">
149br + b {
150 color: green;
151}
152</pre>
153 <header><h4>HTML</h4></header>
154<pre>
155<span>
156 This is <b>first text</b>.<br>
157 This is <b>second text</b>.<br>
158 <i>This</i> is <b>third text</b>.<br>
159</span>
160</pre>
161 <header><h4>HTML+CSS</h4></header>
162 <section class="sample-view">
163 <span>
164 This is <b>first text</b>.<br>
165 This is <b>second text</b>.<br>
166 <i>This</i> is <b>third text</b>.<br>
167 </span>
168 </section>
169 </section>
170 </article>
171 <article>
172 <h3>Subsequent Sibling Combinator : ~</h3>
173 <section>
174 <header><h4>CSS</h4></header>
175<pre class="sample">
176br ~ b {
177 color: steelblue;
178}
179</pre>
180 <header><h4>HTML</h4></header>
181<pre>
182<span>
183 This is <b>first text</b>.<br>
184 This is <b>second text</b>.<br>
185 <i>This</i> is <b>third text</b>.<br>
186</span>
187</pre>
188 <header><h4>HTML+CSS</h4></header>
189 <section class="sample-view">
190 <span>
191 This is <b>first text</b>.<br>
192 This is <b>second text</b>.<br>
193 <i>This</i> is <b>third text</b>.<br>
194 </span>
195 </section>
196 </section>
197 </article>
198 <article>
199 <h3>Pseudo Class ":" </h3>
200 <section>
201 <header><h4>CSS</h4></header>
202<pre class="sample">
203a:hover {
204 background-color: lightskyblue;
205}
206</pre>
207 <header><h4>HTML</h4></header>
208<pre>
209 <a href="#">Click here</a><br>
210</pre>
211 <header><h4>HTML+CSS</h4></header>
212 <section class="sample-view">
213 <a href="#">Click here</a><br>
214 </section>
215 </section>
216 </article>
217 <article>
218 <h3>Pseudo Element "::" </h3>
219 <section>
220 <header><h4>CSS</h4></header>
221<pre class="sample">
222u::before {
223 content: " ** ";
224 color: red;
225 font-weight: bold;
226}
227</pre>
228 <header><h4>HTML</h4></header>
229<pre>
230 <u>Sample Text</u>
231</pre>
232 <header><h4>HTML+CSS</h4></header>
233 <section class="sample-view">
234 <u>Sample Text</u>
235 </section>
236 </section>
237 </article>
238 </main>
239
240 <main>
241 <header><h2>Inheritance & Priority of CSS</h2></header>
242 <article>
243 <h3>CSS Specificity Rule</h3>
244 <section>
245 <header><h4>CSS Specificity</h4></header>
246 <section class="example">
247 <ol>
248 <li><b>Inline Styles</b>: Styles written directly within the HTML element.</li>
249 <li><b>ID Selectors</b>: e.g., <code>#id</code></li>
250 <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: e.g., <code>.class</code>, <code>[attribute=value]</code>, <code>:hover</code>, etc.</li>
251 <li><b>Element Selectors</b>: e.g., <code>div</code>, <code>h1</code>, <code>p</code>, etc.</li>
252 <li><b>Universal Selector</b>: <code>*</code></li>
253 </ol>
254 </section>
255
256 <header><h4>How Specificity is Calculated</h4></header>
257 <section class="example">
258 <ol>
259 <li><b>Inline Styles</b>: Always have the highest specificity and are always applied.</li>
260 <li><b>ID Selectors</b>: Worth 100 points each.</li>
261 <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: Worth 10 points each.</li>
262 <li><b>Element Selectors and Pseudo-elements</b>: Worth 1 point each.</li>
263 </ol>
264 </section>
265 </section>
266 </article>
267 <article>
268 <h3>Example of CSS Specificity Rule</h3>
269 <section>
270 <header><h4>CSS</h4></header>
271<pre class="sample">
272/* ID Selector */
273#header {
274 color: blue;
275}
276
277/* Class Selector */
278.header {
279 color: red;
280}
281
282/* Element Selector */
283h1 {
284 color: green;
285}
286</pre>
287 <header><h4>HTML</h4></header>
288 <pre><h1 id="header" class="header">Example of CSS Specificity Rule</h1></pre>
289 <header><h4>HTML+CSS</h4></header>
290 <section class="sample-view">
291 <h1 id="header" class="header">Example of CSS Specificity Rule</h1>
292 </section>
293 </section>
294 </article>
295 <article>
296 <h3>Using <code>!important</code> in CSS</h3>
297 <section>
298 <header><h4>CSS</h4></header>
299<pre class="sample">
300#important-header {
301 color: blue;
302}
303
304.important-header {
305 color: red !important;
306}
307</pre>
308 <header><h4>HTML</h4></header>
309 <pre><h1 id="important-header" class="important-header">Example of <code>!important</code></h1></pre>
310 <header><h4>HTML+CSS</h4></header>
311 <section class="sample-view">
312 <h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
313 </section>
314 </section>
315 </article>
316 <article>
317 <h3>CSS Inheritance</h3>
318 <section>
319 <header><h4>CSS</h4></header>
320<pre class="sample">
321footer {
322 color: gray;
323}
324
325p {
326 color: black;
327}
328</pre>
329 <header><h4>HTML</h4></header>
330<pre>
331<footer>
332 <p>This paragraph's text will be black.</p>
333 <span>This text will be gray.</span>
334</footer>
335</pre>
336 <header><h4>HTML+CSS</h4></header>
337 <section class="sample-view">
338 <footer>
339 <p>This paragraph's text will be black.</p>
340 <span>This text will be gray.</span>
341 </footer>
342 </section>
343 </section>
344 </article>
345 <article>
346 <h3>Cascading Styles</h3>
347 <section>
348 <header><h4>CSS</h4></header>
349<pre class="sample">
350.text {
351 color: red;
352}
353
354.text {
355 color: blue;
356}
357</pre>
358 <header><h4>HTML</h4></header>
359 <pre><p class="text">This text will be blue.</p></pre>
360 <header><h4>HTML+CSS</h4></header>
361 <section class="sample-view">
362 <p class="text">This text will be blue.</p>
363 </section>
364 </section>
365 </article>
366
367</body>
368</html>Sintaxis Básica
1selector {
2 property: value;
3}La estructura básica de CSS consiste en selector, propiedad y valor. Cada par de propiedades y valores va seguido de un punto y coma.
selectorespecifica a qué elemento HTML se aplica el estilo. En este ejemplo, los estilos se aplican a todos los elementos<header>.propiedadespecifica la propiedad de estilo que se va a cambiar, como el color o el tamaño de fuente.Paddingycolorson las propiedades en este ejemplo.valores el valor asignado a la propiedad. Por ejemplo, para el color, podría serwhiteo#9cf, y para el tamaño del margen, podría ser20px.
Selectores
Los selectores de CSS son patrones para seleccionar elementos HTML. Al usar selectores, puedes aplicar estilos a elementos específicos o grupos de elementos.
Selector Universal
1/* Universal Selector : "*" */
2* {
3 font-family:'Courier New', Courier, monospace;
4}*es un selector universal que se aplica a todos los elementos.- En este ejemplo, se cambia la fuente de todos los elementos.
Selector de Elemento
1/* Element Selector */
2strong {
3 color: red;
4}- Un selector de elemento es un selector que se aplica a etiquetas HTML específicas escribiendo el nombre de la etiqueta HTML.
- En este ejemplo, el color del texto del elemento
<strong>se cambia a rojo.
Selector de ID
1/* ID Selector : "#" */
2#example1 {
3 color: steelblue;
4}#es un selector de ID que se usa para seleccionar elementos por ID.- Los ID son únicos, por lo que solo puede haber un elemento con el mismo ID en una sola página.
Selector de Clase
1/* Class Selector : "." */
2.example1 {
3 background-color: yellow;
4 font-weight: bold;
5}.es un selector de clase que se usa para seleccionar elementos por clase.- Agrega un atributo de clase a los elementos HTML para aplicar estilos a los elementos que pertenecen a esa clase.
Selector de Atributos
1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3 font-weight: bold;
4}[href="index.html"]es un selector de atributo que selecciona elementos con un atributo específico.- En este ejemplo, el texto del elemento
<a>con un valor de atributohrefdeindex.htmlse establece en negrita.
Combinador
Los combinadores se utilizan para combinar varios selectores y seleccionar elementos que tienen relaciones específicas. Mientras que un selector selecciona elementos individualmente, un combinador define las relaciones estructurales entre los elementos.
Combinador de descendiente
1/* Descendant Combinator : " " */
2span strong {
3 text-decoration: underline;
4}- Un combinador de descendientes aplica estilos a todos los elementos especificados dentro de un elemento en particular.
- En este ejemplo, se aplica un subrayado a los elementos
<strong>dentro de los elementos<span>.
Combinador de hijo
1/* Child Combinator : ">" */
2span > em {
3 color: blue;
4}- El signo
>entrespanyemse utiliza como un combinador de hijos. En este ejemplo, los estilos se aplican solo a los elementos<em>que son hijos directos de los elementos<span>. En el ejemplo de la tercera línea, debido a que hay una etiqueta<s>entre las etiquetas<span>y<em>, el estilo no se aplica.
Combinador de hermano adyacente
1/* Next Sibling combinator */
2br + b {
3 color: green;
4}- El combinador de hermano adyacente que usa el signo
+aplica estilos a un elemento hermano que aparece inmediatamente después de un cierto elemento. - En este ejemplo, el color del texto se vuelve verde solo si una etiqueta
<b>aparece inmediatamente después de una etiqueta<br>.
Combinador de hermanos generales
1/* Subsequent Sibling Combinator */
2br ~ b {
3 color: steelblue;
4}- El combinador de hermano general que usa el signo
~selecciona todos los elementos hermanos que aparecen después de un cierto elemento. - En este ejemplo, el color del texto de todas las etiquetas
<b>que aparecen después de una etiqueta<br>será un tono de azul.
Pseudo-clases
1/* Pseudo Class : ":" */
2a:hover {
3 background-color: lightskyblue;
4}- Se usa
:para seleccionar pseudo-clases. - Los detalles sobre las pseudo-clases se explicarán en otro artículo.
Pseudo-elementos
1/* Pseudo Element : "::" */
2u::before {
3 content: " ** ";
4 color: red;
5 font-weight: bold;
6}- Se usa
::para seleccionar pseudo-elementos. - Los detalles sobre los pseudo-elementos también se explicarán en otro artículo.
Especificidad CSS
La precedencia en CSS es crucial para comprender cómo funciona CSS y prevenir aplicaciones inesperadas de estilos. La prioridad de CSS determina qué regla es la más fuerte cuando se aplican varias reglas CSS al mismo elemento. La prioridad del CSS está determinada principalmente por los siguientes factores.
- Estilos en línea: Estilos escritos directamente dentro del HTML
- Selectores de ID ：
#id - Clases, Selectores de Atributo, Pseudo-clases ：
.class,[attribute=value],:hover, etc - Selectores de Elemento ：
div,h1,p, etc - Selector Universal ：
*
Cuanto más arriba en la lista, mayor es la prioridad, y cuanto más abajo, menor es la prioridad.
Cómo Calcular la Especificidad
La prioridad del CSS se calcula cuantificando el 'peso' de cada selector. El peso de cada selector se representa de la siguiente manera.
- Estilos en línea: Los estilos en línea son los más poderosos y siempre tienen prioridad.
- Selectores de ID: Un selector de ID corresponde a '100 puntos'.
- Clases, selectores de atributos, pseudo-clases: Estos corresponden a '10 puntos'.
- Selectores de elementos, pseudo-elementos: Estos corresponden a '1 punto'.
Se aplica la regla con la puntuación más alta.
Ejemplo:
1/* ID Selector */
2#header {
3 color: blue;
4}
5
6/* Class Selector */
7.header {
8 color: red;
9}
10
11/* Element Selector */
12h1 {
13 color: green;
14}1<h1 id="header" class="header">Example of CSS Specificity Rule</h1>Aquí, la etiqueta <h1> tiene tres estilos diferentes aplicados:
- Selector de elemento
h1(1 punto) - Selector de clase
.header(10 puntos) - Selector de ID
#header(100 puntos)
En este caso, dado que el selector de ID tiene la prioridad más alta, se aplica color: azul.
Sustitución de la prioridad con !important
Use !important si desea forzar un estilo e ignorar las prioridades habituales. !important tiene la influencia más potente sobre todas las reglas, anulando todo lo demás.
Ejemplo:
1#important-header {
2 color: blue;
3}
4
5.important-header {
6 color: red !important;
7}1<h1 id="important-header" class="important-header">Example of <code>!important</code></h1>- Aquí, se especifica
color: red !important;, por lo quecolor: redtiene prioridad.
Herencia y Prioridad
CSS tiene la capacidad de heredar estilos de elementos padres a elementos hijos. Por ejemplo, propiedades como color y font-family se heredan por defecto. Sin embargo, si un elemento hijo específico tiene un estilo aplicado directamente, este estilo tiene prioridad sobre los estilos heredados.
Ejemplo:
1footer {
2 color: gray;
3}
4
5p {
6 color: black;
7}1<footer>
2 <p>This paragraph's text will be black.</p>
3 <span>This text will be gray.</span>
4</footer>- Aquí,
color: gray;se aplica a la etiquetafooter, pero dado quecolor: black;se especifica explícitamente para el elementop, el texto del elementopse muestra en negro. Mientras tanto, el elementospanhereda la propiedadcolordelfootery aparece en gris.
Cascada y Prioridad en CSS
Como sugiere el nombre 'Cascading Style Sheets (CSS)', los estilos 'cascadian'. Esto significa que si hay múltiples hojas de estilo o reglas, la última regla definida tiene prioridad. Si las prioridades son las mismas, se aplica el estilo escrito más tarde.
Ejemplo:
1.text {
2 color: red;
3}
4
5.text {
6 color: blue;
7}1<p class="text">This text will be blue.</p>- Aquí,
color: blue;se define más tarde, por lo que el texto se muestra en azul.
Resumen
La precedencia en CSS se determina mediante algoritmos como la especificidad, pero aquí solo hemos considerado las partes básicas.
Las reglas básicas son las siguientes:
- Los estilos en línea siempre tienen la prioridad más alta.
- Los selectores de ID son poderosos y tienen prioridad sobre las clases y etiquetas.
- Los selectores de clase y pseudoclases tienen un nivel de precedencia moderado.
- Los selectores de etiqueta y pseudo-elementos tienen el nivel de precedencia más bajo.
- !important anula la precedencia normal y aplica el estilo de manera forzada.
Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.