精简CSS代码,提高代码的可读性和加载速度

站长手记 作者: 2024-08-28 13:05:02
定义简洁的CSS规则:CSS的每条规则中都包含了规则的属性及属性值。定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值。

前言

定义简洁的CSS规则

1. 合并相关CSS规则

p.reader-title {
font-family: Georgia, serif;
    font-size: 12px;
    font-style: italic;
    font-weight: bold;
    line-height: 30px;
}    
p.reader-title {
    font:italic bold 12px/30px Georgia, serif;
}

2. 定义简洁的属性值

p.reader-title {
    color: #FFFFFF;
    font-size: 0.8em;
    padding: 0em;
}
p.reader-title {
    color: #F3E;
    font-size: .8em;
    padding: 0;
}


合并相同的定义

.library-title {
    text-align: center;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFF;
    font-size: 1.2em;
    line-height: 2em;
}
.search-title {
    text-align: center;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFF;
    font-size: 1.4em;
    line-height: 2.5em;
}
.library-title,.search-title {
    text-align: center;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFF;
}
.library-title {
    font-size: 1.2em;
    line-height: 2em;
}
.search-title {
    font-size: 1.4em;
    line-height: 2.5em;
}


删除无效的定义

.invalid-css {
    padding-top:-20px;/* 无效的属性值 */
    border: 1px soild #DDD;/* 拼写错误 */
}
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_70135.html
CSS代码 CSS规则