一、在一行内声明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导航菜单代码示例,可以下载后直接在项目中应用...
原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖...
CSS 图论算法!!!!!
在深入探讨这25个高级CSS技巧之前,我们先来理解一下CSS本身及其在现代网页设计中的重要性。CSS,即层叠样式表(Cascading Style Sheets),是一种用来描述HTML或XML文档如何呈现的样式语言。随着互联网的发展,CSS...
本文将详细介绍9种实用的CSS设计技巧,帮助提升网页的视觉效果和用户体验。 1. 取消下划线:在现代网页设计中,为了使链接看起来更简洁,常常会去除文本链接的下划线。这可以通过在CSS中设置`text-decoration`属性...
为了分吧自己的收藏拿出来了!来自印象笔记的资料本!全程干货!前端面试最全的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等的代码生成页面。每个生成器都有图标显示浏览器的支持情况,...
第3章深入讲解了CSS的核心机制——盒子模型,这是理解布局的关键。第4章和第5章分别讨论了浮动和定位,这两点是布局中的难点和重点,以及文字和图像的排版技巧。 第6章至第9章涉及链接和导航的设置,以及不同类型的...
标题中的“20个初学者实用的CSS技巧”是指针对CSS初学者的一系列技术要点,旨在帮助他们快速掌握CSS的基本应用。这些技巧涵盖了从解决浏览器兼容性问题到优化代码效率,以及实现各种视觉效果的各个方面。 描述中...
【CSS 设置技巧(单位和值与样式设置技巧)】 在CSS中,设置合适的单位和值是创建美观且响应式布局的关键。以下将详细介绍颜色值、长度单位以及样式设置技巧。 一、颜色值 1. 英文命令颜色:最基础的颜色设置方式,...
在现代网页设计中,CSS3(层叠样式表第三版)已经成为了不可或缺的一部分,它带来了丰富的样式、动画和布局功能,极大地提升了用户体验。本篇文章将详细介绍10个免费且强大的CSS3工具,这些工具能够帮助开发者更高效...
【CSS技巧详解】 ...以上10个CSS技巧展示了CSS的灵活性和强大功能,掌握这些技巧可以显著提高CSS的编写效率和代码质量。在实际应用中,应结合具体需求灵活运用,确保在保持代码简洁的同时提供最佳的用户体验。
分享一款黑色大气HTML5和CSS3模板!美工非常不错 刚收集了两套设计非常不错的HTML5和CSS3模板,非常适合广告公司,设计公司,婚纱影楼,图片展示类等。 (模板包括可编辑的图像,PSD文件,HTML,JavaScript和CSS文件...
### div+css技巧详解 #### 一、div+css主流开发与前台页面布局设计 div+css是目前网页设计中最常用的布局方式之一,它能够帮助前端开发者构建出响应式、可维护性强且易于修改的网站界面。div作为HTML中的一个容器...
css重置是很重要的东西. reset.css 目前最好的css重置版本!
精通CSS!!!!!!!!!!!!!!!!
css高级应用与技巧css高级应用与技巧css高级应用与技巧