专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

Web前端CSS书写的先后顺序

ins518 2024-11-18 13:18:53 技术文章 14 ℃ 0 评论

CSS有非常多的属性,每个属性又有很多很多的值,好的书写顺序给人眼前一亮的感觉,同时也方便了日后的维护,那么什么样的顺序才合适呢?其实不需要死记硬背,我们可以把CSS书写的先后顺序比作为一个人的自我简历,当我们做介绍时基本顺序是:家庭地址,姓名、身高、体重,家庭情况,学历、工作简历,特长爱好等,那么CSS书写顺序也跟这个类似,如下:

1、布局位置属性:display position float clear visibility top right overflow z-index 等;

2、自身属性:width height margin padding 等;

3、 背景边框:border background 等;

4、文本属性: font color text-decoration text-align vertical-align white- space break-word 等;

5、其他属性:content cursor border-radius box-shadow text-shadow animation transition等。

是不是跟个人简历顺序基本相同?当写CSS时联想一下自己简历顺序就出来了!

下面两段CSS截取国内知名网站,基本都是按照上面顺序书写!

.site-header .logo {

position: relative;

display: block;

width: 55px;

height: 55px;

overflow: hidden;

background-color: #ff6700;

*background: url(/i/logo.png) no-repeat 50% 50%;

}

.site-header .nav-list {

position: relative;

z-index: 10;

float: left;

width: 1100px;

height: 88px;

margin: 0;

padding: 12px 0 0 30px;

list-style-type: none;

font-size: 16px;

}

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表