前端css自定义样式库,css定义基础样式

px像素。绝对单位,像素px是相对于显示器屏幕分辨率而言的,是一个虚拟单位。是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI。

2、em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小,因此并不是一个固定的值。

rem是CSS3新增的一个相对单位(rootem,根em),使用rem为元素设定字体大小事,仍然是相对大小但相对的只是HTML根元素。

4、区别:IE无法调用那些使用px作为单位的字体大小,而em和rem可以缩放,rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器已支持rem。

1.定位

2.尺寸

3.浮动

4.最初的布局——table

5.两栏布局(浮动和定位)

6.三栏布局(flex,圣杯和双飞翼:)

7.移动端的布局(媒体查询,flex弹性盒子(),rem适配())

8.grid布局

摘自:

1.flex方式(适用于居中元素元素宽高未知),但是这种方式仅限于body里面只有一个子元素,如果body里面有多个div不行

2.绝对定位和负边距(适用于居中元素的宽高是固定的)

3.CSS3的transform属性(适用于居中元素元素宽高未知)

4.margin:auto

1.transform

transform属性是静态属性。它其实只是一个静态属性,需要配合transition和animation才能展现出动画效果。你可以把它看成是跟left、top等属性一样,只是一个静态样式而已。它可以让元素偏移、伸缩、变形、旋转等。

2.transition,它属性是一个简单的动画属性,非常简单非常容易用。可以说它是animation的简化版本,是给普通做简单网页特效用的。

3.Animation

CSS指层叠样式表(CascadingStyleSheets),样式定义如何显示HTML元素。CSS样式表又分为三种方式,内联样式表、内联引用和外部样式表。下面具体介绍它们的写法:

1.内联样式表:在HTML文档头部head区域使用style元素来包含CSS。

2.内联引用:在HTML元素中使用"style"属性,直接对指定元素应用样式。

3.外部样式表:将样式单独写在CSS文件内,通过引入外部CSS文件来应用样式。这种方法常应用于大型开发中。

-webkit-box、-moz-box、-o-box、-ms-box、box这些都是指同一个属性即box,前面带有-号的是分别针对不同的浏览器的,其中

-webkit-针对Chrome和Safari浏览器

-moz-针对FireFox浏览器

-o-针对Opera浏览器

-ms-针对IE浏览器

也就是说凡是带有这样的前缀的都是这些浏览器的私有属性,只有各自的浏览器内部才有效。之所以这样,是因为有些css属性是带有实验性质的(尤其是css3),各主流浏览器尚未对它完全支持,这样就会使用私有属性来进行试验,而其他浏览器则会自动忽略该属性。因此,网页为了兼容各种不同的浏览器,就会把所有的私有属性都放上去,也包括不带前缀的标准属性。而浏览器的版本众多,很可能低版本的浏览器对某个属性处于试验性质,而高版本则已经完全支持了(也就是说可以不用前缀了),比如box属性就是如此,因此你把其他带有前缀的属性去掉不影响效果。但是,既然是网页,就不会是只有你一个人看的,要是其他用户用的是低版本的浏览器呢?所以,从兼容性角度出发,你最好不要删掉这些属性,除非你能保证其他用户用的浏览器与你的完全一样。

在视频中已经说过了,小程序的设计思想和原生app的设计思想颇为相似,基本的应用单元为页面。当然对于一个页面来说每一个元素的放置位置在哪儿以及显示成什么样子这个是由样式来决定的。我们知道在web开发中样式是在css文件中规定的,叫做层叠样式表(CascadingStyleSheets)。其实在APP中样式的约束也是使用css,在支付宝小程序中也是使用css不过文件的后缀是.acss而且对css3进行了扩充而已。

第一次看到这个东西也能猜到他是干什么用的。在css中我们知道规定大小一般使用像素(px)这个单位。比如显示生活中我们说房子128㎡那这儿的单位是平方米,在开发中需要更加精准的大小就是px像素。像素就非常精细了因为在我们显示屏幕中像素是最小的显示单元。这个道理如果不懂的话就找个LED屏幕仔细看,LED屏幕上一个一个的发光二极管可以想象为像素。

