Maison >interface Web >tutoriel CSS >7 hacks CSS que tout développeur devrait connaître
7 hacks CSS que tout développeur devrait connaître
- WBOYavant
- 2023-08-29 14:53:02638parcourir
CSS est l'abréviation de Cascading Style Sheets. Il est utilisé pour créer des sites Web visuellement attrayants. Son utilisation facilitera le processus de création de pages Web efficaces.
La conception d'un site Web est cruciale. Il améliore l’esthétique et la qualité globale du site Web en facilitant l’interaction des utilisateurs. Bien qu’il soit possible de créer un site Web sans CSS, un style est requis car aucun utilisateur ne souhaite interagir avec un site Web ennuyeux et peu attrayant. Dans cet article, nous discutons de 7 hacks CSS dont chaque développeur aura besoin à un moment donné de son parcours de conception Web.
Créez des images réactives en utilisant CSS
À l'aide de diverses techniques appelées images réactives, vous pouvez charger l'image correcte en fonction de la résolution, de l'orientation, de la taille de l'écran, de la connexion réseau ou de la mise en page de l'appareil. Les images ne doivent pas être étirées par le navigateur pour s'adapter à la mise en page, et le téléchargement des images ne doit pas prendre trop de temps ni utiliser trop de trafic réseau. Cela améliore l’expérience utilisateur car les images se chargent rapidement et sont claires à l’œil humain. Pour créer des images réactives, écrivez toujours la syntaxe suivante −
img{
max-width: 100%;
height: auto;
}
La technique la plus simple pour créer des photos en haute résolution consiste à définir leurs valeurs de largeur et de hauteur à la moitié de leur taille réelle.
Placez le contenu de l'élément au centre
Si vous souhaitez centrer le contenu d'un élément, il existe plusieurs façons de le faire. Les plus simples sont mentionnés ci-dessous.
Attributs de position
Utilisez la propriété CSS position pour centrer le contenu avec la syntaxe suivante :
element{
position: absolute;
left: value;
top: value;
}
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align: center;
}
div{
position: absolute;
left: 45%;
}
</style>
</head>
<body>
<h1> Position property </h1>
<div> This is an example. </div>
</body>
</html>
Utilisez tags
Le contenu à aligner au centre doit être écrit à l'intérieur de la balise
Utilisez l'attribut d'alignement du texte
Si le contenu que vous souhaitez centrer contient uniquement du texte, vous pouvez simplement utiliser l'attribut textalign.
text-align: center;
Utilisez des sélecteurs universels
Le sélecteur CSS astérisque (*), également connu sous le nom de sélecteur universel CSS, est utilisé pour sélectionner ou faire correspondre tous les éléments ou parties d'éléments de l'ensemble de la page Web à la fois. Une fois sélectionné, vous pouvez utiliser n'importe quelle propriété personnalisée CSS pour les styliser en conséquence. Il correspond à tout type d'élément HTML comme ,
Les sélecteurs universels sont en fait utilisés pour styliser chaque élément d'une page Web. Souvent, il est difficile de conserver un format de style spécifique pour une page entière en raison des paramètres par défaut définis par les navigateurs. Il permet aux développeurs de préparer des styles par défaut pour les pages Web. L'utilisation la plus courante consiste à styliser ensemble tous les éléments d'une page Web.
Grammaire
*{
Css declarations
}
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
text-align: center;
font-family: Imprint MT shadow;
}
</style>
</head>
<body>
<h1>Css Universal Selector</h1>
<h2>This is an example. It shows how to style the whole document altogether.</h2>
<div>
<p class = "para1"> This is the first paragraph. </p>
<p class= "para2"> This is the second paragraph </p>
</div>
</body>
</html>
Remplacer les styles CSS
Habituellement, nous utilisons des classes CSS pour remplacer les styles CSS. Cependant, si vous souhaitez préciser qu'un style spécifique doit être appliqué à un élément, alors utilisez !important.
Grammaire
element{
property: value !important;
}
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: blue;
}
.demo {
color: red !important;
}
</style>
</head>
<body>
<h2> This is an example #1 </h2>
<h2> This is an example #2 </h2>
<h2> This is an example #3 </h2>
<h2 class= "demo"> This is an example #4 </h2>
<h2> This is an example #5 </h2>
</body>
</html>
Comportement de défilement
Une expérience utilisateur bonne et efficace est le facteur le plus critique dans la conception Web. Cela ne sert à rien de créer un site Web si votre site Web n’est pas convivial. Pour garantir une expérience utilisateur fluide, vous devez ajouter un effet de défilement fluide à votre site Web.
L'attributscroll-behaviour permet aux développeurs de spécifier le comportement de la page lors du défilement.
html{
scroll-behaviour: smooth;
}
Ajoutez des requêtes multimédias et rendez la mise en page réactive
Lorsqu'un type de média correspond au type d'appareil sur lequel le document est affiché, une requête média avec ce type de média sera utilisée pour appliquer des styles au contenu.
@media (max-width: 100px){
{CSS rules….
}
}
Si votre site Web doit être consulté sur différents appareils, il est préférable d'utiliser des unités de fenêtre. Il garantit que le contenu est automatiquement redimensionné en fonction de la fenêtre d'affichage.
vw– largeur de la fenêtre d'affichage
vh ——Hauteur de la fenêtre
v minutes– Porte d'affichage minimale
v max– Viewport maximum
CSS 弹性盒
一个CSS Flexbox是一个包含多个flex元素的容器。这些flex元素可以根据需要排列成行或列。Flex项目是flex容器的子元素，它是其父元素。使用CSS flexbox可以使每个元素具有精美和吸引人的外观。
display:flex帮助开发者让每一个组件都显得合适、可爱。它通过对齐元素的子元素将它们排列成行或列。
它将父元素中的子元素对齐到行或列中。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: #097969;
align-items: center;
justify-content: center;
width: 60%;
}
.demo1, .demo2, .demo3, .demo4 {
background-color: yellow;
height : 50px;
width: 90%;
margin: 10px;
padding: 12px;
font-size: 17px;
font-weight: bold;
font-family: verdana;
text-align: center;
align-items: center;
color: brown;
}
.demo1{
order: 1;
}
.demo2{
order: 4;
}
.demo3{
order: 2;
}
.demo4{
order: 3;
}
</style>
</head>
<body>
<h1>Order of Flex Items</h1>
<p>The following list of flex elements has them in an ordered arrangement thanks to the order property:</p>
<div class="flex-container">
<div class= "demo1" > This </div>
<div class= "demo2"> example </div>
<div class= "demo3"> is </div>
<div class= "demo4"> an </div>
</div>
</body>
</html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!