Reguli CSS pentru coloane
Această pagină acoperă proprietățile CSS column-rule, span și width.
Regula CSS pentru coloane
Proprietatea column-rule-style setează stilul liniei verticale dintre coloane. Proprietatea column-rule-width setează lățimea acelei linii. Proprietatea column-rule-color setează culoarea ei. Proprietatea column-rule este o prescurtare pentru a seta toate cele trei odată.
Stilul regulii
Folosește column-rule-style pentru a adăuga o linie verticală solidă între coloane.
Prompt
Creează o pagină cu un div care conține mai multe paragrafe de text, împărțit în 3 coloane folosind column-count. Aplică column-rule-style: solid pentru a afișa o linie verticală solidă între coloane.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-rule-style</title>
<style>
div {
column-count: 3;
column-rule-style: solid;
}
</style>
</head>
<body>
<h1>CSS column-rule-style</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus. Nulla vitae sem nec diam vehicula fringilla.</p>
</div>
</body>
</html>
Lățimea regulii
Folosește column-rule-width pentru a seta lățimea liniei verticale dintre coloane.
Prompt
Creează o pagină cu un div care conține mai multe paragrafe de text, împărțit în 3 coloane folosind column-count. Aplică column-rule-style: solid și column-rule-width: 1px pentru a seta lățimea liniei verticale dintre coloane.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-rule-width</title>
<style>
div {
column-count: 3;
column-rule-style: solid;
column-rule-width: 1px;
}
</style>
</head>
<body>
<h1>CSS column-rule-width</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus. Nulla vitae sem nec diam vehicula fringilla.</p>
</div>
</body>
</html>
Culoarea regulii
Folosește column-rule-color pentru a seta culoarea liniei verticale dintre coloane.
Prompt
Creează o pagină cu un div care conține mai multe paragrafe de text, împărțit în 3 coloane folosind column-count. Aplică column-rule-style: solid și column-rule-color: lightblue pentru a colora linia verticală dintre coloane.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-rule-color</title>
<style>
div {
column-count: 3;
column-rule-style: solid;
column-rule-color: lightblue;
}
</style>
</head>
<body>
<h1>CSS column-rule-color</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus. Nulla vitae sem nec diam vehicula fringilla.</p>
</div>
</body>
</html>
Prescurtarea regulii
Folosește prescurtarea column-rule pentru a seta lățimea, stilul și culoarea liniei verticale într-o singură declarație.
Prompt
Creează o pagină cu un div care conține mai multe paragrafe de text, împărțit în 3 coloane folosind column-count. Folosește proprietatea prescurtată column-rule setată la "1px solid lightblue" pentru a stiliza linia verticală dintre coloane.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-rule shorthand</title>
<style>
div {
column-count: 3;
column-rule: 1px solid lightblue;
}
</style>
</head>
<body>
<h1>CSS column-rule shorthand</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus. Nulla vitae sem nec diam vehicula fringilla.</p>
</div>
</body>
</html>
Întinderea CSS a coloanelor
Proprietatea column-span setează pe câte coloane trebuie să se întindă un element. Este folosită adesea pentru titluri.
Exemplu
Fă ca un element <h2> să se întindă pe toate coloanele și centrează-l.
Prompt
Creează o pagină cu un div împărțit în 3 coloane care conține paragrafe de text. Adaugă un titlu h2 în interiorul div-ului cu column-span: all și text-align: center, astfel încât titlul să se întindă pe toate coloanele.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-span</title>
<style>
div {
column-count: 3;
}
h2 {
column-span: all;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS column-span</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<h2>A Heading That Spans All Columns</h2>
<p>Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</p>
<p>Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus.</p>
</div>
</body>
</html>
Lățimea CSS a coloanelor
Proprietatea column-width setează o lățime sugerată, optimă, pentru fiecare coloană. Browserul decide câte coloane să creeze pe baza acestei lățimi și a spațiului disponibil.
Exemplu
Setează lățimea optimă sugerată a coloanei la 100px și lasă browserul să determine numărul de coloane.
Prompt
Creează o pagină cu un div care conține mai multe paragrafe de text. Folosește column-width: 100px pentru a lăsa browserul să determine numărul de coloane pe baza lățimii optime sugerate și a spațiului disponibil.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS column-width</title>
<style>
div {
column-width: 100px;
}
</style>
</head>
<body>
<h1>CSS column-width</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<p>Cras ut ultricies orci. Nullam finibus, odio nec volutpat porttitor, enim ante semper dui, id sollicitudin risus erat non lectus. Nulla vitae sem nec diam vehicula fringilla.</p>
</div>
</body>
</html>