新手必须掌握的 10 个 CSS 技能

每个人都应该知道的 CSS 技巧，以提高生产力并快速完成项目。

这里我为初学者收集了10个简单且必须知道的秘诀。

重置.css

某些浏览器对每个元素应用不同的样式，因此最好首先休息一下 CSS。

body, div, h1,h2, h3, h4, h5, h6, p,ul {
    margin: 0;
    padding: 0;
}

一行财产申报书

既然你想要一个元素有边框，你可以这样写缩写：

.with-border{ 
    border-width: 1px;
    border-style: solid;
    border-color: red;
}

/* 可以这样简写 */

.width-border{
    border: 1px solid red;
}

使用文字-transform

并非所有大写或小写字母都直接在 HTML 中使用：

<h1 class="title">THIS IS TITLE</h1>

可以改为使用Text-transform格式来写：

.title{
    text-transforom: uppercase;
}

垂直中心

假设您的 HTML 如下所示：

<div class="vcentered">
<div>&check;</div> </div>

您希望复选框垂直居中，只需执行以下操作：

.vcentered{
    display: flex;
    align-items: center;
}

链接样式顺序

如果样式链接指出，您必须记住顺序规则：

a:link 
a:visited
a:hover
a:active

条件注释

针对 IE 的理想方法是使用条件注释：

<!--[ifIE]>... <![endif] -->

仅当浏览器是 Internet Explorer 时才会加载此页面。

首字母放大效果

使用CSS伪元素：first letter就可以轻松实现这种效果。

.content:first-letter {
    font-size: 3rem;
}

用省略号截断文本

用法：

:.content {
    width: 400px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

元素的宽度和丰度是必需的。

涵盖所有款式

要覆盖 CSS 中的特定样式，您可以在样式后使用 !important。

悬浮效果

用于按钮、链接和图标。当有人将鼠标悬停在链接上时，颜色会发生变化。我们使用：悬停。

.first h4{
    font-size:36px;
    color:#000;
    font-weight:800;
}

.first h4:hover{
    color:#f00;
}

以上是我为初学者整理的CSS基本技巧。