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。

相关文章
|
12天前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
29 1
|
12天前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
21 0
|
13天前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
8天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
12天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
2天前
|
Web App开发 JavaScript 前端开发
使用Node.js和Express框架构建Web服务器
使用Node.js和Express框架构建Web服务器
|
5天前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域,选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular,探讨它们各自的特点、开发场景、优缺点,并提供选择框架的建议。
23 6
|
3天前
|
前端开发 JavaScript 微服务
拥抱微前端架构:构建未来Web应用的新思路
随着互联网技术的发展,Web应用日益复杂,传统单体架构已难以满足需求。微前端架构将大型应用拆分为独立模块,便于管理和迭代。其核心优势包括技术栈无关性、独立部署、团队协作及易于扩展。实施时需定义边界、选用框架(如Single-spa)、管理状态通信,并解决样式隔离和安全性等问题。尽管存在挑战,微前端架构凭借灵活性和高效性,有望成为未来Web开发的主流趋势。
|
8天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
12天前
|
Web App开发 JavaScript 前端开发
构建高效Web应用:Node.js与Express框架的深度整合
【9月更文挑战第28天】在现代Web开发领域,Node.js和Express框架的结合已成为打造高性能、易扩展应用的黄金组合。本文将深入探讨如何利用这一技术栈优化Web应用架构,提供具体实践指导,并分析其性能提升的内在机制。通过代码示例,我们将展示从基础搭建到高级功能的实现过程,旨在为开发者提供一条清晰的学习路径,以实现技术升级和项目效率的双重提升。
26 3