用CSS怎么设置网页的背景色

下面咱们来看看用css怎么设置网页背景颜色。

操作方法

  • 01

    首先打开电脑上自带的记事本程序，然后输入html网页基本结构语句。<html><body></body></html>

  • 02

    由于css样式必须在标签<head></head>之间，因此我们点击<html>后面，输入<head></head>标签。

  • 03

    在head标签之间输入样式标签<style></style>,然后定义一些属性，例如 <style type="text/css"> body {background-color: yellow} 定义网页背景色为黄色； h1 {background-color: #00ff00} 定义h1标签背景色为#00ff00； h2 {background-color: transparent} 定义h2标签背景色为透明； p {background-color: rgb(250,0,255)} 定义p标签背景色为rgb值； p.no2 {background-color: gray; padding: 20px;} 这个定义class属性为no2的p标签背景色为灰色，并且边距为20px； </style>

  • 04

    然后点击body标签后面输入正文标签内容，例如 <h1>这是KING</h1> <h2>这是KING</h2> <p>这是KING</p> <p class="no2">这个KING设置20内边距。</p>

  • 05

    点击记事本菜单中的文件，选择另存为，把内容保存为html网页格式。双击打开预览效果。

  • 06

    我们可以发现代码中两个同样的<p>标签显示的css样式却不同，区别就在于样式中定义的p.no2,这就是正文代码中class="no2"的优势所在，可以定义个性风格。

赞 (0)

相关推荐

  • css 怎么设置网页字体大小?

    做网页开发的时候,我们需要设置网页字体的大小,把普通和重要的信息进行区分,让一些重要信息更加的显眼,但是css代码要怎么写呢?跟着小编来吧! 操作方法 01 1.我们先看看怎么设置整个网页的字体的大小 ...

  • 怎么修改设置IE浏览器网页的背景色颜色为护眼色

    有的朋友每天都会长时间使用电脑浏览网页,大部分网页的背景色都为白色,长时间盯着电脑屏幕的话眼睛会疲劳,这时我们希望 修改浏览器的背景色,避免视觉疲劳,现在小编就和大家分享 IE浏览器设置背景色为护眼色 ...

  • css怎样设置div背景色渐变

    Css设置 div渐变背景可以让网页看起来更有层次感,那么css怎样设置 div背景颜色渐变呢?今天小编我就来分享一下 css渐变背景的方法. 操作方法 01 举个例子,既然是要设置div渐变,所以我 ...

  • 如何在HTML中设置网页背景颜色

    想在HTML中设置网页背景颜色,你只需要在标签中的"body"元素做些简单的更改就行了.这些步骤根据你想要的效果而略有不同.本文会教你如何设置单色背景.图片背景.渐变背景或动态变色 ...

  • 如何在PS软件中设置前景色和背景色

    如何在PS软件中设置前景色和背景色

    我们在使用PS软件的时候,想要设置前景色和背景色,该怎么操作呢?今天就跟大家介绍一下如何在PS软件中设置前景色和背景色的具体操作步骤.1. 首先打开电脑上的PS软件,如图,在左侧的工具栏最下方就是前景 ...

  • 【DW教程】如何利用CSS样式设置列表文字

    我现在详细教你如何利用CSS样式设置列表文字,为的是让你很快真正理解CSS样式. 操作方法 01 打开Adobe Dreamweaver CC 2015. 02 执行菜单栏中的"文件> ...

  • 小米路由器插件怎么下载?小米路由器插件安装及设置网页加速插件教程

    小米路由器插件下载安装步骤来咯~如果你不知道小米路由器插件怎么安装的话可以来看下文哦~小米路由器也可以安装第三方插件的，能够实现更多功能，快来学习如何安装吧。 第一步、进入小米路由器手机客户端，点击“ ...

  • 海豚浏览器怎么设置网页浏览模式?

      海豚浏览器怎么设置网页浏览模式? 按照以下步骤进行操作:点击页面底部右下方第二个菜单按钮->设置->网页浏览模式,可有5种选择可供设置:Android,桌面模式,iPhone,iPad ...

  • win10系统如何设置网页缓存目录

      win10系统如何设置网页缓存目录 1.首先给IE缓存安个家,在其他驱动器新建一个用于存放IE缓存的文件夹; 2.点击任务栏上的IE图标,打开IE浏览器.如果你解锁了,请在开始菜单里找; 3.点击 ...