废话不多说上代码：

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. Ruby学习之对象模型

    这两周工作内容较多,平时自己也有点不在状态,学的东西有点少了,趁着现在还有点状态,赶紧复习一下之前学习的Ruby吧. Ruby是我真正开始接触动态语言魅力的第一个语言,之前虽然也用过且一直用perl. ...

  2. 前端安全之XSS攻击及防御

    xss攻击是什么 ? XSS攻击类似于SQL注入攻击,攻击之前,我们先找到一个存在XSS漏洞的网站,XSS漏洞分为两种,一种是DOM Based XSS漏洞,另一种是Stored XSS漏洞.理论上, ...

  3. Java学习笔记21（String类补充：正则表达式）

    正如python的re模块,不过Java和Python的正则表达式有一些区别,这里做简单介绍,具体的细节可以参考网上其他的文章: 功能:可以用于检验一个字符串,比如验证用户名,验证密码格式,验证是否是 ...

  4. Android异常分析(转)

    关于异常 异常? 异常就是一种程序中没有预料到的问题,既然是没有预料到的,就可能不在原有逻辑处理范围内,脱离了代码控制,软件可能会出现各种奇怪的现象.比如:android系统常见异常现象有应用无响应. ...

  5. cassandra的gc调优

    我们用的是cassandra3.7官方的docker镜像,在生产环境发现有一个小时一次停顿的现象.我猜测是java gc的原因,于是看了cassandra的gc日志,果然发现有每小时长达300ms-2 ...

  6. springboot 静态方法注入service

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 16.0px; font: 14.0px Arial; color: #3f3f3f; bac ...

  7. AOP---jdk动态代理的思考

    引出问题:动态代理中是谁调用了invoke方法 为了更好的说明情况,我先写一个动态代理类 a.Person类 public interface Person { public void eating( ...

  8. dotnet core webapi +vue 搭建前后端完全分离web架构

    架构 服务端采用 dotnet core  webapi 前端采用: Vue + router +elementUI+axios 问题 使用前后端完全分离的架构,首先遇到的问题肯定是跨域访问.前后端可 ...

  9. CTF---Web入门第十三题 拐弯抹角

    拐弯抹角分值:10 来源: cwk32 难度:易 参与人数:5765人 Get Flag:2089人 答题人数:2143人 解题通过率:97% 如何欺骗服务器,才能拿到Flag? 格式:CTF{} 解 ...

  10. CTF---密码学入门第一题 这里没有key

    这里没有key分值:10 来源: 西普学院 难度:易 参与人数:5577人 Get Flag:1965人 答题人数:2074人 解题通过率:95% 你说没有就没有啊,俺为啥要听你的啊 解题链接: ht ...