尽量少使用类,因为可以层叠识别,如: .News h3而不必在h3上加类 
<div class=”News”> 
<h3></h3> 
<h2></h2> 
<p></p> 
</div> 
3. 没有现有元素区分的情况下再用div 
<div id=”mainNav”> 
<ul> 
<li>Home</li> 
<li>About Us</li> 
</ul> 
</div> 
可以改为 
<ul id=”mainNav”> 
<li>Home</li> 
<li>About Us</li> 
</ul>

4.选择器 
p a h1 类型选择器 
Li a {text-decoration:none} 后代选择器 
*{ padding:0;} 通用选择器，页面所有元素。 
5. 定位 
相对定位是相对他本来应该出现的位置 
绝对定位是相对与最近的已定位的祖先元素（实验发现，祖先元素需要设置相对定位） 
浮动的框可以左右移动，直到它的边缘碰到包含框或另一个包含框的边缘，因为浮动框不在文档的普通流中，所以文档的普通流中的方块表现得就像浮动框不存在一样。 
总结：如果让一个div是浮动的，下一个div会当第一个不存在。知道碰到浮动的或包含框。 
Clear: right 浮动框的右边可用 
Clear: left 浮动框的左边可用 
Clear: both 浮动框两边都不可用 
应用值为hidden或auto的overflow属性会自动地清理包含的任何浮动元素。 
6. 渐变背景 
创建一个很高但是很窄的渐变图像，水平平铺 
Body 
{ 
Background: #ccc url (gradient.gif) repeat-x; 
}

但是很难预料图像页面又多高，所以可以结合背景颜色，当图像结束时，颜色就出来了，如果两者色差很近，就看不出转换了。 
例：在每个标题上添加一个图标 
H1 
{ 
Padding-left:30px; 
Background: url(/images/bullet.gif) no-repeat left center; 
} 
7. 突出显示不同类型的链接 
如：链接到外部站点，邮件，下载等 
.external 
{ 
Background: url (/images/externalLink.gif) no-repeat right top; 
Padding-right:10px; 
} 
8. 表格特有的元素 
1） Summary 和Caption 
Summary属性可以应用于表格的标签，描述表格的内容 
Caption 表格的标题 
2）thead tbody tfoot 
I.e 可以将所有列标题放到thead元素中，如果选择使用thead或tfoot元素，那么必须至少使用一个tbody元素，一个表格只能使用一个thead和tfoot，但可以使用多个tbody. 
9.表格的边框模型 
1）单独模型：各个单元格周围都有边框 
2) 叠加模型： 单元格共享边框 
10. 表单布局 
Fieldset 关闭边框，低版本不支持，但可以使用 
Filedset 
{ 
Border: solid 0 transparent; 
} 
11. 表单标签label 
隐式方式： <label>email <input name=”email” type=”text”/></label> 
显示方式： 
<label for=”email”>email</label> 
<input name=”email” id=”email” type=”text”/> 
是否在表单中使用段落是有争议的。 
12. 让设计剧中 
方法一: 
<body> 
<div id=”wrapper”></div> 
<body> 
#wrapper 
{ 
Width:720px; 
Margin:0 auto; 
} 
但是这种方式IE6及一下不正常 
方法二(需要根据两个个元素联合)：使用自动空白 
Body 
{ 
Text-align:center; 
Min-width: 760; 
} 
#wrapper 
{ 
Width:720px; 
Margin: 0 auto; 
Text-align: left; 
} 
方法三： 使用定位和负值空白变 
#wrapper 
{ 
Width:720px; 
Position: relative; 
Left: 50%; 
Margin-left: -360; 
} 
13: 流体布局： 尺寸全部用百分数而不是像素设置 
优点： 随着浏览器大小宽度变化。 
缺点： 变小时，行变窄。 
解决： 设置以像素和em为单位的min-width 
14: 弹性布局： 字号变化时，行变化(单位以em) 
弹性布局相对于字号来设置元素的宽度。 
1em=10px; 
大多浏览器默认字号是16px,10相当于16像素的62.5%. 
Body 
{ 
Font-size:62.5%; 
} 
#wrapper 
{ 
Width:72em; 
Margin:0 auto; 
Text-align: left; 
} 
#mainNav 
{ 
Width:18em; 
Float:right; 
} 
15. 弹性流体布局：以em设置宽度，用百分数设置最大宽度。 
#wrapper 
{ 
Width:72em; 
Max-width: 100%; 
Margin:0 auto; 
Text-align: left; 
} 
16: 流体和弹性图像 
图像变形问题： 尽量放在背景里 
17． 星号HTML招数 
* html a:hover 
{ 
Body-style: solid 
} 
只有IE6或之下有用 
18： !import和下划线招数 
#nav 
{ 
Position: fixed !important; 
Position : static; 
} 
或者 
#nav 
{ 
Position: fixed; 
_Position : static; 
} 
19, 几栏时 
<div id=”main”> 
<div id=”Nav”></div> 
<div id=”Content”></div> 
</div> 
Nav需要区分颜色且显示高100%,可以做一图片，宽度等于Nav, main上设背景图像，在垂直方向平铺。

