新手需要掌握的10个CSS技巧

新手需要掌握的10个CSS技巧

CSS技巧是每个人都应该知道的提高生产力和快速完成他们的项目。

这里俺为初学者收集了10个简单而必须知道的技巧。

Reset.css

有些浏览器对每个元素应用不同的样式,因此最好在一开始就rest您的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;
}

使用text-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;
}

元素的width和overflow是必需的。

覆盖所有样式

对于重写CSS中的特定样式,可以在样式后面使用!important。

h2{
    color: blue !important;
}

悬浮效果

这是用于按钮,链接和icon。当有人悬停在链接上时,它会改变颜色。我们将使用:hover。

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

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

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

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/5232.html

发表评论

登录后才能评论