样式表

1.1

(1)内联样式表

    和html联合显示,控制精确,重用性差,冗余多。

<p style="font-size:14px;">内联样式表</p>

(2)内嵌样式表

作为独立区域内嵌在网页里,必须写在head标签里面,所有标签都执行。

<style type="text/css">

p

{样式;

}

</style>

(3)外部样式表

新建一个css文件,用来放样式表。如果要在html文件中调用样式表,需要在html文件中点右键→css样式→附加样式表。一般用link连接方式。

<link href="*.css" rel="stylesheet" type="text/css" />

(4)有些标签有默认的边距,一般写样式代码时都会先去除:

*
{
margin:0px;
padding:0px;}

2.选择器

(1)标签选择器。用表签名做选择器。

<style type="text/css">

p

{样式;

}

</style>

(2)class选择器。都是“.”开头。

<head>

<style typen="text/css">

.main

{

height:42px;

width:77px;

text-align:center;

}

</style>

</head>

<body>

<div class="main">

</div>

</body>

(3)id选择器。以“#”开头

<head>

<style typen="text/css">

#main

{

height:42px;

width:77px;

text-align:center;

}

</style>

</head>

<body>

<div id="main">

</div>

</body>

(4)复合选择器。

1)、用“,”隔开表示,并列。

2)、用空格隔开表示后代

<style typen="text/css">

.main p

{width="76px";}

</style>

找到使用样式"main"的标签,在该标签中P标签使用该样式。

3)、筛选用“.”

<style typen="text/css">

p.sp

{width="76px";}

</style>

在P标签中class="sp"的p标签,执行该样式。

 

posted @ 2016-08-20 21:30  削肾客  阅读(147)  评论(0编辑  收藏  举报