|
css样式：数据与外观相分离
软件发展方向：低耦合，高内聚 <table><caption>标题 <span>为块标签可以用来突出显示某些内容 例如：我的爱好<span style="color:Red;font-family:@华文彩云;font-size:x-large">唱歌</span> 突出显示唱歌 盒子模型（框模型，回字模型） 内容区，边框区，空白区 连接外部样式表 <head><link rel="stylesheet" type="text\css" href="样式表文件.css"></head> 内嵌样式在<head>内部写,例如 <head runat="server"> <style type="text/css"> p { color:Red; background-color:Green } </head> 行内样式直接写在标签处 不要用属性直接控制外观模式应用style模式 padding:到边框的距离 筛选器：Html选择器（用Html标签的名称去定义的），class类选择器（伪类），ID选择器，特殊的选择器 Html选择器:无需调用 p { color:Red; font-family:@方正舒体; font-size:large; } ul { background-color:Blue; font-family:@幼圆; font-size:medium; } class类选择器:需要用class="名称"调用
.myclass { color:Black; padding:5px,20px,30px,50px; border-width:medium; } ID选择器:在应用标签处需要定义id如<ol id="div_ol">
#div_ol { background-color:Green; } 特殊的选择器：不需要调用
a { color:Blue; } a:hover { color :Red; text-decoration:"underline"; } a:active { color:Green; } Z-index:Z轴索引 索引越大就在上面
悬浮窗 .news { background-color: gray; border: solid 1px red; float:left; } .news img { float:left; } .news p { float:right; } <div class="news"> <img src="logo.gif" /> <p>我的大大泡泡糖</p> </div> 可以做围绕图片显示文本的形式 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他
框。 Position:relative相对定位 与之相反，绝对定位使元素的位置与文档流无关，因此不占据空间。Position:absolute绝对定位 容器元素不包围两个浮动的块。添加一个进行清理的空元素可以迫使容器元素包围浮动元素 还可以不对浮动的文本和图像进行清理，而是选择对容器div进行浮动： .news {background-color: gray; border: solid 1px black; float:left;} 目前渐变非常时髦，你可能希望在页面上应用垂直渐变。为此，需要创建一个很高但很窄的渐变图像， 然后将这个图像应用于页面的主体并让它水平平铺： body { background:#ccc url(gradient.gif)repeat-x; } 可以创建一个非常长的图像，逐渐变化到一个固定的颜色。但是，很难预测页面会有多长。实际上，只 需再添加一个背景颜色。背景图像总是出现在背景颜色的上面，所以当图像结束时，颜色就会显示出来了。 如果选择的背景颜色与渐变底部的颜色相同，那么图像和背景颜色之间的转换就看不出来了。 我在标记中添 加一个空的div并且给它设置ID branding。然后可以将这个div的尺寸设置为与品牌图像相同，作为背景 应用图像并指定不进行平铺。 #branding { width:700px; height:200px; background:url(/images/branding.gif) no-repeat; } |
|
|
