网络视频直播系统 XML解析 WorldCloud SQLMAP overflow date jsf vector foreach pagination vue官方下载 vue响应式 photoshop视频教程全集下载 jquery点击事件 当前线程等待5秒 iot系统 axure时间选择控件 python网络编程 python环境设置 python测试 python的lambda函数 java正则匹配 java多态 java集合 java运算 java结束线程 java重命名 java集成开发环境 linux如何安装 ILspy js删除数组指定元素 js绝对值 华为线刷工具 电脑基础 怎么设置迅雷为默认下载器 php递归 js刷新当前页 苹果手机不弹出信任 java表白代码 fireworks
当前位置: 首页 > 学习教程  > 编程语言

HTML CSS xmind总结

2021/1/28 23:51:45 文章标签:

HTML CSS HTML 【第1章 初识HTML】 基本骨架 <!DOCTYPE html> <html lang"zh-cn"><head><meta charset"UTF-8"><title></title></head><body></body> </html>- !DOCTYPE&#xff1a;声明…

HTML CSS

HTML

【第1章 初识HTML】

  • 基本骨架
<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>


		- !DOCTYPE:声明文档类型 供浏览器解读
		- html:HTML标签

			- lang:语言,定义语言为英语:en,中文:zh-CN

		- head:文档的头部

			- base
    - 可以统一添加属性
    - <base 属性="属性值">
			- meta:charset
    - 字符集是多个字符的集合。
    - 计算机要准确处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字。
    - utf-8包含全世界所有国家需要用到的字符
    - GBK包含全部中文字符,加入对繁体字的支持
			- meta:name/content
    - 设置关键词:keywords
    - 设置描述信息:description
    - 设置网站作者:author
    - 渲染器:renderer
			- style
    - 定义内容css样式

		- title:文档的标题
		- body:文档的主体

- 超文本标记语言

	- 超文本:超越文本,超链接文本

- 注释:<!--内容-->
### HTML总结 • 【第2章 标签】

- //1.排版标签

	-     - 标题:<h1></h1>,h1最大 h6最小
    - 段落:<p></p>
    - 换行:<br>
    - 水平线:<hr>
    - 分区:div
    - 范围:span

- //2.文本格式化标签

	-     - 加粗:<b></b>  <strong><strong>
    - 倾斜:<i></i>  <em></em>
    - 文本删除线:<s><s>  <del><del>
    - 文本下划线:<u></u>  <ins></ins>
    - 缩小一号:<small></small>
    - 增大一号:<big></big>

- //3.预格式化标签

	-     - <pre></pre>
	-     - 作用:保留编码时的格式

- //4.&符号

	-     - 空格:&nbsp
    - 大于/小于:&gt/&lt
    - 版权:&copy
    - &符号:&amp

- //5.超链接标签

	- 用法

		- <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

	- 锚点:页面内部跳转

		-     - 给标签一个id和值
    - 给a标签href值=#id名称

	- 指定链接目标:href

		-     - 本地html,或者远程url页面地址:跳转
    - 资源文件:下载
    - 图像、表格、音频、视频等都可以添加超链接

	- 弹出方式:target

		-     - _self默认值
    - _blank新窗口打开

- //6.图片标签

	- 用法

		- <img src="图片URL">

	- 指定图片目标:src

		-     - 同一级:目标名称
    - 进一级:文件名/
    - 退一级:../
    - 绝对路径:绝对地址

	- 属性

		-     - 宽:width
    - 高:height
    - 边框:border
    - 图片无法显示的提示:alt
    - 鼠标移上去,显示的内容:title
    - 拖动:draggable(true false)
    - 如果只给一个宽或只给一个高,等比例缩放

