一、在一行内声明CSS
Example
Source Code
[www.52css.com]
h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}
h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
第二种看起来的确格式化,但是不会在阅读上有任何帮助。写在一行内可以让你更快的找到需要的部分。
以前我也是写成类似第二种方式,但是逐渐发现就像文章说的一样,没多大用。一行看起来又爽快又省地方还能让文件更小。
二、分块书写代码
这样书写代码可以让CSS更页面化,在出现问题时候可以最短时间内找到问题所在。就像下面这样:
Example
Source Code
[www.52css.com]
#content {float:left;}
#content p { … }
#sidebar {float:left;}
#sidebar p { … }
#footer {clear:both;}
#sidebar p { … }
三、浏览器兼容问题
只支持最新的浏览器。也就是说要放弃IE5和IE5.5。这样一来就能省下很多时间。对于IE6来说不用使用盒模型Hack。如果只针对流行浏览器的话,只需要很少的Hack就能实现同样的效果。
我注意了一下网易新版主页的CSS,其中竟然一个!important或者Hack都没有,可是在FF和IE里面显示效果都很好。合理的使用CSS可以避免Hack。当然,调试的时间会多一些。
包含浮动元素所有在容器内的内容都应该被设计为和容器保持一致。如果过大的话就会滑动到错误位置。使用负值margin调整到容器外同样会导致滑动。
理解Overflow如果页面中有两个浮动元素,在左容器内输出过多内容的话就会导致右侧容器跑到下面。这也就是说你的margin、宽度或者padding设置混乱了,不过在FF里面体现不出来。使用overflow:hidden或者overflow:scroll可以避免IE允许内容冲出容器。
分享到:
相关推荐
通过学习和实践这些不同的CSS导航示例,初学者可以掌握导航设计的基本技巧,并逐步提升自己的网页设计能力。"cssmenu"文件名暗示了这个压缩包可能包含了多个不同的CSS导航菜单代码示例,可以下载后直接在项目中应用...
CSS 图论算法!!!!!
在深入探讨这25个高级CSS技巧之前,我们先来理解一下CSS本身及其在现代网页设计中的重要性。CSS,即层叠样式表(Cascading Style Sheets),是一种用来描述HTML或XML文档如何呈现的样式语言。随着互联网的发展,CSS...
### CSS排版技巧详解 #### 一、引言 随着网页设计标准的不断提升与浏览器兼容性的改善,越来越多的网站设计者开始放弃传统的表格布局方法,转而采用更加灵活且易于维护的CSS(层叠样式表)进行网页排版。本文将...
### CSS常见考题知识点解析 #### 一、DOCTYPE与CSS兼容性问题 ...以上内容涵盖了CSS面试中常见的几个考点,包括但不限于DOCTYPE声明、元素居中、盒模型处理、链接状态样式顺序等,希望对你有所帮助。
本文将详细介绍9种实用的CSS设计技巧,帮助提升网页的视觉效果和用户体验。 1. 取消下划线:在现代网页设计中,为了使链接看起来更简洁,常常会去除文本链接的下划线。这可以通过在CSS中设置`text-decoration`属性...
为了分吧自己的收藏拿出来了!来自印象笔记的资料本!全程干货!前端面试最全的CSS分类!看一下 终身受益!还有其他资源!
9. **CSS3的新特性介绍**:可能涵盖了CSS3的新功能,如阴影、渐变、过渡、动画、多列布局、伪元素和伪类、选择器增强等。 10. **CSS产生的特殊效果**:这部分可能涉及利用CSS实现的各种视觉效果,如旋转、倾斜、...
【标题】:“顶级CSS设计工具” 在Web开发领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它负责控制网页的布局和样式。为了提升CSS编写效率和代码质量,众多专业CSS设计工具应运而生。这些工具不仅帮助...
5. \0后缀:`\0`在IE8及更高版本、Safari 3.1+、Chrome 1+中识别,针对CSS3的兼容。 6. @media screen and (-webkit-min-device-pixel-ratio:0):这是一个WebKit专有的媒体查询,适用于Safari和Chrome。 7. `x:-moz-...
上述技巧不仅涵盖了基础的样式应用,还包括了对现代CSS技术的运用,如flexbox布局和CSS3的过滤器(filter)。这些技巧通常用于改善网站的设计感和用户体验,增强页面的可维护性,同时减少代码冗余。在实际开发中,...
此外,还将有机会接触到CSS的高级特性,如CSS3的新选择器、渐变、阴影、动画和过渡效果等。 "CSS快速提高"这部分,强调了通过实践来提升CSS技能的重要性。通过分析和修改这些示例代码,我们可以快速掌握CSS的基本...
以下是10个顶级的CSS3代码生成器的详细介绍: 1. **CSS3 Generator**:这是一个综合性的CSS3代码生成器,提供了不同类别如RGBa、transform、flexbox等的代码生成页面。每个生成器都有图标显示浏览器的支持情况,...
标题中的“20个初学者实用的CSS技巧”是指针对CSS初学者的一系列技术要点,旨在帮助他们快速掌握CSS的基本应用。这些技巧涵盖了从解决浏览器兼容性问题到优化代码效率,以及实现各种视觉效果的各个方面。 描述中...
css技巧描述文档
【CSS 设置技巧(单位和值与样式设置技巧)】 在CSS中,设置合适的单位和值是创建美观且响应式布局的关键。以下将详细介绍颜色值、长度单位以及样式设置技巧。 一、颜色值 1. 英文命令颜色:最基础的颜色设置方式,...
在CSS(层叠样式表)的设计和开发过程中,掌握一些常见的技巧和理解常见的问题解决方案是至关重要的。以下是一些关于CSS的重要知识点: 1. **CSS缩写**:使用CSS缩写能够有效地减少代码量,提高页面加载速度。例如...
【CSS技巧详解】 ...以上10个CSS技巧展示了CSS的灵活性和强大功能,掌握这些技巧可以显著提高CSS的编写效率和代码质量。在实际应用中,应结合具体需求灵活运用,确保在保持代码简洁的同时提供最佳的用户体验。
分享一款黑色大气HTML5和CSS3模板!美工非常不错 刚收集了两套设计非常不错的HTML5和CSS3模板,非常适合广告公司,设计公司,婚纱影楼,图片展示类等。 (模板包括可编辑的图像,PSD文件,HTML,JavaScript和CSS文件...
### div+css技巧详解 #### 一、div+css主流开发与前台页面布局设计 div+css是目前网页设计中最常用的布局方式之一,它能够帮助前端开发者构建出响应式、可维护性强且易于修改的网站界面。div作为HTML中的一个容器...