CSS使用学习总结

尽量少使用类,因为可以层叠识别,如: .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上设背景图像，在垂直方向平铺。

赞 (0)

相关推荐

  • css进阶学习 选择符

    在我最早开始写css的时候,其代码上的高自由度就一直很令我困惑.这就是说,同一个设计,如果让不同的人来实现,最终的代码一定是有差异的.但这存在一个问题,如果不同的人通过不同的方法以及代码风格,都从外观上实现了一样的设计,将很难评价谁做得更好.想来也是,既然都实现了设计,达到了目的,css这种没有程序逻辑的代码中,又能找出什么来说明谁做得更出色呢? 而如今,我认同的观念是,css这种描述性语言,仍然有着代码上的质量评判.评判标准就是可维护性(Maintainability)和性能(Performa

  • JavaScript CSS修改学习第三章 修改样式表

    请注意代码和传统的DHTML的区别.在DHTML你通过直接修改页面上的特定元素来改变样式,而这里的代码修改的是样式表.在这里查看W3C DOM-CSS的兼容性列表.定义 一个页面总是包含一个或者几个样式表,一个样式表里面包含一条或者几条规则,一条规则里有详细的样式声明.这个页面的样式表如下: 复制代码 代码如下: <link rel="stylesheet" href="../quirksmode.css"> <style> <!--

  • javascript 进阶篇2 CSS XML学习

    javascript 进阶篇2 CSS XML学习

    CSS全称是cascading style sheets,中文名字叫级联样式单,也叫层叠样式表.它的好处就是能让代码整齐,并且可以批量处理一些样式. 基本语法: 注释符:/* */ 选择符:selector {attribute:value} 同一个属性的值用空格符号隔开,不同属性用分号隔开. 区分大小写. 比如要给页面中的table定制样式,则写table {.....;.....;} 选择符的使用方法有很多种,于是我又一次懒得打,从网上抄来的: 选择符模式 说明 * 匹配任意元素.(通用选择

  • CSS基础学习

    一．样式表基础 1． 样式表中每一个条目由选择符(selector)和对应的规则组成,选择符通常是HTML元素名称,也可以是类(class).标识符(id).伪类(pseudo class,它们标示了超链接的不同状态)等. 2． 将样式表(规则)添加到HTML文档中有3种方式: ① 外部样式表. ② 应用于整个文档的样式,位于<head>区,包括嵌入样式表和输入样式表. ③ 行内样式,通过绝大多数元素的style属性实现. 3． 样式表内的注释用/* -*/.通过将样式规则包围在HTML注释&

  • JavaScript CSS修改学习第二章 样式

    另外,有时候你也许想知道添加到一个元素或者链接上的样式的具体内容.而style属性只能读取元素的内联形式的样式,所以如果你想读取其他样式就得另想办法了. 偏移 在使用一些小技巧之前,IE和Mozilla已经添加了一个比较好的办法:offsetSomething.使用这些属性你就能够读取这个段落现在的一些比较重要的样式. 举个例子,使用offsetWidth.你就能知道这个段落现在的宽度的像素值.为了测试,你可以改变一下窗口的大小然后再运行一下. 代码也非常的简单: 复制代码 代码如下: func

  • JavaScript CSS修改学习第五章 给“上传”添加样式

    JavaScript CSS修改学习第五章 给“上传”添加样式

    问题 在一个网站中可能我的输入框式下面这样的:  设计者可能想让上传部分也像这样然后再添加一个select按钮.但是当我想把普通的输入框改为上传框时就根本不能工作.浏览器之间有很大的不同,给默认按钮添加样式也几乎不可能. 这很难成为设计的很好的上传框,但是也是我们能做的最多的了. 注意到Safari的设计有些不同.Safari小组想关闭手动输入文件的功能,可能担心这样的溢出.这样设计有个缺点就是用户在选择了一个文件之后不能取消上传文件. 解决办法 读者Michael McGrady发明了一个不错

  • JavaScript CSS修改学习第六章 拖拽

    JavaScript CSS修改学习第六章 拖拽

    当示例的box上的#链接处于活动状态的时候(不论是用tab然后点击enter或者使用鼠标点击)这个元素就能够通过方向键拖拽.然后点击enter或者Esc释放.(可以随意改变这些键.我不确定释放键应该设置成为什么所以enter和Esc都可以) 使用 1.复制文章后面的dragDrop对象. 2.复制我的addEventSimple和removeEventSimple函数,这里需要. 3.设定keyHTML和keySpeed属性(下面有解释). 4.确定你所要拖拽的元素都有位置属性:absolute

  • CSS使用学习总结

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

  • JavaScript CSS修改学习第一章 查找位置

    offset 在所有的浏览器里面元素的offsetTop和offsetLeft两个属性都是很有用的.他们会给出你元素相对于父元素的坐标位置. 这段代码会向上查找offsetParent,然后添加offsetTop和offsetLeft.最终无论offsetParent在哪,他都会给出你元素在屏幕上的真正坐标. 解释 这段代码非常简单.先传入要计算的元素,然后设置变量curleft和curtop为0. 复制代码 代码如下: function findPos(obj) { var curleft =

  • JavaScript CSS 修改学习第四章 透明度设置

    JavaScript CSS 修改学习第四章 透明度设置

    这里是测试页.在JavaScript里面设置透明度 我用下面的代码来设置透明度: 复制代码 代码如下: function setOpacity(value) {     testObj.style.opacity = value/10;     testObj.style.filter = 'alpha(opacity=' + value*10 + ')'; } 在Mozilla和Safari里使用opacity,IE使用filter.value的值从0到10. 测试结果 IE说明:一个元素必须

随机推荐