首页 > 软件开发 > CSS >

设置css样式的多种方法

来源:互联网 2023-03-16 19:17:35 版权归原作者所有,如有侵权,请联系我们

网页页面效果是同过样式设置出来的,那你知道设置样式的方法有哪些吗?css插入样式表的方法有三种:l1d办公区 - 实用经验教程分享!

1.外部样式表;l1d办公区 - 实用经验教程分享!

2.内部样式表;l1d办公区 - 实用经验教程分享!

3.内联样式。l1d办公区 - 实用经验教程分享!

内联样式

  • 1

    新建html页面。l1d办公区 - 实用经验教程分享!

    打开Dreamweaver 软件,点击菜单栏的“文件”——“新建”,在弹出的新建文档页面选择页面类型为html,文档类型为html5。如图:l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

  • 2

    在页面输入一个div标签并在标签里设置样式。l1d办公区 - 实用经验教程分享!

    如图:l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

  • 3

    保存html页面。l1d办公区 - 实用经验教程分享!

    点击菜单栏“文件”下的“保存”或者按快捷键Ctrl s。如图:l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

  • 4

    使用浏览器打开html页面。l1d办公区 - 实用经验教程分享!

    点击“浏览器”图标选择打开的浏览器。如图:l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

  • 4
  • 5

    所有代码:l1d办公区 - 实用经验教程分享!

    !doctype html>l1d办公区 - 实用经验教程分享!

    html>l1d办公区 - 实用经验教程分享!

    head>l1d办公区 - 实用经验教程分享!

    meta charset="utf-8">l1d办公区 - 实用经验教程分享!

    title>css设置样式的方法/title>l1d办公区 - 实用经验教程分享!

    /head>l1d办公区 - 实用经验教程分享!

    l1d办公区 - 实用经验教程分享!

    body>l1d办公区 - 实用经验教程分享!

    div style="background-color:#F63; width:800px; height:50px; margin:20px auto;">l1d办公区 - 实用经验教程分享!

    直接把样式设置在标签里面l1d办公区 - 实用经验教程分享!

    /div>l1d办公区 - 实用经验教程分享!

    /body>l1d办公区 - 实用经验教程分享!

    /html>l1d办公区 - 实用经验教程分享!

  • css内部样式设置

  • 1

    新建html页面。如图:l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

  • 2

    新建并引用样式。l1d办公区 - 实用经验教程分享!

    在页面上输入一个div标签,在title标签后面新建一个style标签,在这个标签里面创建一个class类,并设置一些样式然后在div中引用新建的样式。如图:l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

  • 3

    浏览器查看效果。l1d办公区 - 实用经验教程分享!

    点击浏览器图标,选择打开的浏览器。如图:l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

  • 4

    所有代码:l1d办公区 - 实用经验教程分享!

    !doctype html>l1d办公区 - 实用经验教程分享!

    html>l1d办公区 - 实用经验教程分享!

    head>l1d办公区 - 实用经验教程分享!

    meta charset="utf-8">l1d办公区 - 实用经验教程分享!

    title>css设置样式的方法/title>l1d办公区 - 实用经验教程分享!

    style type="text/css">l1d办公区 - 实用经验教程分享!

    .yang{background-color:#6CC; width:800px; height:50px; margin:20px auto;}l1d办公区 - 实用经验教程分享!

    /style>l1d办公区 - 实用经验教程分享!

    /head>l1d办公区 - 实用经验教程分享!

    l1d办公区 - 实用经验教程分享!

    body>l1d办公区 - 实用经验教程分享!

    div class="yang">l1d办公区 - 实用经验教程分享!

    内部样式的设置l1d办公区 - 实用经验教程分享!

    /div>l1d办公区 - 实用经验教程分享!

    /body>l1d办公区 - 实用经验教程分享!

    /html>l1d办公区 - 实用经验教程分享!

  • css外部样式表

  • 1

    新建html页面,并在页面输入div标签。l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

  • 2

    新建css文件。l1d办公区 - 实用经验教程分享!

    点击“文件”菜单下的新建,页面类型选择css类型,然后点击“创建”。l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

  • 3

    在css文件里设置class样式,然后点击“文件”下的“保存”,把文件名设置为test。如图:l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

  • 4

    在html页面引用css文件。l1d办公区 - 实用经验教程分享!

    在title标签后输入link rel="stylesheet" href="test.css" />,然后再div里引用class类(注:href=“文件路径”)。如图:l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

  • 5

    在浏览器上查看效果。l1d办公区 - 实用经验教程分享!

    点击“浏览器”图标选择浏览器,即可看到效果。如图:l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

    设置css样式的多种方法l1d办公区 - 实用经验教程分享!

  • 6

    所有代码:l1d办公区 - 实用经验教程分享!

    html页面代码:l1d办公区 - 实用经验教程分享!

    !doctype html>l1d办公区 - 实用经验教程分享!

    html>l1d办公区 - 实用经验教程分享!

    head>l1d办公区 - 实用经验教程分享!

    meta charset="utf-8">l1d办公区 - 实用经验教程分享!

    title>css设置样式的方法/title>l1d办公区 - 实用经验教程分享!

    link rel="stylesheet" href="test.css" />l1d办公区 - 实用经验教程分享!

    /head>l1d办公区 - 实用经验教程分享!

    l1d办公区 - 实用经验教程分享!

    body>l1d办公区 - 实用经验教程分享!

    div class="ys">l1d办公区 - 实用经验教程分享!

    内部样式的设置l1d办公区 - 实用经验教程分享!

    /div>l1d办公区 - 实用经验教程分享!

    /body>l1d办公区 - 实用经验教程分享!

    /html>l1d办公区 - 实用经验教程分享!

    l1d办公区 - 实用经验教程分享!

    l1d办公区 - 实用经验教程分享!

    css页面代码:l1d办公区 - 实用经验教程分享!

    @charset "utf-8";l1d办公区 - 实用经验教程分享!

    /* CSS Document */l1d办公区 - 实用经验教程分享!

    .ys{background-color:#9FF; width:800px; height:50px; margin:20px auto;}l1d办公区 - 实用经验教程分享!

  • 注意事项

    • 如何还是不明白可以把步骤中的所有代码复制到新建的html页面上即可

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!l1d办公区 - 实用经验教程分享!


    标签: CSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号