极客教程每个开发者都应该知道的7个CSS最佳实践
CSS是Cascading Style Sheets的缩写。它被用来制作具有视觉吸引力的网站。使用它可以使制作有效网页的过程更加容易。
一个网站的设计是至关重要的。它通过促进用户互动来提高网站的美感和整体质量。虽然没有CSS也可以创建网站，但造型设计是必须的，因为没有用户愿意与一个无聊的、没有吸引力的网站互动。在这篇文章中，我们讨论了7个CSS最佳实践，每个开发者在网页设计过程中都会在某个时间点上需要它们。
使用CSS创建响应式图像
使用被称为响应式图像的各种技术，无论设备的分辨率、方向、屏幕大小、网络连接或页面布局如何，都可能加载正确的图像。图片不应该被浏览器拉伸以配合页面布局，而且下载图片不应该花费太长时间或使用太多网络。因为图片的加载速度很快，而且人眼看起来很清晰，可以提高用户体验。要制作响应式图片，一定要写出以下语法-
img{
max-width: 100%;
height: auto;
}
创建具有高分辨率的照片的最简单技术是将其宽度和高度值确定为只有实际尺寸的一半。
将一个元素的内容置于中心位置
如果你想让任何元素的内容居中对齐，有各种方法。最简单的方法在下面提到。
位置属性
使用CSS位置属性将内容置于中心位置，使用以下语法来指定它们
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>
使用<center>标签
你想在中间对齐的内容应该写在<center>标签内。然后，整个内容将被居中对齐。
使用text-align属性
如果要居中对齐的内容只包含文本，那么，你可以简单地使用textalign属性。
text-align: center;
通用选择器的使用
CSS星号（*）选择器，也被称为CSS通用选择器，用于一次性选择或匹配整个网页的所有元素或元素的某些部分。选择后，你可以使用任何CSS自定义属性来对其进行相应的样式设置。它可以匹配任何类型的HTML元素，如<div>、<section>、<nav>、<button>等，它也可以用来选择和样式父元素的子元素。
通用选择器从字面上看是用来为网页中的每个元素设置样式。一般来说，为整个页面保持一个特定的样式格式是很困难的，因为有浏览器设置的默认值。它使开发人员能够为一个网页准备一个默认的样式。最常见的用途是将网页中的所有元素全部样式化。
语法
*{
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>
覆盖CSS样式
通常情况下，为了覆盖CSS样式，我们使用CSS类。然而，如果你想指定一个特定的样式必须应用于一个元素，那么，使用 !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>
滚动行为
精细高效的用户体验是网页设计中最关键的因素。如果你的网站对用户不友好，那么做这个网站就没有意义。为了确保流畅的用户体验，你应该为你的网站添加流畅的滚动效果。
scroll-behaviour 属性使开发者能够指定页面在滚动时的行为。
html{
scroll-behaviour: smooth;
}
添加媒体查询并使排版具有响应性
当一个媒体类型与文档所显示的设备类型相匹配时，具有该媒体类型的媒体查询被用来对内容应用样式。
@media (max-width: 100px){
{CSS rules….
}
}
如果你的网站要在不同的设备上浏览，那么你最好使用视口单位。它可以确保内容会根据视口调整自己的大小。
- vw – 视口宽度
-
vh – 视口高度
-
vmin – 视口最小值
-
vmax – 视口最大值
CSS Flexbox
一个CSS Flexbox是一个包含若干柔性元素的容器。弹性元素可以根据需要排列成行或列。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>