WEB程序员笔记

一个前端开发工程师的个人博客

面向初学者的10个必备CSS技巧和提示

每个人都应该了解CSS技巧,以提高生产力并快速完成他们的项目。在这里,我为正在学习编码的初学者收集了10个简单且必须知道的技巧。


重启

某些浏览器将不同的样式应用于每个元素,因此,最好一开始就搁置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;
}

/* Simple way to do this */

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

使用文字转换

而不是直接在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中覆盖特定样式,可以使用!importantafter样式。

h2{
    color: blue !important;
}

悬停效果

这用于按钮,链接和图标。当有人在链接上徘徊时,它将改变颜色。我们将使用:hover。

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

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

我认为这是初学者必须知道的一些基本CSS技巧。对于高级用户也来了。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注