7.15 HTMl + CSS 笔记整理(一)
文档声明:
<! DOCTYPE html> /*不区分·大小写*/
微信小程序与html的区别:
小程序 | html | 说明 |
<view>
|
<div>
|
默认样式 display:block |
<text>
|
<h1>...<h6> <p> <span>
|
<text> 具有长按选中的属性
|
<icon>
|
<i class="icon"></i>
|
<icon> 可以直接用微信组件默认的图标。
|
input type="text">
|
<input />
|
|
<input type="checkbox">
|
<checkbox-group> <checkbox /> </checkbox-group>
|
|
<input type="radio">
|
<radio-group> <radio /> </radio-group>
|
边框:border
- 创建圆角 border-radius (四个参数默认顺时针,上右下左,参数缺省是对角线对应的关系)
border-top-left-radius: border-top-right-radius: border-bottom-right-radius: border-bottom-left-radius:
- 向框添加一个或多个阴影 box-shadow
值 | 说明 |
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
i箭头 | 可选。将外部阴影 (outset) 改为内部阴影。 |
3.设置边框分开写
border-top | 设置上边框 | border-xxx:边框大小 边框样式(style) |
border-right | 设置右边框 | |
border-bottom | 设置下边框 | |
border-left | 设置左边框 |
4. 设置边框连写
border-width | 上 右 下 左 |
border-style | |
border-color |
5.边框样式
值 | 描述 |
---|---|
none | 定义无边框。 |
hidden | 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 |
dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
solid | 定义实线。 |
double | 定义双线。双线的宽度等于 border-width 的值。 |
groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
inherit | 规定应该从父元素继承边框样式。 |
6.内边距
padding 内边距,边框与内容的距离 |
|
padding |
上 右 下 左 |
padding-top | 上内边距 |
padding-right |
右内边距 |
padding-bottom |
下内边距 |
padding-left | 左内边距 |
7.外边距
margin |
上 右 下 左 |
margin-top | 上外边距 |
margin-right | 右外边距 |
margin-bottom | 下外边距 |
margin-left | 左外边距 |
content-box |
元素宽高 = 边框+内边距+内容宽高 |
border-box |
元素宽高 = width属性 |
箭头的css代码:
<view class="hd" style='transform: rotate({{transformrotate}}deg)' bindtap='rotate'></view>
.hd {content: "";height: 16rpx;width: 16rpx;border-width: 4rpx 4rpx 0 0;border-color: red;border-style: solid;position: absolute;top: 20rpx;left: 130rpx;
}
data: {transformrotate: -45,},rotate:function(e){var that=thisif (that.data.transformrotate == -45){that.setData({transformrotate:135})}else{that.setData({transformrotate:-45})}},
文字属性:
简写/缩写模式:font: style weight size family;
注:size 一定要写在family前面,且size和family必须写在style,weight前面
文字样式属性
font-style | normal 正常的(默认)快捷键:fsn+tab键 | italic 倾斜的字体 快捷键:fs+tab键 |
文字粗细属性
单词取值 | bold 加粗 | bolder 比加粗还要粗 |
lighter 细线 默认取值 |
数字取值 | 100-900的整数值 |
文字大小属性
font-size |
单位像素 px 快捷键 fz+tab |
文字字体属性
font-family |
font-family:"宋体" 快捷键 ff+tab |
设置字体的备选方法:font-family:"微软雅黑",“宋体” |
注意: 给中英文单独设置字体样式,英文样式必须写在前面。中文可以处理英文字体。 font-family: 写英文字体样式,“写中文字体样式”
文本属性:
文本装饰属性
类型 | 描述 |
underline |
下划线 |
line-through |
删除线 |
overline |
上划线 |
none |
用于去掉超链接下面的下划线 |
text-decoration-color:red; |
设置下划线的颜色 |
文本水平对齐属性
center | 文字居中 | 注:在微信小程序中对文字的对齐属性设置要在viewi标签下设置,在text标签下设置无效 |
left | 文字靠左 | |
right | 文字靠右 |
文本缩进属性
text-indent |
单位em 1em代表缩进一个文字的宽度 px 代表缩进的像素距离 |
颜色属性
取值: | 描述 |
英文单词取值 | red green blue |
rgb |
rgb(255,0,0) 0代表不发光,255最亮 三原色表示法 只要让红绿蓝l的值都一样就偏灰色,值越大越偏向白色,值越小越偏向黑色。 |
rgba | 在rgb的基础上增加了一个透明度(0到1)1 没有变化,0完全透明 |
十六进制 | # 每两位表示一种颜色,本质是rgb |
十六进制缩写 | # 每两位的值都一样就可以简写 |
背景颜色
取值: | 描述 |
英文单词取值 | red green blue |
rgb |
rgb(255,0,0) 0代表不发光,255最亮 三原色表示法 只要让红绿蓝l的值都一样就偏灰色,值越大越偏向白色,值越小越偏向黑色。 |
rgba | 在rgb的基础上增加了一个透明度(0到1)1 没有变化,0完全透明 |
十六进制 | # 每两位表示一种颜色,本质是rgb |
十六进制缩写 | # 每两位的值都一样就可以简写 |
id选择器
id名必须唯一 | 使用方法:#+id名 |
类选择器
类名可以相同 |
使用方法: .类名 一个标签可以绑定多个类名 <view class="类名1 类名2"> 注意:使用类选择器,一定要在类名前加点 |
后代选择器
格式 | 示例 |
标签1 标签2 标签3{ 属性:值 } |
view text{ 属性:值} 设置view标签下所有text标签下的样式 |
子元素选择器
格式 | 样式 |
标签1>标签2>标签3{属性:值} id>标签{属性:值} |
view>text{属性:值} 只将view标签下的text标签的元素改变 |
注:子元素选择器不仅可以使用标签名称,也可以使用其他选择器的名称。
交集选择器
选择器1选择器2选择器3{属性:值} | 注:选择器之间没有空格 了解即可 |
作用:给所有选择器中的标签,相交的那一部分标签设置属性/yan |
并集选择器
选择器1,选择器2,选择器3{属性:值} | |
作用:给所有选择器中的标签设置属性 |
兄弟选择器
选择器1+选择器2{属性:值} |
作用:给指定选择器后面紧跟的选择器中的标签设置属性/样式 注意是紧邻 |
选择器1~选择器2{属性:值} |
作用:给指定选择器后面的所有选择器中的所有标签设置属性/样式 |
序列选择器
first-child 作用:选择同级别中的第一个标签 注意:不区分标签类型 | 标签名:first-child |
last-child 作用:选择同级别中的最后一个标签 注意:不区分标签类型 | 标签名:last-child |
first-of-type 作用:选择同级别中同类型的第一个标签,注意:区分标签类型 | 标签名:first-of-type |
last-of-type 作用:选择同级别中同类型的最后一个标签,注意:区分标签类型 | 标签名:last-of-type |
nth-child(n) 作用:选中同级别中的第n个标签 注意:不区分标签类型 | 标签名:nth-child(n){} |
nth-of-type(n) 作用:选中同级别中同类型中的第n个标签 注意:区分标签类型 | 标签名:nth-of-type(n){} |
nth-last-child(n) 作用:选中同级别中的倒数第n个标签 注意:不区分标签类型 | 标签名:nth-last-child(n){} |
nth-last-of-type(n) 作用:选中同级别中同类型中倒数第n个标签 注意:区分标签类型 | 标签名:nth-last-of-type(n){} |
属性选择器
描述:根据指定的属性名称找到对应的标签,然后设置属性 | |
标签名称[标签]{ } [attribute] |
描述:找到有指定属性,并且属性的值等于value的标签,然后设置属性 |
标签名[class=cc]{} [attribute=value] 主要用于区分input标签 |
属性的取值是以什么开头 |
css2 [attribute|=value] 只能找到形如abc-123,其它的用空格隔开的无法找到 css3 [attribute^=value] 主要是指定取值开头的都能找到 |
属性取值是一扇门结尾 | cs3 [attribute$=value] |
属性的取值是否包含某个特定的值 |
css2 [attribute~=value] 只能找到独立的值(被空格隔开的) css3 [attribute*=value] value取值为非字母(数字, - 等)时要加引号 ,只要包含就能找到 |
通配符选择器
作用:给当前界面所有标签设置属性 注意:微信小程序有改动,标签过多时不宜使用 |
*{属性:值} 微信小程序是 page{属性:值} |
CSS继承性
只有以color / font- / text- / line 开头的属性才可以被继承 |
CSS优先级
CSS优先级
id>类>标签>通配符>继承>浏览器默认
CSS权重计算规则
首先先计算选择器中id个数,id个数多的优先级就高 |
如果id个数一样,就看类选择器个数,类选择器个数多的优先级就高 |
如果id个数,类选择器个数都一样,就看标签个数,标签个数多的优先级就高 |
如果id,类,标签个数都一样,则写在最后的优先级更高 |
CSS元素显示模式转换
display: inline |
将元素转换为行内元素 |
display: block |
将元素转换为快级元素 |
justify-content: space-between; |
将元素转换为行内块级元素 |
7.15 HTMl + CSS 笔记整理(一)相关推荐
- CSS 笔记整理(三)
(1)CSS 布局之 Overflow CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条,其中overflow 属性只工作于指定高度的块元素上,overflow属性有 ...
- SpringBoot笔记整理(一)
SpringBoot笔记整理(一) SpringBoot笔记整理(二) SpringBoot笔记整理(三) SpringBoot笔记整理(四) 1.使用Spring Initializer快速创建Sp ...
- HTML CSS 学习整理
HTML CSS 学习整理 码字不易,转载请务必注明原文出处.常用单位整理,不断学习,后期的新增笔记会继续加到文章上方 点击链接后退页面: 回到上一个网页 这是一个简单的跳转页面操作 --修改plac ...
- 移动web——学习笔记整理
目录 Day1 00.流式布局 00.1目标 00.2目录 01.移动端浏览器 02.视口(layout viewport) 03.meta视口标签(单标签) 04.物理像素&物理像素比 05 ...
- 千锋 Vue 详细笔记整理
视频笔记是根据B站 千锋 涛哥 - SpringBoot+vue+前后端分离项目<锋迷商城>实战课-完结版 进行整理的 笔记可上 gitee仓库 自取 千锋 Vue 笔记整理 一.vue ...
- javascript学习笔记整理
javascript从零到精通笔记整理 js写在哪 - css写在哪- 内联(行内):属性形式:style="样式属性:样式属性值"- 内部:style双标签,包裹css样式- 外 ...
- HTML笔记整理2 -- HTML标签
HTML笔记整理2 -- HTML标签 HTML注释 关于标签(标记) 标记的分类 标记的属性 重要的标记 ``标签 ``标签 meta标签中的 --- 字符编码问题 常用标记 常用标记-1---We ...
- 《繁凡的深度学习笔记》前言、目录大纲 一文让你完全弄懂深度学习所有基础(DL笔记整理系列)
<繁凡的深度学习笔记>前言.目录大纲 (DL笔记整理系列) 一文弄懂深度学习所有基础 ! 3043331995@qq.com https://fanfansann.blog.csdn.ne ...
- 一文让你完全弄懂逻辑回归和分类问题实战《繁凡的深度学习笔记》第 3 章 分类问题与信息论基础(上)(DL笔记整理系列)
好吧,只好拆分为上下两篇发布了>_< 终于肝出来了,今天就是除夕夜了,祝大家新快乐!^q^ <繁凡的深度学习笔记>第 3 章 分类问题与信息论基础 (上)(逻辑回归.Softm ...
最新文章
- 猪流感来了,我们做好准备了吗
- 深度学习笔记第三门课 结构化机器学习项目 第一周 机器学习(ML)策略(1)...
- GDCM:gdcm::Image的测试程序
- python制作中秋贺卡_中秋节到了,送你一个Python做的Crossin牌“月饼”
- 比对数组指定列php,指定列的数组
- 《WinForm开发系列之控件篇》Item12 DateTimePicker(暂无)
- 在Mac上保存网页上的图片
- xbee模块和单片机_XBee® ZigBee 模块使用方法
- 揭秘Apple Watch心率监测技术
- Difference between Static video and Single image ?静态视频和单张图像的区别
- 电脑CPU和内存占用过高
- ISO26262-道路车辆功能安全
- 电脑不显示无线连接网络连接服务器,连接wifi后显示无internet访问权限怎么解决...
- 蜂窝六边形的六边形消除高分秘籍
- 日本知名动画公司东映动画加入 The Sandbox 元宇宙
- 信贷业务全流程22个环节
- Qt九宫格,只拉伸背景的指定位置单位像素,做到背景长度适配
- 为什么给黑洞拍照需要这么长时间?
- 第三部分:成交动力学之十大成交激素——8、稀缺性
- ip地址解析成国家、城市、iso code或者按语言获取城市名
热门文章
- ElasticSearch预警服务-Watcher详解-Schedule配置
- 【Python】ix,loc,iloc的区别
- 开发跨平台应用解决方案-uniapp 真心不错,支持一波
- 关于出现Not an editor command: Bundle ‘**/*.vim‘的解决方案【转】
- centos 解决“不在 sudoers 文件中。此事将被报告“的问题
- 如何在Linux中符号链接文件? [关闭]
- Win11如何提高游戏性能?Win11提升游戏性能的方法
- win11任务栏怎么更换颜色 win11任务栏更换颜色的设置方法
- Win11如何使用多桌面功能?Win11使用多桌面功能的方法
- roslaunch与param使用