<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML:基础内联样式</title>
</head>
<body>
<h1 style="text-align:center">三毛语录</h1>
<p style="font-size:18px;">1.不做不可及的梦,这使我的睡眠安恬。避开无事时过分热络的友谊,这使我少些负担和承诺。不说无谓的闲言,这使我觉得清畅。我尽可能不去缅怀往事,因为来时的路不可能回头。我当心的去
爱别人,这样不会泛滥。我爱哭的时候哭,我爱笑的时候笑,我不求深刻,只求简单。</p>
<p style="font-size:18px">2.<span style="color:red">人情冷暖正如花开花谢</span>,不如将这种现象,想成一种必然的季节。</p>
<p style="font-size:18px">3.刻意去找的东西,往往是找不到的。天下万物的来和去,都有他的时间。</p>
<p style="font-size:18px">4.走得突然,我们来不及告别。这样也好,因为我们永远不告别。</p>
<p style="font-size:18px">5.我爱哭的时候便哭,想笑的时候便笑,只要这一切出于自然。我不求深刻,只求简单。</p>
</body>
</html>

打开浏览器显示:

  • 源码讲解:
  • style:css内联样式就是直接加在某个元素属性中的样式。
  • text-align:设置文字是 左对齐(left) 居中(center)右对齐(right)
  • color:设置文字字体
  • font-size:是设置文字的大小

HTML基础 内联样式改进 三毛语录的更多相关文章

  1. HTML&CSS基础-内联样式和内部样式表

    HTML&CSS基础-内联样式和内部样式表 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.CSS(Cascading Style Sheets)简介 层叠样式表(Cas ...

  2. 你真的知道css三种存在样式(外联样式、内部样式、内联样式)的区别吗?

    css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...

  3. Vue学习之路第十二篇:为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  4. HTML&CSS基础-内联和块元素

    HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  5. Vue 内联样式

    前置说明 Vue 绑定HTML 全局属性style,可以动态地改变属性值.这里就不讲内联样式的基础了,具体轻查看官网文档 Class 与 Style 绑定. 主要分为以下两个步骤进行: v-bind ...

  6. DOM与元素节点内联样式

    获取.设置及移除单个内联 CSS 属性 每个 HTML 元素都有个 style 属性,可以用来插入针对该元素的内联 CSS 属性. <div style='background-color:bl ...

  7. 如何获取内联样式的width值

    如图,如何获取内联样式的width值 不用attr 用css这样写

  8. 内联样式自动出现,一般是js控制写入的

    内联样式自动出现,一般是js控制写入的

  9. vue 内联样式style中的background

    在我们使用vue开发的时候   有很多时候我们需要用到背景图 这个时候会直接使用 内联样式 直接把你拿到的数据拼接上去 注意  在vue中直接使用style时 花括号一定别忘记 还有就是你的url一定 ...

随机推荐

  1. ckeditor如何能实现直接粘贴把图片上传到服务器中?

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  2. POJ 2502 Subway ( 最短路 && 最短路建图 )

    题意 : 给出二维平面上的两个点代表起点以及终点,接下来给出若干条地铁线路,除了在地铁线路上行进的速度为 40km/h 其余的点到点间都只能用过步行且其速度为 10km/h ,现问你从起点到终点的最短 ...

  3. Java后端进阶教程

    https://www.cnblogs.com/caoleiCoding/p/6170555.html 传智播客Java Spring框架:https://www.bilibili.com/video ...

  4. 纯CSS实现项目展示遮罩详情效果

    本实例主要用于项目展示时鼠标hover后显示一个遮罩显示项目详情的效果,遮罩采用CSS的绝对定位以及CSS3盒子模型. 本实例应用广泛,很多品牌官方网站均有采用. hover: <!DOCTYP ...

  5. 生产环境下,oracle不同用户间的数据迁移。第三部分

    任务名称:生产环境下schema ELON数据迁移至schema TIAN########################################前期准备:1:确认ELON用户下的对象状态se ...

  6. mysql主从架构,IO、SQL线程运行为YES,从库没有同步数据

    mysql基于binlog主从复制架构,IO.SQL线程运行为YES,从库没有同步数据 Slave_IO_Running: Yes Slave_SQL_Running: Yes Replicate_D ...

  7. ora4031

    http://blog.itpub.net/23135684/viewspace-1203447/ Mon Sep 11 08:56:10 2017Errors in file /oracle/db/ ...

  8. centos R包 tidyverse安装

    tidyverse安装失败,install.packages('tidyverse') 错误原因大概是其中有个依赖包xml2安装不上,解决办法是yum install libxml2-devel,这样 ...

  9. EXE的32位或64位判断

    C:\Program Files (x86)\Microsoft Visual Studio 10.0\VC> dumpbin /headers "Program.exe" ...

  10. 在Python中操作文件之truncate()方法的使用教程

    在Python中操作文件之truncate()方法的使用教程 这篇文章主要介绍了在Python中操作文件之truncate()方法的使用教程,是Python入门学习中的基础知识,需要的朋友可以参考下 ...