我们知道手机屏幕有大有小,就拿iPhone来说,iPhone6plus比iPhone5要大。那么就说明plus的像素比5要多。对比:

加入有一个160px宽度的红色矩形在这两种手机中的位置如下:

rpx(responsivepixel)可以根据屏幕宽度进行自适应。如何自适应呢?看下边的分析:

看下图:

在模块化开发中我们有时候不得不在页面中使用其他的第三方库的样式,而第三方库的样式是保存在第三方包中的,我们不可能全部复制到我们的.acss文件中,那最好的办法就是导入了。在样式表中导入其他外联样式表。

当然仍旧支持内联样式和class属性制定样式类,如

选择器和css3的保持一致。一般有class=”test”类选择器和id=”test”的id选择器。当然在支付宝小程序的样式中特殊的地方就是:

※.a-或者.am-为前缀的选择器已经被系统占用所以不要使用;

※不能使用属性选择器,例如,以下写法不被支持:

可以通过page元素选择器来设置页面容器的样式,比如页面背景色:

在你想改变页面容器的页面中定义该样式也可以,全局定义也可以,例如我想将test这个页面的页面容器背景设置为蓝色,就可以再pages目录下的test目录下找到test.acss在其中定义page的样式

下节是视图层讲解,如果有任何问题可以再下方给我留言或者发邮件到weiyongqiang@weiyongqiang.com我在收到邮件后会回复。

akjs是一个基于jQuery的一套构建用户界面的前端框架,插件里包含着移动端常用的功能效果以及简单明了的CSS样式库,对IOS和安卓系统的兼容性很完美,并且支持前后端分离开发和路由模式跳页方式。

AKjs前端框架是Andrew.Kim和他的团队一起研发的基于jQuery的一个轻量级前端框架。它是只要懂jQuery的语法很容易上手的框架。该框架里面现在发布了很多移动端常用的功能效果;开发者们使用过程中功能插件也可以自己扩展增加。另一方面,它是相当于一个丰富的组件化UI框架,优点是开发要前后端分离,项目开发过程中后端通过ajax调用数据的机制。

AKjs是一个基于jQuery的一套构建用户界面的前端框架,插件里包含着移动端常用的功能效果以及简单明了的CSS样式库,对IOS和安卓系统的兼容性很完美。支持前后端分离开发和路由模式跳页方式。它与其他重量级框架不同的是AKjs采用了按需引入插件功能以及所有的UI布局中可以让用户自行发挥写页面,因为它提供的CSS库模块化的很细分,让开发者们可以轻松的解决前端的烦恼。

主要目录和主要文件说明:

index.html---走路由模式的DEMO页面(可查看页面切换效果)

html/demo.html---未开启路由模式的DEMO页面

layout/main.html---路由模式中整个界面的布局;(该文件夹和文件名可以在路由管理器文件中配置)

router/---通过路由访问的html界面,该文件夹也在路由管理器文件中配置(里面的所有html文件中最底部都调用功能插件的方法)

js/router.js---路由管理器(该功能切换页面时无刷新跳页的功能,不使用路由功能时可删除该文件。)

html/---该目录是未开启路由模式的演示版文件;

html/js/common.js---未开启路由模式全局方法设置以及功能插件按需引入

js/plugin.js---走路由模式的全局方法设置以及功能插件按需引入

js/data.js---Json数据文件

js/akjs.mobile.js---AKjs手机端主插件(在项目中建议使用压缩版akjs.mobile.min.js)

css/iconfont---图标库(AK图标库地址:)

css/akjs.mobile.css---AKjs全局公共样式库(初始使用本插件的开发者们尽量都看看里面的class命名)

css/akjs.animate.css---AKjs动画库(在animated.css基础上增加了更多的动画效果)

css/style.css---自定义样式文件(引入第三方插件时通过该css文件进行覆盖样式)

注:开发正式项目的时候不要用demo.html里的内容,该文件只是静态演示版用的文件。为了更好的体验效果开发项目的时候请使用index.html。

1、直接更改,比如:

xID.style.display="block";//更改display属性,会覆盖css中的定义。

xID.style.display="";//取消js更改display属性,以css样式为准。

这里的xID,是通过id获取的标签。当然,也可能是通过tagName之类的获取的标签。

