每个开发者都应该知道的 7 个 CSS 技巧
CSS 是层叠样式表 (Cascading Style Sheets) 的缩写。它用于创建视觉上有吸引力的网站。使用它可以让制作高效网页的过程更加轻松。
网站的设计至关重要。它通过促进用户互动来提升网站的美感和整体质量。虽然不使用 CSS 也可以创建网站，但样式设置仍然必不可少，因为没有用户愿意与一个枯燥乏味的网站互动。在本文中，我们讨论了每个开发者在网页设计过程中都需要掌握的 7 个 CSS 技巧。
使用 CSS 创建响应式图像
使用各种称为响应式图像的技术，无论设备的分辨率、方向、屏幕尺寸、网络连接或页面布局如何，都可以加载正确的图像。图片不应被浏览器拉伸以适应页面布局，下载时间不应过长或占用过多的互联网流量。图片加载速度快，且在人眼看来清晰锐利，从而提升了用户体验。要制作响应式图片，请始终遵循以下语法:-
img{
max-width: 100%;
height: auto;
}
创建高分辨率照片的最简单方法是将其宽度和高度值设置为实际尺寸的一半。
将元素内容居中放置
如果要将任何元素的内容居中对齐，有多种方法。下面列出了一些最简单的方法。
Position 属性
使用 CSS 的 Position 属性，通过以下语法指定内容，即可将内容居中放置:-
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 规则….
}
}
如果您的网站需要在不同的设备上显示，那么最好使用视口单位。它确保内容会根据视口自动调整大小。
vw – 视口宽度
vh – 视口高度
v min – 最小视口
v max – 视口最大值
CSS Flexbox
CSS Flexbox 是一个包含多个 flex 元素的容器。flex 元素可以根据需要排列成行或列。flex 项目是 flex 容器(其父元素)的子元素。使用 CSS Flexbox，每个元素都拥有精美美观的外观。
display:flex 帮助开发人员使每个组件成为ppear appropriate and lovely. It arranges the element's children into rows or columns by aligning them.
It aligns the children in the parent element into rows or columns.
示例
<!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>
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
