废话不多说上代码:

1、用CSS给文字添加背景色:

<html>
<head> <style type="text/css"> body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)} p.no2 {background-color: gray; padding: 20px;} </style> </head> <body> <h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p> </body>
</html>

2、直接在HTML中用style属性表示:

<html>
<head>
</head> <body style="background-color:yellow"> <h1 style="background-color:#00ff00">这是标题 1</h1>
<h2 style="background-color: transparent">这是标题 2</h2>
<p style="background-color: rgb(250,0,255)">这是段落</p>
<p style="background-color: gray; padding: 20px;">这个段落设置了内边距。</p> </body> </html>

效果如图:

友情提示:

作者:mhq_martin

来源:http://www.cnblogs.com/mhq-martin/

本文版权归作者和博客园共有,欢迎转载,但未经作者允许必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

CSS用HTML中的style属性替换的更多相关文章

  1. css样式表中四种属性选择器

    学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...

  2. JavaScript 里,$ 代表什么?/JQuery是什么语言?/html中用link标签引入css时的中 rel="stylesheet"属性?/EL表达式是什么?

    JavaScript 里,$ 代表什么? 比如说我写一个mouseover事件: $(document).ready(function(){ $("p").mouseover(fu ...

  3. 修改css样式+jq中的效果+属性操作+元素操作

    :checked    选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color ');   //300px 2.参数是属性名,属性值,逗号分隔,是 ...

  4. CSS盒子模型中的Padding属性

    CSS padding 属性 CSS padding 属性定义元素边框与元素内容之间的空白区域,不可见.如果想调整盒子的大小可以调整内容区,内边距,边框. CSS padding 属性定义元素的内边距 ...

  5. css盒子模型中的border属性

        认识border属性 我们可以通过boder属性来为元素设置边框:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线.CSS border 属性允许你规定元素边框的样式.宽度和 ...

  6. CSS在项目中常用的属性总结

    1.媒体查询 2.如何快速生成适配各种浏览器的属性. 3.全面进军移动app开发.

  7. html 样式之style属性的使用

    转自:https://www.ggbiji.com/html-style.html html中的style属性是用来改变html元素的样式的,样式是 在html 4 引入的,它是改变 html元素样式 ...

  8. Android中的 style 和 theme

    通过设置 view 控件的属性,达到设置android UI的目的,如果某些 属性值复用率很高,可以考虑将属性单独声明在 style中,这样就可以达到复用的效果. 一.style Style 概念:A ...

  9. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

随机推荐

  1. Java并发之底层实现原理学习笔记

    本篇博文将介绍java并发底层的实现原理,我们知道java实现的并发操作最后肯定是由我们的CPU完成的,中间经历了将java源码编译成.class文件,然后进行加载,然后虚拟机执行引擎进行执行,解释为 ...

  2. composer安装laravel

    安装composer composer是一个很有用的工具,我将用它在本机(win7)上安装laravel 到composer的官网,根据自己的系统要求下载相应的版本 安装laravel 首先cmd下进 ...

  3. 02-01官网静默模式安装WebLogic

    参考连接:https://docs.oracle.com/middleware/11119/wls/WLSIG/silent.htm#CIHCAHGC 以静默模式运行安装程序 本章介绍如何以静默方式运 ...

  4. 关于Oracle开启自动收集统计信息的SPA测试

    主题:关于Oracle开启自动收集统计信息的SPA测试 环境:Oracle RAC 11.2.0.4(Primary + Standby) 需求:生产Primary库由于历史原因关闭了自动统计信息的收 ...

  5. Python day 7(2) 类和实例(1)

    一:面向对象编程 1  面向对象编程--Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 2 ...

  6. python导入不同目录下模块的方法

    下面将具体介绍几种常用情况:(1)主程序与模块程序在同一目录下:如下面程序结构:`-- src    |-- mod1.py    `-- test1.py    若在程序test1.py中导入模块m ...

  7. 使用linux perf工具生成java程序火焰图

    pre.cjk { font-family: "Nimbus Mono L", monospace } p { margin-bottom: 0.1in; line-height: ...

  8. 浏览器根对象window之screen

    1. screen 1.1 availHeight/Width screen.availWidth返回浏览器窗口可占用的水平宽度(单位:像素). screen.availHeight返回浏览器窗口在屏 ...

  9. 【转载】linux挂载mount参数优化

    一. 1) 蓝色:表示经过优化的xfs mount时的参数defaults,noatime,nodiratime,nobarrier,discard,allocsize=256m,logbufs=8, ...

  10. Ubuntu+Django+Nginx+uWSGI+Mysql搭建Python Web服务器

    Ubuntu+Django+Nginx+uWSGI+Mysql搭建Python Web服务器 闲着无聊的时候部署了一个Django项目玩,用vm虚拟机部署的. 准备工作 我使用的系统是Ubuntu16 ...