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。

相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
23天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
102 1
|
28天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
41 3
|
1月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
41 4
|
1月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
55 0
html5+three.js公路开车小游戏源码
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
101 6
|
前端开发 JavaScript
web前端技能方法总结(css、js、jquery、html)(30)
web前端技能方法总结(css、js、jquery、html)
144 0
|
前端开发 JavaScript
web前端技能方法总结(css、js、jquery、html)(29)
web前端技能方法总结(css、js、jquery、html)
129 0
|
前端开发 JavaScript
web前端技能方法总结(css、js、jquery、html)(27)
web前端技能方法总结(css、js、jquery、html)
118 0
|
前端开发 JavaScript
web前端技能方法总结(css、js、jquery、html)(25)
web前端技能方法总结(css、js、jquery、html)
135 0