怎样利用CSS制作网页

光是CSS是做不了网页的,CSS是样式表,简单说就是控制网页里所有元素的表现形式,比如背景,比如字体大小,颜色.他需要和你html一起组成网页.网页主要是内容的体现,最好用div的写法,就是层+样式,网页里标签都可以设置id,就像人取了一个名字,id不能重复,然后在css里用

创新互联建站专业为企业提供南江网站建设、南江做网站、南江网站设计、南江网站制作等企业网站建设、网页设计与制作、南江企业网站模板建站服务，10多年南江做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

#id {样式代码}的方式就能控制这个id了.

如果多个内容相同,可以看做他们是一组的,就是class,设置class

.class名称 {样式代码} 就可以设置这个组的样式了,class名可以重复,主要应用就是这二个,还有更多资料相信你可以在很多地方找到教程.

怎么用div布局加css样式做网页

方法/步骤

1

在桌面建立一个index.htm的文件和main.css的文件，当然你也可以不用main.css的文件，但是为了方便操作，还是建一个吧。只要把记事本另存为就可以了。

2

做好这两个文件后我们把网页的基础代码写上去，并使index文件受到main.css的控制，我们右键选择用记事本打开index文件输入代码，并在head里写上link href="main.css" type="text/css" rel="stylesheet"使它受到main.css控制

html

head

title/title

/head

body

/body

/html

3