CSS使用学习总结的更多相关文章

  1. CSS入门级学习

    css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小 ...

  2. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  3. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  4. CSS 3 学习笔记

    css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal:    控制连续文本换行.break-word:    内容将在边界内换行.如果需要,词 ...

  5. （2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5

    1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...

  6. （6）《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记

    1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...

  7. 前端学习：CSS的学习总结(图解）

    前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位

  8. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  9. 关于Html+css阶段学习总结

    一.学习经历 进入大学不久,就加入了社团,从而对前端有了一个初步的了解,之后也做过一些学校的官网,积累了一些微小的经验. 到了大二的时候,学校开设了专门的html+css课程,从中也学到许多新的htm ...

  10. CSS项目学习总结

    1.我过去在HTML和CSS阶段是如何学习的? 我一开始学HTML和CSS,更多的是通过看视频.书籍,一个知识点一个知识点地去学习,很少把他们串联起来,看代码多于敲代码. 然而,通过现在这几个项目的实 ...

随机推荐

  1. 黑马day16 jquery案例演示

    案例一: <html> <head> <meta http-equiv="Content-Type" content="text/html; ...

  2. cocos2d-x 3.0点击响应

    迄今为止,发现cocos2d-x 3.0最让人惊艳的地方就是更改了点击事件机制.(ps:迄今只看了点击事件这块,捂嘴笑~~~) cocos2d-x 2.0 只有CCLayer有点击事件处理,需要注册, ...

  3. JAVA中的protected（详解），以及和clone（）方法有关的一些问题

    http://blog.csdn.net/ciawow/article/details/8262609 ************************************************ ...

  4. JavaEE各种Javadoc的下载

    刚才突然发现,很多servlet的api都不熟悉,但是又没有给eclipse导入api,就google了一下 关键字,servlet api / doc 或者java ee api / doc 注意版 ...

  5. Linux Shell sort排序常用命令（转载）

    转载自:http://blog.csdn.net/monkeyduck/article/details/10097829 1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则 ...

  6. Android开发日记（四）

    在服务器端数据库新建一个表ad 在DataInfo.edxm模型中点击从数据库更新模型,发布. 就新建了一个实体ad 然后新建cs文件 using System; using System.Colle ...

  7. DMA2D 图形加速器简介

    在实际使用 LTDC 控制器控制液晶屏时,使 LTDC 正常工作后,往配置好的显存地址写入要显示的像素数据, LTDC 就会把这些数据从显存搬运到液晶面板进行显示,而显示数据的容量非常大,所以我们希望 ...

  8. 基于jQuery悬停弹出遮罩显示按钮代码

    今天给大家分享一款基于jQuery悬停弹出遮罩显示按钮代码.这是是一款当鼠标悬停在图片上后,会出现一系列的按钮,文字等弹性动画效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  9. vm虚拟化问题积累

    EXSi是什么?答:是一个独立的系统,承载了虚拟机管理台,虚拟机存储设备等核心要件的一个系统,需要靠客户机通过vsphere连接后进行管理. 问题集:一.建立桌面池找不到模板机问题: 目前因为此问题已 ...

  10. Lua语言开发Cocos2d-x游戏视频教程第L0401课-Cocos2d-x中使用Lua

    http://www.eoeandroid.com/thread-320733-1-1.html