7.15 HTMl + CSS 笔记整理(一)

最新推荐文章于 2024-10-07 17:45:00 发布

九天小牛

最新推荐文章于 2024-10-07 17:45:00 发布

阅读量173

点赞数

分类专栏：前端文章标签： html css3

本文链接：https://blog.csdn.net/qq_40678222/article/details/95943659

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文档声明：

<! DOCTYPE html>  /*不区分·大小写*/

微信小程序与html的区别：

wxml与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.边框样式

border-style
值	描述
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	上右下左
margin-top	上外边距
margin-right	右外边距
margin-bottom	下外边距
margin-left	左外边距

盒子的box-sizing属性
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=this
    if (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标签
font-style	normal 正常的（默认）快捷键：fsn+tab键	italic 倾斜的字体快捷键：fs+tab键

文字粗细属性

font-weight
单词取值	bold 加粗	bolder 比加粗还要粗	lighter 细线默认取值
数字取值	100-900的整数值

文字大小属性

font-size
font-size	单位像素 px 快捷键 fz+tab

文字字体属性

font-family
font-family	font-family:"宋体" 快捷键 ff+tab	设置字体的备选方法：font-family:"微软雅黑"，“宋体”

注意：给中英文单独设置字体样式，英文样式必须写在前面。中文可以处理英文字体。 font-family: 写英文字体样式，“写中文字体样式”

文本属性：

文本装饰属性

text-decoration
类型	描述
underline	下划线
line-through	删除线
overline	上划线
none	用于去掉超链接下面的下划线
text-decoration-color:red;	设置下划线的颜色

文本水平对齐属性

text-align 文字水平对齐
center	文字居中	注：在微信小程序中对文字的对齐属性设置要在viewi标签下设置，在text标签下设置无效
left	文字靠左
right	文字靠右

文本缩进属性

text-indent
text-indent	单位em 1em代表缩进一个文字的宽度 px 代表缩进的像素距离

颜色属性

color
取值：	描述
英文单词取值	red green blue
rgb	rgb(255,0,0) 0代表不发光，255最亮三原色表示法只要让红绿蓝l的值都一样就偏灰色，值越大越偏向白色，值越小越偏向黑色。
rgba	在rgb的基础上增加了一个透明度（0到1）1 没有变化，0完全透明
十六进制	# 每两位表示一种颜色，本质是rgb
十六进制缩写	# 每两位的值都一样就可以简写

背景颜色

background-color
取值：	描述
英文单词取值	red green blue
rgb	rgb(255,0,0) 0代表不发光，255最亮三原色表示法只要让红绿蓝l的值都一样就偏灰色，值越大越偏向白色，值越小越偏向黑色。
rgba	在rgb的基础上增加了一个透明度（0到1）1 没有变化，0完全透明
十六进制	# 每两位表示一种颜色，本质是rgb
十六进制缩写	# 每两位的值都一样就可以简写

id选择器

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 / last-child
first-child 作用：选择同级别中的第一个标签注意：不区分标签类型	标签名：first-child
last-child 作用：选择同级别中的最后一个标签注意：不区分标签类型	标签名：last-child

first-of-type / last-of-type
first-of-type 作用：选择同级别中同类型的第一个标签，注意：区分标签类型	标签名:first-of-type
last-of-type 作用：选择同级别中同类型的最后一个标签，注意：区分标签类型	标签名：last-of-type

nth-child(n) / nth-of-type(n)
nth-child(n) 作用：选中同级别中的第n个标签注意：不区分标签类型	标签名:nth-child(n){}
nth-of-type(n) 作用：选中同级别中同类型中的第n个标签注意：区分标签类型	标签名：nth-of-type(n){}

nth-last-child(n) / nth-last-of-type(n)
nth-last-child(n) 作用：选中同级别中的倒数第n个标签注意：不区分标签类型	标签名:nth-last-child(n){}
nth-last-of-type(n) 作用：选中同级别中同类型中倒数第n个标签注意：区分标签类型	标签名：nth-last-of-type(n){}

属性选择器

属性选择器1
描述：根据指定的属性名称找到对应的标签，然后设置属性
标签名称[标签]{ } [attribute]

属性选择器2
描述：找到有指定属性，并且属性的值等于value的标签，然后设置属性
标签名[class=cc]{} [attribute=value] 主要用于区分input标签

属性选择器3
属性的取值是以什么开头	css2 [attribute\|=value] 只能找到形如abc-123,其它的用空格隔开的无法找到 css3 [attribute^=value] 主要是指定取值开头的都能找到
属性取值是一扇门结尾	cs3 [attribute$=value]
属性的取值是否包含某个特定的值	css2 [attribute~=value] 只能找到独立的值（被空格隔开的） css3 [attribute*=value] value取值为非字母(数字, - 等)时要加引号，只要包含就能找到

通配符选择器

通配符选择器
作用：给当前界面所有标签设置属性注意：微信小程序有改动，标签过多时不宜使用	*{属性：值} 微信小程序是 page{属性：值}

CSS继承性

CSS继承性
只有以color / font- / text- / line 开头的属性才可以被继承

CSS优先级

id>类>标签>通配符>继承>浏览器默认

CSS权重计算规则

CSS权重计算规则
首先先计算选择器中id个数，id个数多的优先级就高
如果id个数一样，就看类选择器个数，类选择器个数多的优先级就高
如果id个数，类选择器个数都一样，就看标签个数，标签个数多的优先级就高
如果id，类，标签个数都一样，则写在最后的优先级更高

CSS元素显示模式转换

CSS元素显示模式的转换
display: inline	将元素转换为行内元素
display: block	将元素转换为快级元素
justify-content: space-between;	将元素转换为行内块级元素