HTML基础 内联样式改进 三毛语录

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

打开浏览器显示:

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

转载于:https://www.cnblogs.com/qjuly/p/8529064.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 内联样式 animation 是一种在 HTML 元素内部直接添加动画效果的方法。通过在元素的 style 属性中使用 animation 相关的属性和值,可以实现各种动画效果。 首先,要创建一个内联样式动画,需要使用 `@keyframes` 规则来定义动画的关键帧。关键帧指定了动画的不同阶段的样式。例如,要创建一个淡入动画效果,可以使用以下代码: ```HTML <div style="animation-name: fade-in;"> 这是一个淡入动画 </div> <style> @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } </style> ``` 在上面的代码中,我们创建了一个名为 "fade-in" 的关键帧,其中在开始时设置元素的透明度为 0,在结束时将透明度设置为 1。然后,在要应用动画效果的 div 元素中使用 `style` 属性设置 `animation-name` 为 "fade-in"。 除了 `animation-name`,我们还可以使用其他属性来配置动画。以下是一些常用的属性: - `animation-duration`:动画的持续时间。 - `animation-timing-function`:动画的时间函数。 - `animation-delay`:动画延迟开始的时间。 - `animation-iteration-count`:动画的重复次数。 - `animation-direction`:动画播放的方向。 - `animation-fill-mode`:动画结束后元素的样式状态。 这些属性可以通过在 `style` 属性中添加相应的属性和值来设置。例如,要将动画持续时间设置为 2 秒,并在每次播放结束后重新开始,可以使用以下代码: ```HTML <div style="animation-name: fade-in; animation-duration: 2s; animation-iteration-count: infinite;"> 这是一个持续淡入动画 </div> ``` 通过 HTML 内联样式 animation,我们可以在不需要额外的 CSS 文件的情况下,直接在 HTML 文件中创建简单的动画效果。但需要注意的是,内联样式的优先级比外部 CSS 样式低,因此在有其他样式定义的情况下,可能需要通过提高内联样式的具体性来确保动画效果生效。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值