此文章转发于 “前前前端小飞”
HTML编辑文本,通过CSS的设置属性赋予HTML网页样式,改变文字类型、背景以及插入图片、视频、音频等,使网页更具生动。
CSS中的文本属性
font-weight: bold; //改变字体粗细 normal //正常字体、标准字体 font-style:oblique; //字体风格(oblique倾斜) text-decoration: underline; //文字修饰(underline 下划线) overline; (上划线) line-throug; (删除线) none; (取消文字下划线)
text-indent: 20px; //文本首行缩进 text-align: right /center /left //文本对齐 text-transform: uppercase; //文本转换(uppercase小写转化为大写) lowercase; (大写转化为小写)
text-shadow: 0 2px 5px red; //文本阴影 letter-spacing: 20px; //字间距 word-spacing: 20px; //词间距(英文单词) line-height:20px; //两个文本中的距离、行距 复制代码
练习一个首字母大写如下:
my english is very good
通过CSS更改如下:
p:first-letter{ text-transform: uppercase; } 复制代码
CSS中的div属性
在HTML中新建一个div
background-image:url("img/图片路径"); //插入图片 background-repeat:no-repeat; //平铺方式(不平铺) “repeat-x”; (横向X轴平铺) “repeat-y”; (纵向Y轴平铺) 复制代码在CSS中实现图片平铺:【background-repeat:属性值】
在CSS中实现图片:不平铺
.box1{ width: 100px; height: 100px; border: dashed red; background-image: url(../img/picter/ai2003.jpg); background-repeat: no-repeat; } 复制代码
在CSS中实现图片X轴平铺:
.box1{ width: 500px; height: 300px; border: dashed red; //画布边框 background-size: 100px; //图片大小 contain; //上下填充画布 cover; //完全填充画布,影响图片原貌
background-image: url(../img/picter/ai2003.jpg);
background-repeat: repeat-x;
} 复制代码
在CSS中实现图片的位置: 【background-position:属性值】
.box1{ width: 500px; height: 100px; border: dashed red; background-size: 100px; background-image: url(../img/picter/logo_db.png); //图片路径 background-repeat: no-repeat; //不平铺 background-position: center center; //图片居中 bottom lift ; //左下角 top right; // 右上角 50px 50px ; //自定义位置 } 复制代码
我目前是在职前端开发,如果你现在也想学习前端开发技术,在入门学习前端的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,你都可以申请加入我所在的前端学习交流裙:421374697。里面聚集了一些正在自学前端的初学者,转行者,初阶者,我这里也有我做前端技术这段时间整理的一些前端面试题,前端开发源码教程,PDF文档书籍教程,需要的话都可以找裙猪获取。
CSS中的背景附件:【background-attachment:属性值】
background-attachment:fixed; //固定图片位置
综合上诉结构,可以* 综合简写属性 颜色 地址 平铺方式 是否固定 (不需要可以不写) 位置