面向网络开发者的CSS黑客技术
尽管不像JavaScript那样流行，但根据Redmonk的数据，CSS仍然是十大最常用的技术之一。
CSS在网络开发者中很受欢迎，因为它很强大，相对来说很容易学习，而且在不同的浏览器中无处不在。
每个开发者都应该知道各种CSS黑客技术，以编写更简洁的代码，改进设计组件，并节省时间。
1.使用过渡属性延缓悬停效果
在CSS中，悬停是指将鼠标指针放在一个组件上，而不点击它的动作。一个组件可以被设置为在悬停时改变外观。你可以通过添加一个过渡属性来延迟悬停效果，从而进一步改变其样式。
尽管看起来很整洁，但悬停效果会吸引用户对该元素的注意。
下面是一个悬停效果的例子片段。
<html>
<body>
<h4>I am fast</h4>
<p>I am slow</p>
<style>
/*Initial styles*/
h4 {
font-size: 70px;
color: red;
}
p {
font-size: 60px;
color: blue;
}
/* Styles, with hovering effect */
h4:hover {
color: black;
transition: all 0.5s ease;
/*delaying the hovering effect. */
}
p:hover {
color: yellow;
transition: all 2s ease;
}
</style>
</body>
</html>
在上面的代码片断中，我们为元素h4 和p 赋予不同的悬停效果。h4当鼠标放在它上面时，它的颜色将变成黑色，延迟时间为0.5秒，而p的颜色将变成黄色，但延迟时间更长，为2.0秒。
2.使用flex将内容在垂直和水平方向上居中
在一些开发者看来，将内容放在屏幕的中心似乎很困难。然而，这并不难做到，只是有很多方法可以做到这一点。
例如，你可以使用flex来使内容居中，如下图所示。
<html>
<body>
<div style="border: 1px solid; width: 500px; height: 600px;">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet illo
corporis saepe sunt quidem nesciunt asperiores impedit odit! Enim quam
voluptatum modi suscipit laboriosam porro fugiat odit molestiae error?
Dolores.
</p>
</div>
<style>
div {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</body>
</html>
在上面的片段中，我们使用div {display: flex} ，将元素p 放置在其包含的div的中心。justify-content: center ，将div内的所有元素围绕中心打包。align-items: center ，然后对div内的所有元素进行中心对齐。
3.通过使用图像作为背景将其与容器相匹配
一些网站的图片过大，破坏了开发者的网站布局，并使最终用户感到沮丧。
然而，使用这个CSS黑客技术，你的图片将永远适合于它们注定的容器而不会被拉伸。
假设你的图片被命名为test.png ，你可以把它显示在#container ，如下所示。
<html>
<body>
<div id="container">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<style>
#container {
background-image: url('test.png');
/* the image to display */
background-position: center;
/* crop the image from the center */
background-size: cover;
/* cover the container */
background-repeat: no-repeat;
/* do not repeat the image */
width: 500px;
/* the width */
height: 500px;
/* the height */
}
</style>
</body>
</html>
4.对访问的链接进行造型
CSS可以用来改变用户点击链接之前和之后的外观。
a: visited 属性控制所有用户点击过的链接，a: link 控制所有还没有被点击的链接。而a: active 链接则控制一个正在被点击的链接。
正确地设计这些链接的样式对用户来说是一个很大的好处。它建立了一个用户友好的网站，因为用户可以更容易地浏览网站。
如下面的片段所示，可以在一个链接上使用不同的颜色。
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/*selected link */
a:active {
color: blue
}
5.段落中第一个字母的样式
首字母是一种选择段落中第一个字母并指定其所占行数的技术。它通常被印刷媒体和信息网站使用，如新闻网站。
这是一个非常重要的技巧，因为它抓住了读者的注意力，使他们阅读第一行，最后阅读整个段落。
虽然这种风格可能看起来已经过时，但你仍然可以设计它，使其在最终用户看来更加现代。
让我们看一下下面的例子片段。
<html>
<body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<style>
p:first-letter {
display: grid;
margin: 7px;
color: black;
font-size: 80px;
float: left;
}
</style>
</body>
</html>
6.使用类进行样式设计时，如何对元素进行分组
对不同的HTML元素逐一进行造型是非常令人厌烦和浪费时间的。这可以通过使用类来轻松解决。
要做到这一点，将不同的元素分组在同一个class 属性下，并使用.class 选择器对它们进行造型。这个选择器将选择所有具有特定类属性的元素并对它们应用样式。
这对开发者来说是一个优势，因为他们不必无数次地写同一行代码，他们节省了时间，并减少了代码的大小。
假设你想为多个div的元素设置背景色、文本色、字体和文本居中。
让我们看一下下面的例子片段。
<html>
<body>
<div class="card">
<h4>Why do developer Group elements together when styling?</h4>
<p>Developers Group elements together to save on time </p>
<h5>What are advantages Of Consolidating during styling?</h5>
</div>
<div class="card">
<h4>Why do developer Group elements together when styling?</h4>
<p>Developers Group elements together to save on time </p>
<h5>What are advantages Of Consolidating during styling?</h5>
</div>
<style>
.card {
background-color: black;
color: white;
font-size: medium;
text-align: center;
width: 400px;
padding: 10px;
margin: 10px;
border-radius: 5px;
}
</style>
</body>
</html>
7.将一个元素放置在一个固定的位置
开发人员有时想把一些元素固定在一个固定的位置，使它们在浏览器的视口中保持在那个位置。
例如，开发者可能想在网站上添加一个返回顶部的按钮，而唯一合适的位置是在网站的右下方。
下面的代码片段说明了如何在网站的右下方添加一个粘性的返回顶部的按钮。
<html>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet illo
corporis saepe sunt quidem nesciunt asperiores impedit odit! Enim quam
voluptatum modi suscipit laboriosam porro fugiat odit molestiae error?
Dolores.
<br />
<a class="arrowup" href=""><i class="fa fa fa-arrow-up"></i></a>
</p>
</div>
<style>
div {
width: 410px;
height: 230px;
}
.arrowup {
position: fixed;
right: 20px;
bottom: 20px;
background-color: blue;
font-size: medium;
padding: 20px;
width: 20px;
height: 20px;
border-radius: 100px;
color: white;
text-align: center;
}
</style>
</body>
</html>
总结
在本教程中，我们已经涵盖了一些重要的hacks ，这是每个开发人员在设计一个干净的Web应用时需要知道的。