- //7.视频和音频标签

	- 视频标签:video

		-     - <video src="视频URL"></video>
    - 兼容:MP4和WebM     MP4和Ogg
    - 如果浏览器不支持导致视频不能播放,video包裹的文字就会显示

	- 音频标签:audio

		-     - <audio src="音频URL"></audio>
    - 兼容:MP3和WAV     MP3和Ogg
    - 如果浏览器不支持导致视频不能播放,audio包裹的文字就会显示

	- 标签:多个资源:source
	- 属性

		-     - 显示控件:centrols
    - 循环播放:loop
    - 自动播放:autoplay
    - 停止播放:paused
    - 是否静音:muted
    - 在播放:played

- //8.emmet语法

	- 作用

		- 快捷生成html相关标签的一种语法,其他软件需要安装

	- 用法

		-     - 生成骨架:!+tab
    - 生成一个标签:标签
    - 生产多个标签:标签*数字
    - 父子关系:父标签>子标签
    - 兄弟关系:兄弟1+兄弟2
    - 有id属性的标签:标签 #id名
    - 有类属性的标签:标签 .类名
    - 生成标签带内容:标签{内容}
    - 计数器:标签名{$}*数字
    - 指定标签的属性:标签[属性名=属性值]

- //9.表格

	- 分层

		- 表格容器/行容器/单元格容器:table/tr/td

	- 标签

		-     - 表头单元格标签:th、文字会居中且加粗
    - 表格标题标签:caption
    - 题头:thead
    - 正文:tbody
    - 脚注:tfoot

	- 属性

		-     - 跨行合并:rowspan
    - 跨列合并:colspan
    - 边框:border
    - 边框颜色:bordercolor
    - 背景颜色:bgcolor
    - 单元格之间的间距:cellspacing默认2像素
    - 单元格内容与边框的间距:cellpadding默认1像素
    - 表格宽度:width
    - 表格高度:height
    - 水平对齐:align="left/center/right"
    - 垂直对齐:valign="top/middle/bottom"

- //10.列表

	- 无序列表:ul

		-     - 实心圆(默认值):disc
    - 圆环:circle
    - 方形:square
    - 不显示标记:none

	- 有序列表:ol

		-     - 数字(默认值):1
    - 字母:a/A
    - 罗马数字:i/I

	- 自定义列表:dl/dt/dd

		-     - dt是小标题、dd是对dt的解释

- //11.表单

	- 基本表单结构

		- <form action="">
	<input name="key" type="text">
	<input type="submit">
</form>

			-     - 功能:提交数据
			-     - 表单域:form
			-     - 输入型控件必须要有name属性和value值
			-     - 表单控件、位于表单域以内

	- 表单控件:input

		-     - 数据的提交去向:action
    - 数据的提交方式:method:get/post
    - 说明标签、用id产生关联:label
		-     - 文本框:text
    - 密码框:password
    - 邮箱框:email
    - 数字框:number,间隔属性:step
    - 搜索框:search
		-     - 文本域:textarea
    - 文件域:file
    - 选择域:select/optgroup/option
    - 隐藏域:hidden
    - 滑块:range
		-     - 提交按钮:submit
    - 单选按钮:radio
    - 复选按钮:checkbox
    - 图片按钮:image
    - 普通按钮:button
    - 清空按钮:reset

	- 属性

		-     - 名称:name
    - 提交的值:value
    - 显示宽度:size
    - 控制输入的字符数:maxlength
    - 最小:min
    - 最大:max
    - 输入为空显示的字符:placeholder
    - 自动获得光标:autofocus
		-     - 必填项:required
    - 只读:readonly
    - 禁用:disabled
    - 单选/多选设置默认选中:checked
    - 正则表达式:pattern
    - 设置上传的文件类型:accept
    - 下拉列表允许多选:multiple
    - 文本域防止拖拽:resize:none;
		-     - name会变成变量名
    - value会变成变量值

	- 表单type类型

		-     - 接收URL:url
    - 接收电话号码:tel

	- 表单属性

		-     - 自动完成:autocomplete、取值 no 和 off
    - 不进行内容验证:novalidate

