css学习总结
一 关于css的id选择符
每个html的元素都包含一个id属性,该属性是唯一的,可以唯一标示一个元素,我们就可以选择更具体的元素。is属性由井号加id组成。
p#bulletinContent
{
color:Yellow ;
background-color:Maroon ;
}
html界面如下:
<p id = "bulletinContent" >我的blog</p>
二 class选择符
html中包含class属性,与id属性不同,class属性不要求唯一性,多个元素可以拥有相同的calss属性。
h2.titleLevel2
{
color:Gray ;
}
html 页面代码:
<h2 class="titleLevel2">测试class的属性</h2>
三 多重class
由上节的内容可知,class属性和id属性的不同之处,id属性是唯一的,而同一个属性可以赋给多个元素。
一个html元素可以属于多个class。
<h2 class="class1 class2">测试class的属性</h2>
css文件如下:
a.class1
{
font-size:12px;
}
a.class2
{
color:red;
}
四 嵌套div标签
div.box
{
border:1px solid #E2DFD0 ;
margin-bottom:1em;
}
div.box div.title
{
padding:0.3em ;
padding-left:0.6em;
background:#F2F0DD;
font-size:0.9em ;
font-weight:bold;
}
div.box div.content
{
margin:0.3em;
}
div.box div.content *
{
margin:0;
}
div.box h3
{
font-weight: bold;
font-size:0.9em;
padding:0.5em;
color:#0033CC;
}
div.box p
{
font-size:0.9em;
padding:0.5em;
}
div.content + div.content
{
border-top:1px dotted #E2DFD0 ;
}
对应的html代码
<div class="box">
<div class="title">产品列表</div>
&nbs
相关文档:
margin-bottom:8px;设置对象下边距的高度
内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。
padding-top:10px;与上一个标签的距离
padding-left:10px;与左边的间距
检索或设置对象顶边的补丁边距。
内联对象要使用该属性,必须先设定对象的height或width属性,或者设定pos ......
起初的HTML的设计只是定义文档内容用,而对于文档布局则由浏览器来完成。后来由于浏览器服务商不断地将新的规范中,使得创建文档内HTML标签添加到HTML容清新独立于表现层的站点越来越复杂。为了解决这个问题,万维网联盟(W3C),肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造 ......
50款css工具
引自:http://bbs.seuuo.com/thread-2613-1-3.html
50款CSS工具,包含,CSS网格和布局工具,CSS 优化工具,CSS 菜单生成工具,CSS 按钮生成器,CSS 圆角生成器,CSS 框架,CSS Sprites生成器,CSS 排版工具以及 CSS 表单生成器。
网格和布局The 1KB CSS Grid
新颖的 CSS 网格工具,可用于简化内容管理系统的 ......
http://www.qiqiboy.com/2009/11/26/css-image-orientation-and-all-images-in-a-picture.html
如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标。如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题。如果你的网站用各种图标图案装饰的靓丽无 ......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Hack: 区分 I ......