1,简写CSS---简洁可读,减少CSS文件尺寸
在设置边框\边距等样式时,可使用以下代码:
border:1px solid gray; /*四边各1px边框*/
margin:1px; /*四边各1px边距*/
margin:1px 2px; /*上下边1px,左右边2px*/
margin:2px 1px 2px 5px; /*上2px,右1px,下2px,左5px*/
/*
注意:
a.上、右、下、左的书写顺序
b.数值与单位不能有空格,每个值之间用空格隔开
*/
2,明确定义单位,除非值为0;不要在数值和单位之间加空格
3,样式名称一律使用小写,因为在XHTML中,css定义的元素名称是区分大小写的
4,使用子选择器减少id和class的定义,如 #menu li{},#menu li a span {}
5,添加背景图片时使用绝对路径,因为CSS文件中是相对当前路径的.
6,使用组选择器,如.class1,.class2,.class3{color:black},同时定义多个样式的公用属性
7,重定义<h1><h2><h3>代替一些标题样式,有利于SEO;如:
h1 {font-size:14px;color:gray;}
<h1>新闻中心</h1>
如果是图片:
h1 {background: url(news.gif) no-repeat;}
h1 span{position: absolute;left:-2000px;}
<h1><span>新闻中心</span></h1>
这样做比图片alt属性更有利于搜索引擎!
8,解决IE6无法定义1px高度的容器,例如:{overflow:hidden | zoom:0.08 | line-height:1px}
9,FF下文本自动撑开容器的高度:
{
height:auto !important;
height:100px;
min-height:100px;
}
10,层水平居中:{margin: 0 auto; width: 800px; }
11,文本垂直居中{height:25px; line-height:25px;}
12,正确定义超链接样式CSS属性的排列顺序:Link,Visited,Hover,A
13,文字自动换行{width:300px;word-wrap:break-word;}
另外,IE6中使用高度较小的空容器时,显示会有问题,如:
<div style="height:5px;float:left"></div>实际显示高度会大于5px
加上overflow:hidden就好了,如
<div style="height:5px;float:left;overflow:hidden"></div>
分享到:
相关推荐
#### 三、“表格已死”:CSS成为王道 ##### 3.1 CSS的兴起 自从Web Standards Project提出浏览器升级计划后,许多设计师开始采用更符合标准的设计方法——使用CSS来设计版面,代替传统使用的表格。这一转变主要...
本文将详细介绍9种实用的CSS设计技巧,帮助提升网页的视觉效果和用户体验。 1. 取消下划线:在现代网页设计中,为了使链接看起来更简洁,常常会去除文本链接的下划线。这可以通过在CSS中设置`text-decoration`属性...
在深入探讨这25个高级CSS技巧之前,我们先来理解一下CSS本身及其在现代网页设计中的重要性。CSS,即层叠样式表(Cascading Style Sheets),是一种用来描述HTML或XML文档如何呈现的样式语言。随着互联网的发展,CSS...
以下是一些实用的CSS使用技巧,旨在帮助开发者提升工作效率,优化网页设计,以及创建更具吸引力的用户体验。 1. **选择器优先级**:理解ID、类和元素选择器的权重至关重要,ID选择器权重最高(100),类选择器(10...
本压缩包包含了关于CSS的丰富学习资源,包括“CSS2中文手册”、“CSS 速成手册”、“css技巧”和“css课件”。 首先,我们来看“CSS2中文手册”。这是一份详细阐述CSS2规范的文档,CSS2是CSS的第二个主要版本,发布...
以下是一些CSS的经典技巧,旨在帮助你优化代码,提高工作效率,同时保持网页代码的简洁和易读性。 1. **选择器优化**:优先使用ID选择器 (#id),其次为类选择器 (.class)。避免过多使用标签选择器 (element),因为...
第10章则讲解了如何用CSS美化表格,如制作多模式日历。第11章深入讨论了创建圆角框的多种方法,分析了各种方法的优缺点和适用场景。第12章介绍了近年来新兴的网页元素的CSS实现,如Tab面板、折叠面板和伸缩面板等。 ...
css-protips, 帮助你掌握CSS技巧的技巧集合 CSS Protips 帮助你掌握CSS技巧的技巧集合。对于其他优秀列表,请查看 @sindresorhus curated curated列表awesome列表。 table-内容Protips支持插件翻译工具
4. **CSS应用小技巧十四例**:这可能是一系列实际场景中的CSS技巧,例如隐藏元素、背景图片定位、文本溢出处理、自适应边距和间距等。 5. **CSS代码缩写实例以及CSS缩写原因总结**:介绍了CSS属性值的缩写形式,如`...
以下是一些CSS技巧: 1. **选择器优先级**:理解ID选择器、类选择器、元素选择器的权重,以及如何使用!important来强制应用样式。 2. **CSS预处理器**:如Sass、Less等,它们引入变量、嵌套规则、混合等功能,使...
css技巧描述文档
【CSS Hack技巧大全】 在网页开发中,CSS(层叠样式表)的兼容性问题一直是一个挑战,尤其是在处理不同浏览器间的表现差异时。CSS Hack是一种技术,用来解决这些差异,确保样式在各种浏览器中都能正确呈现。本文将...
本压缩包“css技巧.rar”包含了关于CSS的技巧和资源,旨在帮助网页设计师和开发者提升他们的技能水平。 《css技巧.doc》可能是详细介绍了各种CSS技巧的文档,它可能涵盖了以下内容: 1. **选择器的高效利用**:...
在网页设计中,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、...这些CSS技巧有助于优化网页布局,提升用户体验,同时降低维护成本。熟练掌握并运用这些技巧,可以让你的网站看起来更加专业和精致。
css高级应用与技巧css高级应用与技巧css高级应用与技巧
css颜色安全css配色技巧网站颜色搭配
在CSS(层叠样式表)的设计和开发过程中,掌握一些常见的...了解并熟练运用这些CSS技巧和问题解决策略,可以提升前端开发的效率,创建出更加美观、响应迅速的网页。不断学习和实践,是成为一名优秀前端开发者的关键。
css资料 # 课程目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种选择器 > 4. 熟练掌握CSS各种选择器 > 5. 熟练掌握CSS三种显示模式 > 6....熟练掌握CSS高级技巧强化CSS
标题中的“CSS技巧与工具(EditPlus语法文件下载)”暗示了我们即将探讨的是关于CSS(Cascading Style Sheets)的一些高级技巧以及EditPlus编辑器中相关的语法文件。EditPlus是一款功能强大的文本编辑器,尤其适用于...
【CSS 设置技巧(单位和值与样式设置技巧)】 在CSS中,设置合适的单位和值是创建美观且响应式布局的关键。以下将详细介绍颜色值、长度单位以及样式设置技巧。 一、颜色值 1. 英文命令颜色:最基础的颜色设置方式,...