- //12.内嵌标签

	- 用法

		- <iframe src="引用页面地址" name=""><iframe>

	- 属性

		-     - 引用地址:src
    - 框架名:name
    - 和超链接达成关联:target="name"
    - 边框:frameborder
    - 页面滚动:scrolling

- //13.嵌入对象:object

	- 作用
		- 是用来定义一个嵌入的对象,经常用来在页面中添加多媒体
		- (图像、音频、视频、Java applets、ActiveX、PDF、Flash等

	- 属性
		- 规定对象所属的表单:form(值:form_id)
    	- 指定供对象处理的数据文件的 URL:data(值:URL)
    	- data属性中规定的数据的 MIME 类型:type
    	- 宽:width
    	- 高:height
    	- 名称:name
    	- 规定与对象一同使用的客户端图像映射的 URL:usemap

## CSS

### CSS总结 • 【第1章 CSS简介和选择器】

- CSS简介

	-     - CSS是cascading Style Sheet的缩写
    - CSS全称为"级联样式表",通常又称为“风格样式表"用于网页风格设计

- CSS的三种引入方式

	-     - 行内式:<div style="样式属性:样式值; "></div>
    - 内嵌式:<style></style>内写样式
    - 外链式:<link rel="stylesheet" href="资源地址" rel="和资源的关系">
    - 插入图标:<link rel="icon" href="图标地址" type="image/x-icon">
    - JS里写样式:背景颜色style.backgroundColor="red"

- 选择器

	- 标签选择器:通过标签选择

		- 标签名{ 样式属性:样式值; }

	- 类选择器:通过class选择

		-     - .class值{ 样式属性:样式值; }
    - 不能以数字开头

	- id选择器;通过id选择

		-     - #id名{ 样式属性:样式值; }
    - 不能以数字开头,具有唯一性

	- 通配选择器;通过*选择
	- 交集选择器

		-     - 从多个相同的元素中选择想选择的元素
    - 用法:由两个选择器连接构成, span.类{}   span#id{}

	- 并集选择器

		-     - 同时给各个选择器添加相同的部分样式
    - 用法:通过逗号连接选择器,     选择器1,选择器2{}

	- 层次选择器

		-     - 后代:M  N{}
    - 父子:M>N{}
    - 兄弟:M~N{}当前M下面的所有兄弟N
    - 相邻:M+N{}当前M相邻的N标签

	- 优先级

		-     - 行内式>内嵌式>外链式
    - id选择器>类选择器>标签选择器>通配选择器
    - 最优先:!important

	- 伪类选择器

		-     - 未点击:link
    - 经过:hover
    - 点击时:active
    - 点击后:visited
    - 默认超链接为:蓝色,下划线
    - 匹配所有:any-link

	- 结构伪类选择器

		-     - 为父级的第一个是该子元素的添加样式:first-child
    - 为父级的最后一个是该子元素的添加样式:last-child
    - 选择父级的第N个是该子元素的添加样式:nth-child(1)
(指定:整数)(所有:N)(奇数:2N+1)(偶数:2N)
    - 选择每个该元素,是其父级第一个:frist-of-type
    - 选择每个该元素,是其父级最后一个:last-of-type
    - 选择每个该元素,是其父级第N个:nth-of-type(1)

	- 伪元素选择器

		-     - 为第一个字符添加样式:first-letter
    - 为第一行添加样式:first-line
    - 在最前面添加内容:before
    - 在最后面添加内容:after
### CSS总结 • 【第2章 CSS样式】

- //1.字体样式

	- 大小:font-size

		-     - 默认:inherited,继承父级大小
    - 像素:px          百分比:%          倍数:em
    - 小:x-small         大:large            正常:medium

	- 粗细:font-weight

		-     - 默认:normal,普通
    - 粗体:bold,强调700       自定义:100-900

	- 字体:font-family

		- 格式:"宋体","Arial";

	- 样式:font-style

		-     - 默认:normal
    - 斜体:oblique          带有斜体字体:italic

	- 颜色:color

		-     - 名称:red          16进制的RGB值:#RRGGBB
    - rgba函数:rgba(red,green,blue,透明度)       rgba(255,0,0,0.5)
    - 透明:transparent


	- 字体抗锯齿:font-smoothing

		-     - 默认值:subpixel-antialiased       关闭平滑,用锯齿锋利的边缘:none
    - 光滑的像素级别字体,不是亚像素:antialiased
    - 与灰度反锯齿呈现文本,不是亚像素:-moz-osx- grayscale

	- 复合样式:font

		-     - 基本写法:样式 粗细 大小 字体、粗细 样式 大小 字体
		-     - 必要写法:大小 字体

- //2.背景样式

	- 背景颜色:background-color
	- 背景图片:background-image

		- 路径:url(路径)

	- 背景图片平铺方式:background-repeat

		-     - 默认:repeat,平铺满
    - 水平平铺:repeat-x         垂直平铺:repeat-y         不平铺:no-repeat

	- 背景图片位置:background-position

		-     - 坐标:(x y)          数字:(px/%)
    - 水平:(left/center/right)            垂直:(top/center/bottom)

	- 背景图随滚动条的移动方式:background-attachment

		-     - 按元素进行偏移(默认):scroll
    - 按浏览器进行偏移:fixed

	- 背景图片大小:background-size

		-     - 默认:auto
    - 数字:(px/%)、只给一个值(宽度),第二个为auto
    - 缩放至完全覆盖背景区域:cover
    - 缩放至宽高适应背景区域:contain

	- 复合样式:background

		-     - 基本写法:颜色 图片 平铺 滚动 位置
		-     - 颜色渐变:linear-gradient(to 方位或度数deg,颜色 0%,颜色 100%)

- //3.段落样式

	- 水平对齐方式:text-align

		-     - 默认:left、左对齐
    - 居中:center          右对齐:right          两端对齐:justify
    - 匹配父级:match-parent

	- 垂直对齐方式:vertical-align

		-     - 默认、基线:baseline
    - 顶线:top          中线:middle          底线:bottom

	- 行高:line-height

		-     - 默认:不是固定值,根据当前字体的大小变化
    - 数字:px或scale(相对于原来字体的比例)

	- 首行缩进:text-indent

		- 缩进:font-size的两倍,或2em[em相对单位],永远跟一个字体设置的大小相同

	- 文本装饰:text-decoration

		-     - 默认:none
    - 下划线:underline
    - 删除线:line-through
    - 上划线:overline

	- 文本大小写:text-transform(针对英文)

		-     - 小写:lowercase
    - 大写:uppercase
    - 首字母大写:capitalize

	- 字间距:letter-spacing
	- 词间距:word-spacing(针对英文)
	- 强制折行

		-     - 非常强烈的折行:word-break:break-all;
    - 不是那么强烈的折行:word-wrap:break-word;

	- 内联内容方向:direction

		-     - 左往右:ltr        表示:left-to-right
    - 右往左:rtl        表示:right-to-left

	- 文字排版方式:writing-mode

		-     - 默认值:horizontal-tb             表示:水平-top-bottom
    - 垂直,左至右:vertical-lr         垂直,右至左:vertical-rl

	- 文字描边:-webkit-text-stroke

		-     - 描边宽度:-webkit-text-stroke-width
    - 描边颜色:-webkit-text-stroke-color

	- 处理元素内的空白:white-space

		-     - 默认,忽略:normal
    - 文本不进行换行:nowrap

	- 元素周围的线:outline

		- 宽度:outline-width     颜色:outline-color     样式:outline-style

	- 堆叠顺序:z-index

		- 属性:数字,数字越大,就处于越顶层

	- 不透明度:opacity

		- 属性:从 0.0 (完全透明)到 1.0(完全不透明)

	- 元素的可视效果(滤镜):filter

		-     - 默认:none          默认:initial          继承:inherit
    - 高斯模糊:blur(px)          阴影:drop-shadow(h v 模糊半径 尺寸 颜色)
    - 亮度:brightness(%)       对比度:contrast(%)       透明度:opacity(%)
    - 饱和度:saturate(%)          灰度:grayscale(%)          深褐色:sepia(%)
    - 色相旋转:hue-rotate(deg)      旋转:invert(%)
    - 接收一个XML文件,设置SVG指定描点:url()
    - IE浏览器透明度alpha(opacity=30)、表示opacity(30%)

- //4.边框样式

	- 边框大小:border-width
	- 边框颜色:border-color
	- 圆角边框:border-radius

		-     - 像素:px                  百分比:%
    - 只设置一个角:border-top-left-radius

	- 边框样式:border-style

		-     - 实线:solid
    - 虚线:dashed
    - 点线:dotted
    - 双线:double        

	- 合并边框:border-collapse

		-     - 默认:separated,分开
    - 合并:collapse

	- 单独选择一边:border-top/right/bottom/left
	- 复合样式:border

		- 基本写法:大小 样式 颜色

- //5.列表样式

	- 设置标记:list-style-type

		-     - 无:none              实心圆:disc          空心圆:circle
    - 方形:square

	- 将图像作为标记:list-style-image

		- 路径:url(路径)

	- 设置标记的位置:list-style-position

		-     - 默认:outside,外面           里面:inside

	- 复合样式:list-style

		- 基本写法:标记 图片标记 标记位置

- //6.图片边框:border-image

	- 样式

		-     - 边框图片路径:border-image-source
    - 图片边框向内偏移:border-image-slice
    - 图片边框的宽度:border-image-width
    - 边框图像区域超出边框的量:border-image-outset
    - 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
    - border-image-repeat

	- 复合样式

		-     - 基本写法:路径 内偏移 宽度 超出 平铺
		-     - 默认:none 100% 1 0 stretch

- //7.元素显示类型:display

	- 块级元素:独占一行,可以控制宽高,宽度默认100%

		-     - 默认:block                     不占空间隐藏:disp:none

	- 行内元素:不独占一行,宽高设置无效,宽度默认为内容的宽

		-     - 默认:inline                     不占空间隐藏:disp:none

	- 行内块元素:不独占一行,可以控制宽高,宽度默认为内容的宽

		-     - 默认:inline-block           不占空间隐藏:disp:none

	- 单元格元素:可以使用vertical-align属性

		- 默认:table-cell               不占空间隐藏:disp:none

	- 元素显示和隐藏:visibility

		- 默认:visible,显示          占空间隐藏:hidden

- //8.样式特性

	- 层叠性

		- 后来居上:后面的会替代前面的样式

	- 继承性

		- 子承父业:继承父元素的某些样式

- //9.盒子模型

	- 属性

		-     - 内容宽度:width
    - 内容高度:height
    - 盒子边框:border
    - 自动伸缩:box-sizing:border-box;

	- 内边距:padding

		-     - 自动设置:auto          值:10
    - 行内效果不规范
    - 子元素设置padding,父级盒子不发生变化

	- 外边距:margin

		-     - 自动设置:auto          负值:-10
    - 垂直外边距会合并,取最长
    - 背景颜色会填充到margin以内的区域(不包括margin区域)
    - 顶部塌陷:子级设置顶部会让父级一起移动,给父级设置边框或内边距
    - 或:溢出隐藏;浮动;定位
    - 水平方向控制:margin-inline-start          margin-inline-end
    - 垂直方向控制:margin-block-start          margin-block-end

- //10.盒子阴影:box-shadow

	- 参数1-6

		-     - 水平偏移量,正值向右,负值向左
    - 垂直偏移量,正值向下,负值向上
    - 模糊半径(可选)数值越大越模糊,0表示实心阴影
    - 阴影尺寸(可选)
    - 阴影颜色
    - 内/外阴影(可选)   外部:outset         内部:inset

	- 文字阴影参数1-4:text-shadow

		-     - 水平偏移量
    - 垂直偏移量
    - 模糊半径(可选)
    - 阴影颜色

- //11.浮动和清除

	- 添加浮动:float

		-     - 默认:none,不浮动
    - 左浮动:left          右浮动:right

	- 浮动的影响

		-     - 浮动对显示类型的影响:变成类似inline-block
    - 父子影响:浮动的子级会受到父级影响
    - 兄弟影响:假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,
      那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);
      如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,
      也就是说A的顶部总是和上一个元素的底部对齐。

	- 清除浮动:clear

		-     - 默认:none,允许出现浮动
    - 清除左浮动:left          清除右浮动:right          清除两端浮动:both
    - 方法一,隔墙法,来一个标准流盒子,给边框。
    - 方法二,溢出隐藏:overflow:hidden/auto/scroll
    - 方法三,clearfix:after{content display clear}

	- 了解清除浮动

		- 对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。

