HTMLCSS的使⽤以及style标签和属性
CSS(Cascading Style Sheets)⽤于渲染HTML元素标签的样式。
CSS可以通过以下⽅式添加到HTML中:
内联样式:在HTML元素中使⽤“sytle”属性
内部样式表:在HTML⽂档头部<head>区域使⽤<style>元素来包含CSS
外部引⽤:使⽤外部CSS⽂件
最好的⽅式是通过外部引⽤CSS⽂件。
本⽂主要讨论以内联样式将CSS添加到HTML中。
内联样式
当特殊的样式需要应⽤到个别元素时,就可以使⽤内联样式。使⽤内联样式的⽅法是在相关的标签中使⽤样式属性。样式属性可以包含任何CSS属性。以下实例显⽰出如何改变段落的颜⾊和⽂本对齐⽅式:
<p >该段落演⽰居中对齐</p>
CSS属性(style属性设置列表)
align-content:在弹性容器内的各项没有占⽤交叉轴上所有可⽤的空间时对齐容器内的各项(垂直);
:定义flex⼦项在flex容器的当前⾏的侧轴(纵轴)⽅向上的对齐⽅式;
:定义flex⼦项单独在侧轴(纵轴)⽅向上的对齐⽅式;
:重置所有属性(除了unicode-bidi属性和direction属性)
:是⼀个简写属性,⽤于设置六个动画属性;
:定义动画多少秒(s)或毫秒(ms)后开始;
:定义是否循环交替反向播放动画;
:设置动画完成⼀个周期需要多少时间;
:规定当动画不播放时(当动画完成时,或当动画有⼀个延迟未开始播放时),要应⽤到元素的样式;
:设置动画应该播放多少次的;
:为@keyframes 动画设置名称;
:指定动画是否正在运⾏或已暂停;
:指定动画将怎么样完成⼀个周期;
:允许您使元素看上去像标准的⽤户界⾯元素;
:设置当元素不⾯向屏幕时是否可见,经常⽤来在旋转元素的时候不显⽰背⾯;
:为元素定义背景属性;
:设置背景图像是否固定或滚动;
:设置背景层的混合模式;
:指定背景绘制区域;
:设置元素的背景颜⾊,元素的背景是指元素的总⼤⼩;
:设置元素的背景图像;
:
指定background-position属性应该是相对位置;
:设置背景图像的起始位置;
:定义元素的底部边框属性;
:定义底部边框颜⾊;
:定义左下⾓边框的形状;
:定义右下⾓边框的形状;
:设置元素底部边框样式;
:设置元素的底部边框宽度;
:设置表格的边框是合并为⼀个单⼀的边框,还是分开显⽰;
:设置元素的四个边框颜⾊,可以有⼀到四个值;
:将图⽚设置为边框;
:
规定边框图像超过边框盒的量;
:设置图像边界重复、拉伸或铺满;
:指定图像的边界向内偏移;
:指定边框要使⽤的图像,如果值设置为"none"或者图像⽆法显⽰,边框样式会被使⽤;:设置图像边界的宽度;
:
:设置⼀个元素的左边框颜⾊;
:设置元素左边框的样式;
:设置元素的左边框的宽度;
:设置圆⾓边框;
:把左边框的属性设置到⼀个声明中;
:设置元素的右边框的颜⾊;
:设置元素右边框的样式;
:设置元素右边框的宽度;
:设置表格中⾏和单元格的边框在横向(⽔平)和纵向(垂直)上的间距;
:设置元素的边框的样式;
:将元素上边框的所有的属性定义到⼀个声明中;
:设置元素顶部边框的颜⾊;
:将元素左上⾓的边框设置为圆⾓边框;
:将元素右上⾓的边框设置为圆⾓边框;
:设置元素的顶部边框样式;
:设置元素顶部边框宽度的;
:设置元素上下左右边框的宽度;
:
设置定位元素相对于底边移动的距离;
:设置box的⼦元素如何对齐;
:规定框元素的⼦元素以什么⽅向来排列;
:指定box的⼦元素是否灵活或固定的⼤⼩;
:使⽤来向柔性分组分配可伸缩元素;
:规定如果列超出了⽗框中的空间,是否要换⾏显⽰,是⼀种新的弹性盒布局属性;
:使⽤来规定box⼦元素显⽰的次序;
:指定⼀个box⼦元素是否应按⽔平或垂直排列
:规定当框⼤于⼦元素的尺⼨,在何处放置⼦元素;
:将表格标题设置在表格的下⽅;
:清除浮动,就是把元素的左侧或右侧的浮动元素看作没有浮动的块状元素来处理;
:
设置元素的形状,剪裁绝对定位或固定定位元素,其实就是检索或设置对象的可视区域;
:设置⽂本的颜⾊,⽂本的颜⾊的颜⾊默认为⿊⾊(#000);
:将元素中的内容拆分成指定的列数(多列布局);
:是⽤在使⽤了columns、column-count等属性设置了多列(多列布局)的元素中,其作⽤是控制元素分成⼏列后,⾥边的内容将怎样分配在各个列中;
:设置元素内容分列(多列布局)后列与列之间的距离;
:将列与列之间的样式、宽度、颜⾊同时定义在⼀个声明中;
:设置列与列之间分割线的颜⾊;
:设置列之间的样式;
:设置列与列之间分割线的宽度;
:设置多列布局中的元素跨多少列;
:设置多列布局中列的宽度;
:把column-width、column-count两个属性定义在⼀个声明中;
:与:before及:after伪元素配合使⽤,使⽤来插⼊⽣成内容;
:设置某个选取器每次出现的计数器增量,默认增量是 1,通常⽤来和counter-reset属性和content属性⼀起使⽤;
:⽤来创建或重置⼀个或多个计数器,通常⽤来和counter-increment属性和content属性⼀起使⽤;
:⽤来设置⿏标光标/指针在指定元素上的形状;
:⽤来实现右对齐效果并改变内联元素块;
:⽤来定义元素应该⽣成的框的类型;
:⽤来设置是否显⽰表格中的空单元格(包括边框和背景);
:使⽤来定义元素的可视效果,通常⽤来定义图⽚的模糊与饱和度;
:使⽤来设置或检索弹性盒模型对象的⼦元素如何分配空间;
:⽤来设置或检索弹性盒伸缩基准值,只能⽤于弹性盒对象的元素,⽤于其它元素不起作⽤;
:使⽤来规定灵活项⽬的⽅向,必须⽤在弹性盒对象的元素,对于其它元素,flex-direction属性不起作⽤;
:使⽤来设置或检索弹性盒模型对象的⼦元素排列⽅式,必须⽤在弹性盒对象的元素,对于其它元素不起作⽤;
:使⽤来设置或检索弹性盒⼦的扩展⽐率,必须⽤在弹性盒对象的元素,不然没有效果;css表格样式
:⽤来设置或检索弹性盒的收缩⽐率,指定弹性盒的收缩规则;
:使⽤来规定flex容器是单⾏或者多⾏,同时横轴的⽅向决定了新⾏堆叠的⽅向;
:定义了元素的浮动;
:⽤来设置⽂本的字体、⼤⼩、风格和⽂字样式的;
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:⽤来设置外边距,包含margin-bottom,margin-left,margin-right,margin-top,可以同时设置上下左右外边距;:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:
:设置⽂本的⽔平对齐⽅式;
:
:定义添加到⽂本的修饰;
:
text-decoration-line:
:设置⽂本下滑线条的样式;
:规定⽂本块中⾸⾏⽂本的缩进;
text-justify:
text-outline:
:指定当⽂本溢出包含它的元素时,应该如何显⽰;
:为⽂本设置阴影;
:定义⽂本中字母的⼤⼩写;
:定义⽂本的换⾏(折⾏)规则;
:
定义⼀个定位元素的上外边距边界与其包含块上边界之间的偏移;:对元素的进⾏2D或者3D转换;
transform-origin:
transform-style:
:定义四个过度属性;
:定义延迟多久开始切换效果;
:定义过渡效果要持续的时间;
:定义应⽤过渡效果的css属性的名称;
:定义过渡效果的速度曲线;
:设置或返回⽂本是否被重写;
:定义⼀个元素的垂直对齐⽅式;
:定义⼀个元素是否是可见的;
:
定义元素内的空⽩该如何处理;
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论