每个人都应该了解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>✓</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
after样式。
h2{
color: blue !important;
}
悬停效果
这用于按钮,链接和图标。当有人在链接上徘徊时,它将改变颜色。我们将使用:hover。
.first h4{
font-size:36px;
color:#000;
font-weight:800;
}
.first h4:hover{
color:#f00;
}
我认为这是初学者必须知道的一些基本CSS技巧。对于高级用户也来了。