三、如何用CSS控制页面?

头像
欧永鹏
2015-11-17 17:32:40

B_02.gif

1.内嵌式


在<head>中写入样式


<head>

<style type="text/css">

<!--

.STYLE1 {color: #FFFFFF}

-->

</style>

</head>

B_10.gif

2.行内样式


<html>

<head>

<title>行内样式</title>

   </head>

<body>

  <p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p>

  <p style="color:#000000; font-style:italic;">正文内容2</p>

  <p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p>

</body>

</html>

3.html

B_10.gif


全部回复
正序查看
头像
欧永鹏

3.链接式:使用频率最高,最实用的方法。它将html页面内容本身和css代码分离成两个或多个文件,使得前期制作和后期维护十分方便,使网站的后台技术人员和美工设计者很好的分工合作。同时同一个css文件可以链接到几个网页甚至整个网站的所有页面,使得整个网站整体风格统一协调。它也是本门课程讲解的重点。


<head>

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

</head>

B_10.gif

例:链接式网页:


<html>

<head>

<title>使用了链接样式的网页!</title>

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

   </head>

<body>

<h2>CSS标题1</h2>

<p>紫色、粗体、下划线、25px的效果1</p>

<h2>CSS标题2</h2>

<p>紫色、粗体、下划线、25px的效果2</p>

</body>

</html>


2015-11-17 17:35:12
...
头像
欧永鹏

4.导入式

<head>

<style type="text/css">

<!--

@import url(1.css);

-->

</style>

</head>

和链接式很相似,在一个网页中可以同时导入几个样式表。缺点在使用时是先加载内容再把相关的CSS代码加载进来,在打开网页速度较慢时,有可能会出现内容显示了,但CSS代码还未加载进来,使网页暂时看起来很丑,因此不推荐使用。

B_10.gif

样式优先级:

行内样式  >   link样式   > 内嵌样式    >  import样式


备注:在网页中使用CSS有几种方法,建议在建站时最好只使用其中的

1种或两种方法,这样有利于后期的维护和管理。也不会现各种样式撞车

的情况。


2015-11-17 17:39:37
...
头像
PS-省份-小唯

B_54.gif看不懂

2015-11-17 17:54:39
...
头像
曦儿

B_03.gif 不懂

2015-11-17 17:56:52
...
头像
影视后期-陆家剑

B_10.gif

2015-11-17 18:23:41
...
头像
好才喜欢

B_70.gif

2015-11-17 18:51:48
...
头像
小小7

B_48.gif

2015-11-18 11:22:45
...
头像
栩栩清风

猴塞利~~

2015-11-18 11:25:01
...
头像
猫咪小姐

B_50.gif看不懂

2015-11-18 11:28:15
...
头像
穷不穷你别怂

B_110.gif

2015-11-18 15:07:08
...