css样式表:样式分类,选择器。样式属性,格式与布局
样式表分类:
1.内联样式表,
和html联合显示,例:<p style=”font-size:14px;”>内联样式表</p>
2.内嵌样式表
作为一个独立的区域内嵌在网页里,必须写在head里边。
<style type=”text/css”>
p //格式对p起作用
{样式;
}
</style>
3.外部样式表
新建一个CSS文件,用来放置样式表。如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式表→附加样式表。一般用link连接方式。
有些标签有默认的边距,一般写样式表代码的时候都会先去除(也可以设置其他的样式),如下:
选择器:
标签选择器,用标签名做选择器。
<style type=”text/css”>
p //格式对p起作用
{样式;
}
</style>
2. class选择器,都是用“.”开头(类)
<head>
<style type=”text/css”>
.main
{样式
}
</style>
</head>
<body>
<div class=”main”>
</div>
</body>
3.id选择器以“#”开头,表示单独唯一。样式和class相同只是开头和body里的样式名不同即<div id=”main”>
链接的style:
a:link 超链接被点前状态
a:visited 超链接点击后状态
a:hover 悬停在超链接时
a:active 点击超链接时
在定义这些状态时,有一个顺序l v h a
样式:
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
<style>
.a1:link
{
color:black;
text-decoration:none;
font-size:24px;
}
.a1:visited
{
color:black;
text-decoration:none;
font-size:24px;
}
.a1:hover
{
color:red;
text-decoration:underline;
font-size:24px;
}
.a1:active
{
color:orange;
text-decoration:underline;
font-size:24px;
}
</style>
</head>
<body>
<div class=”main”><p>1234567890</p></div>
<a class=”a1″ href=”http://www.baidu.com”>百度一下</a><br />
</body>
</html>
格式与布局
1.position:fixed
锁定位置(相对于浏览器的位置)
2.position:absolute
1.外层没有position:absolute(或relative);那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素)。
2.外层有position:absolute(或relative);那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框为20像素)。
三、position:relative
相对位置。相对于默认位置的移动,
相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的,那就相对于浏览器进行相对位置的固定
注意:绝对位置是在页面上进行定位,是浮动的。而相对位置是在页面里面占有某块位置,有上下左右的值的时候,只是进行形状上的平移,真实占有的位置不变。
四、分层(z-index)
在z轴方向分层,可以理解为分成一摞纸,层数越高越靠上。
在上面relative的示例中,我们看到了aa遮住了a,这是因为后写代码的显示级别越靠前,那么在不改变代码顺序的情况下如何让a盖住aa?如下:
五、float:left、right
Left、right时不用给他规定位置(left、top),直接相对于浏览器。若外部被包裹,相对于外部div的除去一行的位置的左上或右上显示。
overflow:hidden; //超出部分隐藏;scroll,显示出滚动条;
<div style=”clear:both”></div> //截断流
半透明效果:
<div class=”box”>透明区域<div>
在样式表中的代码为:
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}