设置css样式的多种方法

 时间:2024-10-14 10:23:44

网页页面效果是同过样式设置出来的,那你知道设置样式的方法有哪些吗?css插入样式表的方法有三种:1.外部样式表;2.内部样式表;3.内联样式。

内联样式

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>

css内部样式设置

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>

css外部样式表

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;}

  • Dreamweaver网页怎么设置背景
  • DW的行标不见了怎么办
  • Dreamweaver如何让表格纵向合并
  • Dw CC 2018怎么设置选取后继对话框中默认操作
  • Dw怎样新建一个站点
  • 热门搜索
    教师节手抄报内容大全 以过年为主题的手抄报 迈好初中第一步手抄报 关于爱国的手抄报资料 关于读书的手抄报花边 关于春联的手抄报 关于孝道的手抄报 初一手抄报 尊敬老人手抄报 关于春节的语文手抄报