- //12.定位:position

	- 静态定位:static

		- 遵循正常文档流,top、right、bottom、left等属性无效

	- 绝对定位:absolute

		-     - 脱离正常文档流,使用left、right、top、bottom等属性进行定位
    - 根据父级进行定位,找设置了定位(除了static)的祖先类元素(父类及以上),直到"body"
    - 不具有margin,

	- 相对定位:relative
		- 遵循正常文档流,使用left、right、top、bottom等属性进行定位

    - 定位时,原本该元素占据的空间位置不变,
	  以“原本该元素”的左上位置为中心点,根据设置的left和top进行位置的偏移。
	  
    - 对象不可层叠

	- 固定定位:fixed
		- 脱离正常文档流,使用left、right、top、bottom等属性以窗口左上角为参考点进行定位

	- 控制溢出部分:overflow
		-     - 默认,可见:visible        不可见:hidden

    - 滚动可见:scroll             自动:auto            继承:inherit
    - 文字溢出显示省略号:text-overflow: ellipsis;

- //13.鼠标指针样式:cursor

	- 属性

		-     - 默认:default
    - 自动:auto
    - 文字:text
    - 加载:wait
    - 十字准星:crosshair
    - 指针:pointer
    - 帮助:help
    - 移到:move
    - 禁止:not-allowed
    - 向北的箭头:n-resize
    - 箭头朝右上:ne-resize
    - 向东的箭头:e-resize
    - 箭头朝右下:se-resize
    - 向南的箭头:s-resize
    - 箭头朝西南:sw-resize
    - 向西的箭头:w-resize
    - 箭头朝西北:nw-resize
    - 放大:zoom-in
    - 缩小:zoom-out