下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的，看上去温馨，我在main.css里写上*{background:#FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的，表示已经受到css样式表的控制了。

4

下面我们进行布局一般网页都是3层一级，所以我们需要div布局了在body里面写一般我会先分为3层

html

head

title/title

link href="main.css" type="text/css" rel="stylesheet"

/head

body

div id="top"

div id="top1"/div

div id="top2"/div

div id="top3"/div

/div

/body

/html

5

布局好后我们需要去定义属性了，这里我只是简单的定义了一下

*{background:#FF33FF}

#top{background:#FFFF99; height:1000px; width:800px; margin-left:auto; margin-right:auto}

#top1{background:#66FFFF; height:50px; width:800px;}

#top2{background:#FF00CC; height:400px; width:800px}

#top3{background:#FF9933; height:550px; width:800px}

定义好了我们打开预览一下看看，图片是不是居中和分成3块了。当然，颜色只是为了方便看清楚，可以不写。

6

其实做网页就是不断的画框，只要知道布局和定义属性就可以了，下面我们就整个做一下，因为我的有一些是一样的，可以用class调用，class=baidu这个只是随便写的，你爱等于什么就等于什么

html

head

title/title

link href="main.css" type="text/css" rel="stylesheet"

/head

body

div id="top"

div id="top1"这里都是我截图的照片/div

div id="top2"

div class="baidu"/div

div class="baidu"/div

/div

div id="top3"

div class="baidujingyan"/div

div class="baidujingyan"/div

/div

/div

/body

/html

7

下面我们再去定义他的属性，当然我只是简单的定义一下

*{background:#FF33FF}

#top{background:#FFFF99; height:1000px; width:800px; margin-left:auto; margin-right:auto}

#top1{background:#66FFFF; height:50px; width:800px; text-align:center; line-height:50px; font-size:30px}

#top2{background:#FF00CC; height:400px; width:800px}

#top3{background:#FF9933; height:550px; width:800px}

.baidu{background:#FF6666; height:380px; width:380px; float:left; margin:10px}

.baidujingyan{background:#FFCC00; height:530px; width:380px; float:left; margin:10px;}

8

因为我这个是我截图相册的网页，下面我们就放照片吧，这里我偷个懒，把照片都放在桌面了，所以不用连接照片地址了。

html

head

title/title

link href="main.css" type="text/css" rel="stylesheet"

/head

body

div id="top"

div id="top1"这里都是我老婆的照片/div

div id="top2"

div class="baidu"img src="QQ图片20141212090452.jpg"/div

div class="baidu"img src="QQ图片20141212090346.jpg"/div

/div

div id="top3"

div class="baidujingyan"img src="QQ图片20141212090224.jpg"/div

div class="baidujingyan"img src="QQ图片20141212090255.jpg"/div

/div

/div

/body

/html

如果图片不在同一层目录，就需要连接到图片地址

9

这样一个网页就做好了，如果需要制作精美的网页，就需要不断的进行div布局和css样式的规定了。

10

下面我来说说网页制作的定义，网页的制作只要会使用div不停的布局，不停的定义他的属性，基本静态的网页就是这样做出来的

HTML怎么把CSS样式插入到页面

html引用css方法如下：

1、直接在div中使用css样式制作div+css网页

2、html中使用style自带式

3、使用@import引用外部CSS文件

4、使用link引用外部CSS文件 推荐此方法

解html引用css方法的例子

1、直接在html标签元素内嵌入css样式，如div style="font-size:14px; color:#FF0000;"我是div css测试内容-支持/div 效果如下图

2、在html头部head部分内style声明插入代码如下：

style type="text/css" 

!-- 

.ceshi {font-size:14px; color:#FF0000;}/*这里是设置CSS的样式内容*/ 

-- 

/style

具体方法如下图：

3、使用@import引用外部CSS文件方法

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"

html xmlns="

head 

meta http-equiv="Content-Type" content="text/html; charset=gb2312" / 

titlecss引用方法实例-测试实例/title 

style type="text/css" 

!-- 

@import url(wcss.css);/*这里是通过@import引用CSS的样式内容*/ 

-- 

/style 

/head 

body 

div class="ceshi"我是div css测试内容支持/div 

/body 

/html

Wcss.css文件内代码.ceshi {font-size:14px; color:#FF0000;}

效果如下图：

可以看出使用此方法和使用自带式引用css样式表方法有相同处，都是需要在html的head内使用style标签引用外部css。

4、使用link来调用外部的css文件

在head放置link rel="stylesheet" href="wcss.css" type="text/css" /来调用外部的wcss.css文件来实现html引用css文件

详细如下图

此方法就不需要style标签，而是直接通过link一个样式来引用外部样式

一般推荐使用link来引用外部的css样式方法。

将样式表(css)加到你的网页中的几种方法

(1)、将样式表置入 HTML 文件头部:

!--

H1 {color: green; font-family: impact}

P {background: yellow; font-family: courier}

--

(2)、将一个外部样式表定义文件链接到 HTML 文件上:

文件 mystyles.css 的内容如下:

H1 {color:green; font-family:impact}

P {background:yellow; font-family:courier}

(3)、将一个外部样式表定义文件输入到 HTML 文件中:

!--

@import url(company.css);

H1 { color: orange; font-family: impact}

--

其中 company.css 文件内容如下：

H1{color:green; font-family:times}

P{background:yellow; font-family:courier}

(4)、将样式表加入到 HTML 文件行中:

如：

(注意：如果一个网页中同时使用了以上 4 种方法，那么

它们的优先级从高到低是 4-3-2-1。)

在网页制作中怎样引用CSS样式？

共有4种引入cascading sheet style层叠样式表方式： 1。link href="路径/文件名.css" rel="stylesheet" type="text/css" 2。style a{text-align:center:...}/style(一般放在/head与/body之间) 3。style @import url("路径/文件名.css" );/style (一般放在/head与/body之间,但比较少见，也少用) 4。直接在标签后面加入style=""。比如img src='' " style="width:xxxpx;.height:xxxpx;" /

求采纳

CSS样式表嵌入到网页中的几种方法

css样式表嵌入网页有以下三种方法：

1，内联样式

内联样式是直接在html标签上定义该标签的css样式，如：

div

style="width:200px;height:30px;"/div

2，内部样式

内部样式是写在html文件中，且包含在style/style代码块中，如：

style

.box{width:200px;height:30px;}

/style

div

class="box"/div

3，外部样式

外部样式是通过在html中引用外部css文件来控制样式，如：

html文件中写入引用语句：

link

href="css文件路径"

rel="stylesheet"

media="screen"

/

分享名称：引入css样式制作网页,页面引入css样式
标题网址：http://csdahua.cn/article/dsiiepd.html