样式表分类:

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.positionabsolute

    1.外层没有positionabsolute(或relative);那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素)。

    2.外层有positionabsolute(或relative);那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框为20像素)。

 

三、positionrelative

 

    相对位置。相对于默认位置的移动,

 

  相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的,那就相对于浏览器进行相对位置的固定

注意:绝对位置是在页面上进行定位,是浮动的。而相对位置是在页面里面占有某块位置,有上下左右的值的时候,只是进行形状上的平移,真实占有的位置不变。

 

四、分层(z-index

 

    z轴方向分层,可以理解为分成一摞纸,层数越高越靠上。

 

    在上面relative的示例中,我们看到了aa遮住了a,这是因为后写代码的显示级别越靠前,那么在不改变代码顺序的情况下如何让a盖住aa?如下:

五、floatleftright

Leftright时不用给他规定位置(lefttop),直接相对于浏览器。若外部被包裹,相对于外部div的除去一行的位置的左上或右上显示。

    overflowhidden    //超出部分隐藏;scroll,显示出滚动条;

    <div style=”clear:both”></div>   //截断流

 

半透明效果:

 

    <div class=”box”>透明区域<div>

 

在样式表中的代码为:

 

.box

 

{

 

opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)

 

}

 

 

 

 

版权声明:本文为liuyanzeng原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/liuyanzeng/p/5794278.html