- //14.浏览器私有前缀

	- -webkit:chrome、safar私有属性
-ms:      IE浏览器私有属性
-moz :   firefox浏览器私有属性;
-o:         Opera私有属性。

- //15.tabindex属性

	- 作用

		- 可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序

	- 用法

		-     - 默认:0
    - 加入TAB键序列:1-32767的一个值
    - 排除:-1

- //16.锚点跳转过度效果:scroll-behavior

	- 作用

		- 使锚点跳转有过度效果

	- 属性

		-     - 默认、滚动框立即滚动:auto
    - 实现平稳的滚动:smooth

- //17.转变形态:transform

	- 位移:translate

		-     - 格式:translate(X,Y)       X轴:translateX()         Y轴:translateY()
    - 百分比:偏移自身的百分比

	- 旋转:rotate

		-     - 顺时针:rotate(45deg)
    - 水平:rotateX(deg)           垂直:rotateY(deg)

	- 设置中心点:transform-origin

		-     - 默认:50% 50%,同:center center
    - 方位名词:水平 垂直          像素:px

	- 倾斜:skew

		-     - 格式:skew(Xdeg,Ydeg)
    - 水平:skewX(deg)             垂直:skewY(deg)

	- 放大缩小:scale

		-     - 默认一倍:scale(1,1)          水平:scaleX(0.5)          垂直:scaleY(0.5)

	- 过度效果:transition

		-     - 过渡时间:all 花费时间 何时开始
    - 指定形态:形态 花费时间 何时开始
    - 默认:ease              匀速:linear
    - 加速:ease-in          减速:ease-out          加速然后减速:ease-in-out

	- 复合样式

		-     - 转变形态基本写法:位移在最前
		-     - 过度效果基本写法:形态 花费时间 何时开始 运动曲线

