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.
À 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.
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.
Utilisez la propriété CSS position pour centrer le contenu avec la syntaxe suivante :
element{
position: absolute;
left: value;
top: value;
}
<!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>
Le contenu à aligner au centre doit être écrit à l'intérieur de la balise
Si le contenu que vous souhaitez centrer contient uniquement du texte, vous pouvez simplement utiliser l'attribut textalign.
text-align: center;
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.
*{
Css declarations
}
<!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>
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.
element{
property: value !important;
}
<!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>
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;
}
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 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
