数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学每个开发者都应该知道的7个CSS技巧
CSS是层叠样式表的缩写。它用于制作美观的网站。使用它可以使制作有效的网页的过程更容易。
网站的设计至关重要。它通过促进用户交互来改善网站的美观性和整体质量。虽然可以不使用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属性
如果要居中对齐的内容只包含文本，则可以简单地使用text-align属性。
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-behavior属性使开发人员能够指定页面在滚动过程中的行为。
html{
scroll-behaviour: smooth;
}
添加媒体查询并使排版响应式
当媒体类型与显示文档的设备类型匹配时，使用该媒体类型的媒体查询将样式应用于内容。
@media (max-width: 100px){
{CSS rules….
}
}
如果您的网站要在不同的设备上查看，那么最好使用视口单位。它确保内容将根据视口自行调整大小。
vw – 视口宽度
vh – 视口高度
vmin – 视口最小值
vmax – 视口最大值
CSS Flexbox
CSS Flexbox是一个容器，包含许多弹性元素。弹性元素可以根据需要排列成行或列。弹性项目是其父元素弹性容器的子元素。每个元素都使用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>
浏览量：105