- //18.动画:animation

	- 样式

		-     - 动画名称:animation-name
    - 花费时间:animation-duration
    - 运动曲线:animation-timing-function(默认:ease)
    - 何时开始:animation-delay
    - 播放次数:animation-iteration-count(无限次:infinite)
    - 是否反方向:animation-direction
             正向:normal                          反向:reverse
先正向再反向:alternate          先反向再正向:alternate-reverse
    - 运行或暂停:animation-play-state(运行:running)(暂停:paused)
    - 状态:animation-fill-mode(默认:none )
    - (forwards:播放完后,保持最后一帧)
    - (backwards:播放时,保持第一帧)
    - (both:两个模式都要)

	- 复合样式

		- 基本写法:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向

	- 创建动画

		-     - 关键帧:@keyframes
    - 开始:from          或百分比:0%
    - 结束:to              或百分比:100%
@keyframes 动画名称{
	from {
		background-color: red;
	}

	to {
		background-color: blue;
	}
}

CSS总结 • 【第3章 弹性布局:flex】

  • 主轴方向:flex-direction

    • - 默认、水平从左往右:row          水平从右往左:row-reverse
      
    • 垂直从上往下:column 垂直从下往上:column-reverse
  • 元素在主轴的对齐方式:justify-content

    • - 默认、左对齐:flex-start          右对齐:flex-end          居中:center
      
    • 元素间距相等:space-between 元素两端间距相等:space-around
    • 元素间距与两端间距相等:space-evenly
  • 换行方式:flex-wrap

    • - 默认、不换行:nowrap
      
    • 换行:wrap 逆方向换行:wrap-reverse
  • 对齐div元素:align-items

    • - 默认、填满父级宽高:stretch
      
    • 居中:center 位于开头:flex-start 位于结尾:flex-end
    • 基线:baseline 设置为默认:initial 继承:inherit
  • 多项多轴线的对齐方式,一个轴线没有作用:align-content

    • - 默认、轴线占满整个交叉轴:stretch
      
    • 交叉轴起点:flex-start 交叉轴终点:flex-end 交叉轴中点:center
    • 交叉轴两端,间隔平均分布:space-between
    • 每根轴线两侧的间隔都相等:space-around
  • 弹性布局属性

    • 排列顺序,数值越小。排列越靠前:order

      • 默认:0
    • 放大比列:flex-grow

      • 默认:0
    • 缩小比列:flex-shrink

      • 默认:1
    • 在分配多余空间之前,项目占据的主轴空间:flex-basis

      • 默认:auto

        • 复合样式:flex
    • 复合样式:flex

      • 基本写法:放大比例 缩小比例 占据的主轴空间
    • 单个或多个项目的对齐方式:align-self、可覆盖align-items属性

      • - 默认:auto             填满父级宽高:stretch
        
    • 居中:center 位于开头:flex-start 位于结尾:flex-end

    • 基线:baseline 设置为默认:initial 继承:inherit

