Code前端首页关于Code前端联系我们

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

terry 8个月前 (09-07) 阅读数 235 #CSS
文章标签 CSS3CSS百科
新手需要掌握的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基本技巧。

版权声明

本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。

上一篇:css动画无限循环 下一篇:CSS 显示属性

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门