设置css样式的多种方法

2025-11-20 06:51:18

1、新建html页面。

打开Dreamweaver 软件,点击菜单栏的“文件”——“新建”,在弹出的新建文档页面选择页面类型为html,文档类型为html5。如图:

设置css样式的多种方法

设置css样式的多种方法

2、在页面输入一个div标签并在标签里设置样式。

如图:

设置css样式的多种方法

设置css样式的多种方法

3、保存html页面。

点击菜单栏“文件”下的“保存”或者按快捷键Ctrl+s。如图:

设置css样式的多种方法

设置css样式的多种方法

4、使用浏览器打开html页面。

点击“浏览器”图标选择打开的浏览器。如图:

设置css样式的多种方法

设置css样式的多种方法

5、所有代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>css设置样式的方法</title>

</head>

<body>

<div style="background-color:#F63; width:800px; height:50px; margin:20px auto;">

    直接把样式设置在标签里面

    </div>

</body>

</html>

1、新建html页面。如图:

设置css样式的多种方法

2、新建并引用样式。

在页面上输入一个div标签,在title标签后面新建一个style标签,在这个标签里面创建一个class类,并设置一些样式然后在div中引用新建的样式。如图:

设置css样式的多种方法

3、浏览器查看效果。

点击浏览器图标,选择打开的浏览器。如图:

设置css样式的多种方法

设置css样式的多种方法

4、所有代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>css设置样式的方法</title>

<style type="text/css">

.yang{background-color:#6CC; width:800px; height:50px; margin:20px auto;}

</style>

</head>

<body>

<div class="yang">

    内部样式的设置

    </div>

</body>

</html>

1、新建html页面,并在页面输入div标签。

设置css样式的多种方法

2、新建css文件。

点击“文件”菜单下的新建,页面类型选择css类型,然后点击“创建”。

设置css样式的多种方法

设置css样式的多种方法

设置css样式的多种方法

3、在css文件里设置class样式,然后点击“文件”下的“保存”,把文件名设置为test。如图:

设置css样式的多种方法

设置css样式的多种方法

4、在html页面引用css文件。

在title标签后输入<link rel="stylesheet" href="test.css" />,然后再div里引用class类(注:href=“文件路径”)。如图:

设置css样式的多种方法

5、在浏览器上查看效果。

点击“浏览器”图标选择浏览器,即可看到效果。如图:

设置css样式的多种方法

设置css样式的多种方法

6、所有代码:

html页面代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>css设置样式的方法</title>

<link rel="stylesheet" href="test.css" />

</head>

<body>

<div class="ys">

    内部样式的设置

    </div>

</body>

</html>

css页面代码:

@charset "utf-8";

/* CSS Document */

.ys{background-color:#9FF; width:800px; height:50px; margin:20px auto;}

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