一些CSS属性允许使用一串值代替许多属性,值使用空格分开。
margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序。
所以下面的代码:
p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;}
可以写成:
p {
border-width: 1px 5px 10px 20px;}
border-width,border-color,border-style同样可以合并到一起,例如:
p {
border: 1px red solid;}
(同样可以运用到border-top,border-right等等)
如果只使用两个值(比如margin: 1em 10em;),第一个值包括顶部和底部,第二个值包括左右。
字体属性同样可以使用font属性合并。
p {
font: italic bold 1em/1.5 courier;}
(上面"/1.5"是line-height的值)
把它们总结在一起,试下下面的代码:
p {
font: 1em/1.5 "Times New Roman", times, serif;
padding: 3em 1em;
border: 1px black solid;
border-width: 1px 5px 5px 1px;
border-color: red green blue yellow;
margin: 1em 5em;}
建议大家使用缩写形式,促进CSS代码的精简、优化!
分享到:
相关推荐
1. **代码精简**:采用DIV+CSS布局方式,能够大大减少HTML代码量,提高页面加载速度,节省带宽资源。 2. **搜索引擎友好**:结构化的HTML代码更有利于搜索引擎抓取内容,从而提高网站排名。 3. **易于维护**:只需...
CSS缩写的意义已经不是一次进行阐述了,归纳起来有两点:一是面对编码者是精简而便于修改,二是对于访问者会下载体积更小的文件。其益处不言而喻,在Webjx.Com收藏CSS经典技巧之三的最后一条,也特别强调了CSS缩写...
手册以最新的CSS标准为基础,包含了大量的实例和注释,使读者能够快速理解和运用各种CSS属性。 一、CSS基础 CSS是Cascading Style Sheets的缩写,用于分离HTML或XML(包括如SVG、MathML等各种XML方言)文档的内容...
- **SMACSS(Scalable and Modular Architecture for CSS)**:一种模块化的CSS架构,强调根据用途划分CSS为五种类型:Base、Layout、Module、State和Theme。 #### 3. 实践案例解析 给定文件中提到了一些具体的...
HTML是HyperText Markup Language的缩写,是一种用于创建网页的标准标记语言。在互联网应用中,登录和注册页面是用户交互的重要部分,它们为用户提供身份验证和账户管理的入口。在这个"html注册登录页面精简版.zip...
6. **CSS模块化和重用**:为了提高代码组织和复用性,开发者可以使用CSS模块系统,如CSS Modules或者CSS-in-JS。"venerarecipes"可能提供了如何实现CSS模块化的实践方法。 7. **响应式设计**:随着移动设备的普及,...
6. 示例项目或代码片段:可能包含作者完成的项目实例或代码段,以体现其编程能力。 7. Icon或favicon文件:用于浏览器标签和书签的图标。 8. 数据库文件:如果投资组合涉及到动态数据,可能有SQLite或JSON等数据存储...
为了在移动网络环境下提供快速加载,源码可能进行了图片压缩、代码精简、延迟加载等优化。 8. **可扩展性**: 良好的源码模板应该具有良好的可扩展性,方便添加新的功能或页面,适应未来的需求变化。 通过解压并...
【失去树冠:MUSA实践】是一篇关于网络开发中前端技术的应用实例,主要涉及到HTML这一基础网页构建语言。在互联网领域,"树冠损失"可能是指网站结构或页面元素的优化问题,它可能影响到用户的浏览体验以及搜索引擎的...
在标签中提到了"HTML",这是HyperText Markup Language的缩写,是用于创建网页的标准标记语言。HTML允许开发者构建结构化的文档,通过标签来定义不同的内容元素,如标题、段落、图片和链接等。了解HTML是任何网页...
这个"angular-flow-homework"项目是一个基础的Angular种子项目,它包含了构建应用程序所需的基本结构,且依赖项被精简到了最低程度,非常适合初学者学习和实践。 1. **安装与启动** 在开始之前,确保已经安装了...
目录 1 文中的缩写 24 1.1 寄存器描述表中使用的缩写列表 24 1.2 术语表 24 1.3 可用的外设 24 2 存储器和总线构架 25 2.1 系统构架 25 2.2 存储器组织 27 2.3 存储器映像 28 2.3.1 嵌入式SRAM 29 2.3.2 位...