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;
}
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。