注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

老狗的博客

尽管每一步都很微小,但我确认我在进步

 
 
 

日志

 
 
关于我
sky

认真生活,努力工作 热爱技术,关注DB,存储,分布式,中间层,java,c++,php

网易考拉推荐

div + css学习  

2012-08-30 13:50:44|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

选择器
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明
selector {declaration1; declaration2; ... declarationN; }

selector : 需要改变样式的html元素

declaration: (key:value)

declaration之间用逗号分隔开;注意最后一条declaration一定用;终结

举例如下:
h1 {color : Red;font-size : 12px; }

选择器分组

多个选择器可以写在一起
h1,h2,h3 { color:Red;}

样式继承
根据 CSS,子元素从父元素继承属性
body {      font-family: Verdana, sans-serif;      }

根据上面这条规则,站点的 body 元素将使用 Verdana 字体(假如访问者的系统中存在该字体的话)

如何摆脱继承

针对子元素创建一个新样式

p  {   font-family: Times, "Times New Roman", serif;   }

这样子元素就摆脱了父元素的样式限制

派生选择器

li strong {     font-style: italic;     font-weight: normal;   }

id选择器

#red {color:red;} #green {color:green;}
id 属性只能在每个 HTML 文档中出现一次

类选择器
.center {text-align: center}
td.fancy {  color: #f60;  background: #666;  } 

在上面的例子中,类名为 fancy 的表格单元将是带有灰色背景的橙色。

<td class="fancy">


框模型

div/h1/p被称为块元素,有自己的块框

span/strong被称为行元素,有行框,通过将行内元素设置display属性,可以让display

总之一切皆为框

padding(内边距)

margin(外边距)


div + css学习 - sky - 老狗的博客
 css定位

默认采用普通流的方式进行定位
普通流
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行框包括行内框,行内框在行框一个接一个的水平排列,可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度

相对定位
position:relative
相对于其(原始位置)进行定位

绝对定位
position:absolute
相对于(包含块)进行定位,可以直接指定显示的坐标位置

position:fixed

相对于(视窗本身)进行定位





  评论这张
 
阅读(269)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018