让CSS可以更加简洁去掉多余代码

&">nbsp;   CSS就是Cascading Style Sheets,中文翻译为“层叠样式表”,简称样式表,它是一种制作网页的新技术。

网页设计最初是用HTML标记来定义页面文档及格式,例如标题<h1>、段落<p>、表格<table>、链接<a>等,但这些标记不能满足更多的文档样式需求,为了解决这个问题,在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后,又在1998年5月发布了CSS2版本,样式表得到了更多的充实。W3C把DHTML(Dynamic HTML)分为三个部分来实现:脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。

注意:CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持,有些效果需要更高版本的浏览器支持。

  本篇文章适合css新手学习,对于已经掌握了css的朋友们也可以通过本片文章来复习知识。

  作者通过实践,认为在有些情况下css的代码是可以更加简洁的,多数情况下是因为新手对于一些具有多属性的元素代码不能精简来写造成的。

  精简的代码对于网页是有莫大的好处的,对于浏览者访问速度会有一定的提升,另外对于搜索引擎也更加可以抓取网页关键内容。废话不说了,下面就看看笔者总结的可以精简的代码:

  1.Margin & Padding

  例1:

  .div {

  margin-top:10px;

  margin-right: 5px;

  margin-bottom:30px;

  margin-left:0px;

  }

  精简后代码如下:

  .div { margin:10px 5px 30px 0;})

  例2:

  .div {

  margin-top:10ox;

  margin-right:20px;

  margin-bottom:0;

  margin-left:20px;

  }

  精简后代码:

  .div {

  margin:10px 20px 0;

  }

  例3:

  .div {

  margin-top:0;

  margin-right:auto;

  margin-bottom:0;

  margin-left:auto;

  }

  精简后代码:

  .div {

  margin:0 auto;

  }

  例4:

  .div {

  margin-top:50px;

  margin-right:50px;

  margin-bottom:50px;

  margin-left:50px;

  }

  精简后代码:

  .div { margin:50px; }

  2.border的缩写

  例1:

  .div {

  border-width:5px;

  (thin,thick,medium,set vaule)(default=medium)

  border-style:dotted;

  (solid,dashed,dotted,double,etc)(default=none)

  border-color:blue;

  (named,hex,rgb or 0-255)(default=value of elements/elements parent color property)

时间: 2024-10-23 05:35:41

让CSS可以更加简洁去掉多余代码的相关文章

通过Java正则表达式去掉SQL代码中回车换行和多余空格_正则表达式

复制代码 代码如下: public static void main(String[] args) { String sql = "SELECT * FROM \n" + " `testdb`.`foo` LIMIT 0, 100"; String s = "SELECT * FROM `testdb`.`foo` LIMIT 0, 100"; String sql2 = Pattern.compile(" {2,}").ma

通过Java正则表达式去掉SQL代码中回车换行和多余空格

复制代码 代码如下: public static void main(String[] args) { String sql = "SELECT * FROM \n" + " `testdb`.`foo` LIMIT 0, 100"; String s = "SELECT * FROM `testdb`.`foo` LIMIT 0, 100"; String sql2 = Pattern.compile(" {2,}").ma

《R语言数据分析》——第3章 数据筛选和汇总 3.1 去掉多余的数据

本节书摘来自华章出版社<R语言数据分析>一书中的第3章,第3.1节,作者盖尔盖伊·道罗齐(Gergely Daróczi),潘怡 译,更多章节内容可以访问"华章计算机"公众号查看. 第3章 数据筛选和汇总 当我们从平面文件或数据库(第1章),或直接通过某些API从Web(第2章)完成数据导入后,在开始实际的数据分析操作之前,经常会有必要对原始数据展开聚集.转换及筛选操作. 本章,我们将关注以下内容: 对数据框对象进行行或列筛选 对数据进行汇总和聚集 除了基础的R方法,掌握通

在C#中用最简洁有效的代码执行存储过程并返回数据

存储过程|数据|执行 存储过程 p_sys_Login 定义如下: CREATE PROCEDURE p_sys_Login @argUserID varchar(20), --用户名 @argPassword varchar(20), --密码 @argResult varchar(50) OUTPUT --登录结果 AS /* ... ... */ 下面演示如何在C#中用最简洁有效的代码执行该存储过程并返回数据: /// <summary> /// 用户登录验证 /// </summ

纯CSS实现多级半透明效果菜单代码

 本文实例讲述了纯CSS实现多级半透明效果菜单代码.分享给大家供大家参考.具体如下: 这是一款基于CSS实现的多级半透明菜单,最多可支持5级的CSS菜单,菜单样式可自己调整,默认先是这种,兼容多种浏览器. 运行效果截图如下:   具体代码如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dt

用css实现十字的布局示例代码

用css实现十字的布局示例代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

php实现的css文件背景图片下载器代码_php技巧

本文实例讲述了php实现的css文件背景图片下载器代码.分享给大家供大家参考.具体实现方法如下: 下载css文件里面的背景图片是我们这些盗版份子长期搞的事情,下载个css图片下载器常出现各种广告弹窗,实在扛不住.这里就提供了一个php版的css文件背景图片下载器给大家. 把文件放到php程序目录 dos下面 php.exe cssImages.php 0 http://www.xxxx.com/css/style.css \images\ 先在php程序目录建个images文件夹,呵呵,贴代码:

js+css实现上下翻页相册代码分享_javascript技巧

 这是一款基于js+css实现上下翻页相册特效代码,相册可以从上下两个方向进行切换,是一款非常实用的幻灯片特效源码.  先为大家展示效果图: 效果演示 源码下载 为大家分享的jQuery幻灯片带缩略图轮播代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>js+css实现上下翻页相册</title>

jQuery+css实现的切换图片功能代码_jquery

本文实例讲述了jQuery+css实现的切换图片功能代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <script type="text/javascript" src="jquery.js"></script> <style type="t