Home-theater-designers
La propietat de visualització CSS és una eina potent per als dissenyadors web. Us permet controlar els dissenys dels elements del lloc web amb un estil mínim, amb valors senzills que són fàcils de recordar.
Però, què fan cadascun d'aquests valors i com funcionen? Anem a esbrinar.
MAKEUSEO VÍDEO DEL DIA
Quina és la propietat de visualització CSS?
La propietat de visualització especifica el tipus de representació del quadre utilitzat per als elements HTML d'una pàgina web. Això provoca una varietat de comportaments, inclòs no aparèixer en absolut. Podeu editar aquests valors al vostre lloc web mitjançant el full d'estil o les seccions de personalització CSS adequades a Eines CMS com WordPress .
Mantenir els elements en línia amb la visualització CSS: en línia
Els valors d'amplada i d'alçada no s'apliquen a un element amb visualització en línia; el contingut interior estableix les seves dimensions. Els elements HTML en línia es poden situar al costat d'altres elements, comportant-se com a . La pantalla en línia s'utilitza més habitualment per al text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</div>
</body>
</html>
Aquest marcatge HTML i CSS anteriors serveixen com un bon exemple del valor en línia de visualització. Quan s'utilitzen conjuntament, mostrarà una única línia de text feta amb dos elements HTML diferents.
Controlar els dissenys del lloc web amb visualització CSS: bloquejar
D'alguna manera, el valor del bloc de visualització és el contrari del valor en línia. Es poden establir dimensions d'alçada i amplada, i els elements amb aquest valor no es poden situar un al costat de l'altre. L'exemple anterior mostra dos elements amb el valor de bloc. Els elements amb el valor de bloc mostren per defecte a l'amplada màxima del seu element pare.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</div>
</body>
</html>A diferència de l'exemple d'estil en línia, aquest exemple de valor de bloc de visualització divideix les línies de text en dues línies diferents. El valor de l'amplada del contingut d'ajust estableix l'amplada dels elements perquè coincideixi amb la longitud del text.
Elements HTML costat a costat amb visualització CSS: bloc en línia
El valor de bloc en línia de visualització CSS funciona igual que un valor en línia normal, només amb la possibilitat d'afegir dimensions específiques. Això fa possible crear dissenys semblants a quadrícula sense tenir elements principals al seu lloc. Tornant a l'exemple anterior, afegir el valor de bloc en línia permet que els elements s'asseguin un al costat de l'altre.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</div>
</body>
</html>
El valor del bloc en línia no sembla gaire diferent del valor en línia. És important tenir en compte que, però, podeu establir les dimensions dels elements amb aquest valor, de manera que és més fàcil treballar-hi en determinats casos.
Amaga els elements del lloc web amb visualització CSS: cap
El valor de visualització més senzill és 'cap'. Aquest valor amaga l'element i qualsevol element secundari, juntament amb els marges i altres propietats d'espaiat. Els elements amb el valor CSS no mostren cap valor encara són visibles als inspectors del navegador.
Creeu elements flexibles i sensibles amb la visualització CSS: flex
La flexió de pantalla és un dels modes de disseny CSS més nous. Quan la flexió de visualització es troba en un element pare, tots els elements que hi ha dins es converteixen en elements CSS flexibles. L'element pare en aquesta configuració és un flexbox.
Les caixes flexibles creen dissenys sensibles amb variables predefinides, com ara l'amplada i l'alçada. Val la pena aprendre sobre les caixes flexibles HTML/CSS abans de començar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
#flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html> Col·locació de caixes flexibles una al costat de l'altra Amb pantalla: inline-flex
Inline-flex es comporta igual que un flexbox normal, amb l'avantatge afegit que l'element es pot seure al costat d'altres elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>Crear taules complexes amb la pantalla CSS: taula
El valor de la taula de visualització recorda els temps més antics del disseny del lloc web. Tot i que la majoria de llocs web avui no utilitzen taules per als seus dissenys, encara són vàlids per mostrar dades i contingut en un format llegible.
Afegir el valor de la taula a un element HTML farà que actuï com un element de taula, però necessiteu valors addicionals perquè la vostra taula funcioni correctament.
Visualització CSS: cel·la-taula
Els elements amb el valor de cel·la de taula actuen com a cel·les individuals dins de la taula principal. I els valors de columna de taula i fila de taula agrupen aquestes cel·les individuals.
Visualització CSS: fila de taula
El valor de la fila de la taula funciona com un element HTML
Visualització CSS: taula-columna
El valor de la columna de la taula funciona de manera similar al valor de la fila de la taula, només que no divideix la taula. En lloc d'això, podeu utilitzar aquest valor per afegir regles CSS específiques a les diferents columnes que ja existeixen.
que paga més l’entrega de menjar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</div>
</div>
</div>
</body>
</html>Creeu taules al costat amb pantalla CSS: taula en línia
Igual que les altres variants en línia que ja hem vist, la taula en línia permet col·locar elements de la taula al costat d'altres elements.
Creeu dissenys de llocs web responsius amb visualització CSS: quadrícula
El valor de la quadrícula de visualització CSS és similar al valor de la taula, només les columnes i les files d'una quadrícula poden tenir una mida flexible. Això fa que les graelles siguin ideals per crear el disseny principal de les pàgines web. Deixen espai per a capçaleres i peus de pàgina d'amplada completa alhora que permeten tenir àrees de contingut de diferents mides.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>
Les quadrícules són similars a les caixes flexibles, només que poden col·locar elements a sota i al costat de l'altre. La propietat grid-template-areas és vital per a això. Com podeu veure al codi, la nostra capçalera i peu de pàgina ocupen quatre espais a la matriu, ja que són d'amplada completa. Les barres laterals ocupen una ranura cadascuna, mentre que el contingut en ocupa dos, dividint efectivament la fila central de la graella en tres columnes.
Visualització CSS: quadrícula en línia
Si feu servir el valor de la quadrícula en línia, la vostra quadrícula s'asseu al costat d'altres elements, igual que els altres valors en línia d'aquesta guia.
Ús de CSS Display per al disseny web
La propietat de visualització CSS ofereix una manera pràctica d'ajustar les estructures dels elements del lloc web sense haver de canviar el marcatge HTML. Això és ideal per a aquells que utilitzen plataformes de lliurament de contingut com Shopify o WordPress, però també pot ser útil per al disseny web general.