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。

相关文章
|
1天前
|
存储 前端开发 JavaScript
JavaScript数据类型归纳,架构师花费近一年时间整理出来的前端核心知识
JavaScript数据类型归纳,架构师花费近一年时间整理出来的前端核心知识
JavaScript数据类型归纳,架构师花费近一年时间整理出来的前端核心知识
|
1天前
|
JavaScript 前端开发
前端 JS 经典:ES6 和 CommonJs 用法
前端 JS 经典:ES6 和 CommonJs 用法
6 0
|
1天前
|
JavaScript 前端开发
前端 JS 经典:宏任务、微任务、事件循环(EventLoop)
前端 JS 经典:宏任务、微任务、事件循环(EventLoop)
8 0
|
1天前
|
JSON 前端开发 JavaScript
前端 JS 经典:JSON 对象
前端 JS 经典:JSON 对象
7 0
|
1天前
|
前端开发 JavaScript
前端 JS 经典:递归
前端 JS 经典:递归
5 0
|
1天前
|
前端开发 JavaScript
前端 JS 经典:i,i++,++i区别
前端 JS 经典:i,i++,++i区别
5 0
|
1天前
|
前端开发 JavaScript
前端 JS 经典:Math 常用方法汇总
前端 JS 经典:Math 常用方法汇总
5 0
|
1天前
|
前端开发 JavaScript
JavaScript:this-关键字,2024中级前端开发面试解答
JavaScript:this-关键字,2024中级前端开发面试解答
|
1天前
|
前端开发 JavaScript
前端 JS 经典:let、const、var 区别
前端 JS 经典:let、const、var 区别
5 0
|
1天前
|
前端开发 JavaScript
前端 JS 经典:apply、call、bind
前端 JS 经典:apply、call、bind
5 0