本文专注于探讨如何在HTML中使用内联样式，通过style属性将CSS应用到个别元素，介绍align-content, align-items, align-self等样式属性，并强调内联样式在特殊样式需求时的适用场景。"
126852354,9634053,Seata分布式事务解析：原理与流程,"['分布式', '后端', '数据库', 'java', '开发语言']
CSS(Cascading Style Sheets)用于渲染HTML元素标签的样式。
CSS可以通过以下方式添加到HTML中：
- 内联样式：在HTML元素中使用“sytle”属性
- 内部样式表：在HTML文档头部<head>区域使用<style>元素来包含CSS
- 外部引用：使用外部CSS文件
最好的方式是通过外部引用CSS文件。
本文主要讨论以内联样式将CSS添加到HTML中。
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。以下实例显示出如何改变段落的颜色和文本对齐方式：
<p style="color:green;text-align:center;">该段落演示居中对齐</p>CSS属性(style属性设置列表)
- align-content:在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)；
- align-items：定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式；
- align-self：定义flex子项单独在侧轴（纵轴）方向上的对齐方式；
- all：重置所有属性（除了unicode-bidi属性和direction属性）
- animation：是一个简写属性，用于设置六个动画属性；
- animation-delay：定义动画多少秒（s）或毫秒（ms）后开始；
- animation-direction：定义是否循环交替反向播放动画；
- animation-duration：设置动画完成一个周期需要多少时间；
- animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式；
- animation-iteration-count：设置动画应该播放多少次的；
- animation-name：为@keyframes 动画设置名称；
- animation-play-state：指定动画是否正在运行或已暂停；
- animation-timing-function：指定动画将怎么样完成一个周期；
- appearance：允许您使元素看上去像标准的用户界面元素；
- backface-visibility：设置当元素不面向屏幕时是否可见，经常用来在旋转元素的时候不显示背面；
- background：为元素定义背景属性；
- background-attachment：设置背景图像是否固定或滚动；
- background-blend-mode：设置背景层的混合模式；
- background-clip：指定背景绘制区域；
- background-color：设置元素的背景颜色，元素的背景是指元素的总大小；
- background-image：设置元素的背景图像；
- background-origin：指定background-position属性应该是相对位置；
- background-position：设置背景图像的起始位置；
- background-repeat：设置是否重复背景图像和如何重复背景图像；
- background-size：指定背景图片的大小；
- border：同时定义多个边框属性，是一个缩写属性；
- border-bottom：定义元素的底部边框属性；
- border-bottom-color：定义底部边框颜色；
- border-bottom-left-radius：定义左下角边框的形状；
- border-bottom-right-radius：定义右下角边框的形状；
- border-bottom-style：设置元素底部边框样式；
最低0.47元/天 解锁文章
扫一扫
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