这种方式,简单直接。但是要修改大量的样式的时候,不适合。所以,我更推荐第二种方式。

2、更改类名

xID.className="xxyy";

如果有多个类,就用空格隔开。前提,在样式中要有已有类的定义。比如这里的xx和yy类,在css中应该是写好的。

这种方式把所有的样式写在了css文件中,适合更改较多的样式以及炫酷的样式。js就只做一件事情:改类。至于这个类会把标签变成什么样子,交给css吧。

THE END
1.三模板与配置(下)8、WXSS模板样式-全局样式和局部样式 9、全局配置-全局配置文件及常用的配置项 小程序根目录下的app.json文件是全局配置文件。其中常用配置项有: 10、全局配置-小程序窗口的组成部分 11、全局配置-window 11-1、了解 window 节点常用的配置项 11-2、设置导航栏的标题 ...http://www.mynw.cn/network/17574.html
2.小程序开发:必须掌握的HTMLCSS和JavaScript技术css/* 这个div元素将有一个背景颜色 */ #myDiv { background-color: #f0f0f0; } /* 这个p元素将有一个字体大小 */ p { font-size:16px; } ### CSS 小程序特性###1.样式绑定小程序可以使用v-bind样式绑定数据到元素的属性中。 css<!-- 将myData绑定到div元素的class属性 --> ...http://www.shili8.cn/article/detail_20002674969.html
3.在HTML文档中,应用CSS外部样式表的正确位置是Ahead部分B...在HTML文档中,应用CSS外部样式表的正确位置是 A、head部分 B、body部分 C、文档的末尾 D、文档的顶部 点击查看答案进入小程序搜题 你可能喜欢 CAD的圆命令绘制方法包含以下几种( )。 A. 半径 B. 两点 C. 三点 D. 相切、相切、相切 点击查看答案进入小程序搜题 A.2 B.-2 C.-1 D.1 点击查...https://m.ppkao.com/wangke/daan/ec1691bdca144f3db69401eee4276e0b
4.小程序组件使用的时候没有样式是怎么回事?直接粘贴的小程序组件form表单,acss也复制了 ? 请登录后发表内容 3个回答按发布时间降序 lucazhou 2023-02-20 看样式那里加了scoped没有,可能不是没样式,而是有其他样式影响到它了 ? 赞同0 回复1 打赏 lucazhou回复lucazhou 2023-02-20 在开发者工具里查看一下,加载的样式是哪里的 ? 1 回复 打赏 ...http://forum.alipay.com/mini-app/post/114801011
5.weuiwxss首页文档和下载为微信小程序设计的WeUI软件文档 官方下载 极速下载 62.0 安全指数 概览 资讯 博客 问答 安全信息 软件简介 概述 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含 button、cell、dialog、 progress、 toast、article、actionsheet、icon 等各...https://www.oschina.net/p/weui-wxss
6.微信小程序复习全套试题题库(52页)(错 ) 在微信小程序中,AppID又称为小程序ID,是每个小程序的唯一标识。(对 ) 使用微信小程序必须先安装微信。( 对) 微信小程序开发模式类似与vue,同时支持组件化开发。( 对) 微信小程序开发类似于传统的网页开发,微信内部对语言进行了定制。( 对) 微信小程序不支持ES6语法,但支持CSS动画。( 错) 在微信小...https://max.book118.com/html/2021/0725/8027140124003124.shtm
1.微信开发者工具小程序设置字体居中样式微信小程序css篇---字体(Font) 一.字体:font。属性在一个声明中设置所有字体属性。 可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family". font-size和font-family的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话. 1...https://blog.51cto.com/u_16213674/12538572
2.css笔记1 css引入方式 <!DOCTYPE html> Title <!--内嵌式引入--> <!----> <!--a{--> <!--color:rebeccapurple;--> <!--font-size:30px;--> <!--font-weight:900;--> <!--}--> <!--p{--> <!--ackground-color:gold;--> <!--}--> ...https://www.u72.net/daima/nx1d6.html
3.微信小程序5步玩转CSS,微信小程序样式设计不再是难题?即刻启航,编程之旅更有趣 标题:5步玩转CSS,微信小程序样式设计不再是难题? 引言 嗨,小伙伴们!今天我们要聊聊CSS在微信小程序中的应用。是不是觉得CSS听起来就很高大上,其实它就是让你的小程序看起来美美的那个小秘密武器。不用担心,即使你是CSS新手,跟着我们的步伐一步步来,保证让你轻松上手,让小程...https://blog.csdn.net/z_344791576/article/details/143481346
4.微信小程序QQ小程序前端200道面试题及答案(更新中)总结: link和@import都没有放置顺序的要求,但是不同的放置位置可能会造成效果显示的差异。对于link,无论放到哪个位置,都是一边加载数据,一边进行优化,视觉感受很好;而对于@import,放置到哪里,才从哪里开始加载CSS样式,即先加载数据,然后加载样式,如果网速不佳,可能会造成只有数据出来,而样式一点点加载的效果。并且在...https://leheavengame.com/article/64d7982931f3516f1405dd03
5.简单编写小程序的CSS样式教程腾讯云开发者社区我们在完成了小程序的内容编辑后,就需要对样式骨架进行调节与调优,才能写出最符合用户体验的样式内容。 今天,来自FInClip的工程师给大家带来编写css样式的干货教程,一起来看看吧。 一、总体样式 小程序允许在顶层放置一个 app.fxss 文件,里面采用 CSS 语法设置页面样式。这个文件的设置,对所有页面都有效。 https://cloud.tencent.com/developer/article/1928930
6.微信小程序笔记开发模式不同:网页通过浏览器+代码编辑器开发,小程序有自己的开发者账号、开发者工具 体验 通过微信扫描右侧二维码,可体验微信小程序的具体样式和功能介绍; 使用手机微信(6.7.2 及以上版本) 扫码后,弹出的应用就是小程序。 注册开发者 使用浏览器打开https://mp.weixin.qq.com/网址,点击右上角立即注册即可进入到...https://smmcat.cn/?page_id=7595
7.小程序官方文档小程序版作者本人是从事iOS 开发的,但从小程序出来到开放公测,一直都想去研究研究,奈何各种"因素"没有去试(上班有公司项目,下班就去夜跑,哈哈,反正就是借口)到 2016.12.11日,公司也有意做小程序开发,终于定下心来研究一番,在此分享一下。 学习首先肯定去看官方文档,当然只看不行,起码敲一个Demo出来嘛,看着文档还比较...https://www.jianshu.com/p/5a781c989299
8.Taro问题描述 Taro-ui 升级到2.0.2以上,微信小程序编译后css样式全部失效,退回到1.5.4正常 复现步骤 sudo cnpm install --save taro-ui@2.0.2 npx taro build --type weapp --watch 期望行为 升级到2.1.0能正常使用 报错信息 没有报错 系统信息 Taro v1.2.26 Taro CLI 1.https://github.com/NervJS/taro-ui/issues/536
9.微信小程序WXSS样式文件教程JavaScript大厂稀缺内推资格,内招信息,35岁后程序员返聘机会……【 脚本之家合作内推渠道,注册就能看!】WXSS官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/1. WXSSWXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。与CSS 相比,WXSS 扩展的特性有:尺寸单位样式...https://www.jb51.net/article/244953.htm
10.TailwindCSS在小程序中的应用LaravelChina社区pigzzz 搬砖 @ 工地 https://learnku.com/articles/60035
11.云开发WeUI框架这样weui的css样式就被引入到我们的小程序中啦,那我们该如何使用WeUI已经写好的样式呢? Flex布局 前面我们已经了解了如何给wxml文件添加文字、链接、图片等元素和组件,我们希望给这些元素和组件的排版更加结构化,不再是单纯的上下关系,还有左右关系,以及左右上下嵌套的关系,这个时候就需要了解布局方面的知识啦。 https://www.w3cschool.cn/cloudbasehandbook/cloudbasehandbook-xdms387n.html
12.微信小程序WXSS样式文件教程WXSS官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/ 1. WXSS WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。 与CSS 相比,WXSS 扩展的特性有: 尺寸单位 样式导入 1.1. 尺寸单位 rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone...https://www.finclip.com/news/f/68946.html