web前端技能方法总结(css、js、jquery、html)(14)

简介: web前端技能方法总结(css、js、jquery、html)

CSS常用属性设置
背景
CSS 背景属性用于定义HTML元素的背景效果

background-color
设置元素的背景颜色

body {    background-color:#ff0000;}

background-image
设置元素的背景图像,默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体。

body {    background-image:url('paper.gif');}

background-repeat
设置是否及如何重复背景图像

body {    background-image: url(img/logo.jpg);    background-repeat: no-repeat;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5sQG6dLs-1608793191444)(/QQ截图20200205171029.png)]

文本
color
body {    color:blue;} h1 {    color:#00ff00;} h2 {    color:rgb(255,0,0);}

text-align
设置文本对齐方式,center(居中),left(左对齐),right(右对齐)

body {    text-align:center;} h1 {    text-align:right;} h2 {    text-align:right;}

text-decoration
规定添加到文本的修饰,属性值:none、underline、overline、line-through

1)underline

对文本添加下划线,与HTML的u元素相同。

2)overline

对文本添加上划线。

3)line-through

对文本添加中划线,与HTML中的s和 strike 元素相同。

4)none

关闭原本应用到元素上的所有装饰。

h3 {    text-decoration:underline;}

text-indent
设置文本首行缩进

p.ident2 {    text-indent: 2em;}

em一个相对值,例如页面的文本大小为17px,则2em就为17px*2

字体
font-family
文本字体,该属性设置文本的字体。

font-family属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体,所以尽量将不常见的字体靠前,将最常见的字体放置在最后,作为替补。

注意:

1)只有当字体名中含有空格或#、$之类的符号时(如 New York),才需要在font-family声明中加引号:

body {    font-family: "arial black";}

2)多个字体系列是用一个逗号分隔指明

/ 靠前的字体先生效 /p{   font-family: 微软雅黑,黑体,"agency fb";}

font-size
文本大小

body {    font-size: 50px;  /字体大小50px/}#span1 {    font-size: 25px;  /字体大小25px/}

font-style
字体风格,该属性最常用于规定斜体文本。 属性值:normal、italic、oblique

1)normal:文本正常显示;

2)italic:文本斜体显示;

3)oblique:文本倾斜显示,oblique是将文字强制倾斜。

说明:一般情况下,字体有粗体、斜体、下划线、删除线等诸多属性,但是不是所有字体都具有这些属性,一些不常用字体可能只有正常体,若使用italic属性则没有效果,所以需要oblique属性强制倾斜。

font-weight
字体加粗,该属性设置文本的粗细。

bold:可以将文本设置为粗体。

100 ~ 900:为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别。

100 对应最细的字体变形;

900 对应最粗的字体变形;

400 等价于 normal;

700 等价于 bold。

相关文章
|
5月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
5月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
5月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
5月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
5月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
5月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
|
9月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
274 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
343 1