CSS总结 • 【第4章 WAI-ARIA无障碍】

  • 作用

    • - 为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范
      
    • 在 WAI-ARIA概述 中对WAI-ARIA及其他支持文档进行了介绍
  • 组成

    • - role:(角色)标识了一个元素的作用
      
    • - aria:描述了与之有关的事物(特征)及其是什么样的(状态)
      
  • role角色

    • - alert:表示警告
      
    • dialog:表示Modal弹出窗
    • presentation:表示描述
    • application:表示应用
    • - button:表示按钮
      
    • raido:表示单选框
    • checkbox:表示复选框
    • combobox:表示表单控件
    • - grid:表示网格
      
    • gridcell:表示单元格
    • group:表示组合并
    • - heading:表示标题、h1
      
    • listbox:表示列表框、select
    • option:表示选项
    • menu:表示菜单
    • menubar:表示菜单栏
    • menuitem:表示菜单项
    • menuitemradio:只能单选的菜单项
    • menuitemcheckbox:可复选的菜单项
  • ARIA属性

    • - aria-activedescendant:当工具栏获取焦点时,它的子控件获取焦点
      
    • aria-atomic:表示区域内容是否完整播报。值为 true 和 false

    • aria-autocomplete:表示表单的自动完成,可选值有 inline 、 list 、both 和 none。

    • aria-busy:表示当前区域的忙碌状态。默认为 false。取值为 true 时,表示该区域正在加载。取值为 error 时,表示该区域验证无效

    • aria-controls:如果指定了不只一个 id , 所有元素会合并在一起共同创建一条单独的描述。

    • aria-dropeffect:表示拖拽效果。可选值有: copy , move , reference , execute , popup , none , 依次表示:复制,移动,参照,执行,弹出以及没有效果。

    • aria-flowto:如果对应的是多个 id , 则辅助技术会让用户去选择、导航到目标元素。

    • aria-grabbed:拖拽中元素的捕获状态。默认为 undefined ,表示元素捕获状态未知。 true 表示元素可以捕获; false 表示不能被捕获。

    • aira-haspopup:true 表示点击的时候会出现菜单或是浮动元素; false 表示没有pop-up效果。

    • aria-label:定义一个字符串值标记当前元素。

    • aria-labelledby:一般用在区域元素上,对应的 id 一般为对应的标题或是标签元素的 id 关系型属性。

    • aria-live:默认为off, 表示不宣布更新;polite 表示只有用户闲时宣布;assertive 表示尽快对用户宣布;rude 表示即时提醒用户,必要的时候甚至中断用户。

    • aria-multiselectable:表示是否可多选。默认为 false , 表示一次只能选择一个项。 true 表示一次可以选择多个项。

    • aria-owns:表示元素所拥有的、值为目标元素 id

    • aria-readonly:表示是否只读。默认为 false , 表示元素值可以被修改。

    • aria-relevant:表示区域内哪些操作行为需要做出反应。additions 新增时, removals 删除时, text 改变时, all 同时使用以上三个属性值。

    • aria-required:表示元素值是否必须,默认为false。

    • aria-secret:表示机密状态

    • aria-sort:排序,值:ascending (↑), descending (↓), none , other

    • aria-valuetext:定义等同于 aria-valuenow 可读的文本

    • aria-level:数值。表示等级

    • aria-posinset:数值。用在设置和获取一个集合内某项的当前位置

    • aria-valuemax:数值,允许的最大值

    • aria-valuemin:数值,允许的最小值

    • aria-valuenow:数值,表示当前值

  • ARIA状态

    • - aria-checked:表示检查的状态,true 表示元素被选择;false 表示元素未被选择;mixed 表示元素同时有选择和未选择状态。
      
    • aria-disabled:表禁用状态, true 表示当前是非激活状态; false 表示清除非激活状态。
    • aria-expanded:表示展开状态,默认为 undefined , 表示当前展开状态未知。其它可选值:true 表示元素是展开的;false 表示元素不是展开的。
    • aria-hidden:可选值为 true 和 false , true 表示元素隐藏(不可见), false 表示元素可见。
    • aria-invalid:表示元素值是否错误的。默认为 false , 表示是OK的,如果为 true , 则表示值验证不通过。
    • aria-pressed:表示按下的状态,默认为 undefined , 表示按下状态未知; true 表示元素往下(按钮按下); false 表示元素抬起; mixed 表示元素同时有按下和没有按下的状态。
    • aria-selected:表示选择状态,默认为 undefined ,表示元素选择状态未知。 true 表示元素已选择;false 表示未被选中。

XMind - Trial Version


本文链接: http://www.dtmao.cc/news_show_650314.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?