第一章
1、HTML超文本标记语言
2、网页
3、网页头部
4、网页标题
5、网页主体
6、DOCTYPE声明3种级别:
(1)Strict 严格类型
(2)Transitional过渡类型
(3)Frameset框架类型
7、网页摘要标签
8、字符编码:
gb2312简体中文
ISO-885901纯英文
big5繁体
UTF-8国际通用编码
9、W3C 万维网联盟
10、标题标签
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
11、段落 12、换行13、水平线
14、字体加粗 15、斜体字 16、注释<!--注释内容--> 17、特殊符号 空格: 大于号:> 小于号:< 引号:" 版权符号:©
18、图像标签
<img src=“图片地址”alt=“图像的替代文字”title=“鼠标悬停提示文字”width=“图片宽度”height=“图片高度”/>
19、链接标签
<a href=“链接地址”target=“目标窗口位置”>链接文本或图像
Target常用取值:_self(自身窗口)和_blank(新建窗口)
20、锚链接
目标位置乙
当前位置甲
21、功能性链接
联系我们
第二章
1、无序列表 Type属性取值:disc实体圆心 square 实体方心 circle空心圆
- 列表项
- 列表项
-
标题
- 内容
第三章
1、表单
第四章
1、定义样式信息
2、链接外部样式表
3、导入外部样式表 4、样式优先级 行内样式>内部样式表>外部样式表 ID选择器>类选择器>标签选择器 5、高级选择器 (1)层次选择器(2)结构伪类选择器(3)属性选择器 第五章 1、 标签 2、字体样式 font-family:字体类型 font-size:字体大小 font-style:字体风格 font-weight:字体粗细 font:设置所有字体属性 3、文本属性 color:文本颜色 text-align:水平对齐方式 left左边 right右边 center居中 justify两端对齐 text-indent:首行缩进 line-height:文本行高 text-decoration:文本装饰 none无 underline下划线 overline上划线 line-through删除线 blink 文本闪烁 vertical-align:垂直对齐方式 文本阴影:text-shadow:color x轴位移 y轴位移 模糊半径; 4、超链接伪类 a:link 单击访问前 a:visited 单击访问后 a:hover 鼠标悬浮上 a:active 鼠标单击未释放 5、网页布局 标签 6、背景属性 background-color:背景颜色 background-image:背景图像 background-repeat: repeat水平,垂直两方向平铺 background-repeat: no-repeat不平铺 background-repeat: repeat-x水平方向平铺 background-repeat: repeat-y垂直方向平铺 background-position背景定位 background-size背景尺寸 7、列表样式 列表项符号list-style-type:none无 disc实心圆 circle空心圆 square实心正方形 decimal数字 列表项图片list-style-image:url(图片路径); 放置列表项list-style-position:inside放置文本以内 outside文本左侧,文本以外 8、CSS3渐变 linear-gradient(渐变方向,颜色1,颜色2, …) 第六章 1、border边框 border-top-color:上边框颜色 border-right-color:右边框颜色 border-bottom-color:下边框颜色 border-left-color:左边框颜色 border-color:边框颜色 border-top-width:上边框粗细 border-right-width:右边框粗细 border-bottom-width:下边框粗细 border-left-width:左边框粗细 border-width:边框粗细 border-top-style:上边框样式 border-right-style:右边框样式 border-bottom-style:下边框样式 border-left-style:左边框样式 border-style:边框样式 border:边框粗细 边框颜色 样式 2、margin外边距 margin-top 上外边距 margin-right 右外边距 margin-bottom 下外边距 margin-left左外边距 margin 边距 3、padding内边距 padding-top 上内边距 padding-right 右内边距 padding-bottom 下内边距 padding-left左内边距 padding 内边距 4、盒子模型总尺寸=边框宽度+内边距+外边距+内容宽度 5、box-sizing盒子模型布局 content-box:默认值 border-box:盒子的宽度或高度等于元素内容的宽度与高度 inherit:此值使元素继承父元素的盒子模型模式 6、圆角边框:border-radius 7、圆形:border-radius:50% (可制作半圆形、扇形) 8、盒子阴影:box-shadow:inset x轴位移 y轴位移 模糊半径 颜色;第七章
1、display属性
display:block 块级元素默认值
display:inline 内联元素默认值
display:none 元素不显示
2、float浮动
float:left元素向左浮动
float:right元素向右浮动
float:none元素不浮动,默认值
3、clear清除浮动
clear:left 在左侧不允许浮动元素
clear:right 在右侧不允许浮动元素
clear:both 在左、右两侧不允许浮动元素
clear:none 默认值,允许浮动元素出现在两侧
4、overflow溢出处理
overflow:visible 默认值,多的内容出现在盒子之外
overflow:hidden 多的内容不可见
overflow:scroll 内容会被修剪,浏览器会出现滚动条
overflow:auto 如果内容被修剪,出现滚动条
第八章
1、position定位
position:static 默认值,没有定位
position:relative 相对定位,以标准流的排版方式为基础,然后使盒子在他原位置进行偏移,相对定位的盒子仍在标准流中
position:absolute 绝对定位,以父元素为基准进行定位,绝对定位会脱离标准流
position:fixed 固定定位,是以浏览器窗口为基准进行定位,当浏览器拖动时他位置依然保持不变
2、z-index 层叠
z-index属性用于调整元素定位时重叠上下的位置
3、透明设置
opacity:x (x值为0-1,值越小越透明) 如:opacity:0.4;
filter:alpha(opacity=x) (x值为0-100,值越小越透明) 如:filter:alpha(opacity=40);
第九章
1、变形函数
transform:[transform-function];
常用的transform-function:
translate():平移函数 scale():缩放函数 rotate():旋转函数 skew():倾斜函数
CSS3 3D变形函数:translate3d():平移函数 scale3d():缩放函数 rotate3d():旋转函数
2D变形
2D位移:translate(x轴,y轴) 2D缩放:scale(x轴,y轴)
2D倾斜:skew(x轴,y轴) 2D旋转:rotate(x轴,y轴)
2、过渡属性
transition:[transition-property transition-duration transition-timing-function
transition-delay]
transition主要包括以下四个属性值:
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需要的时间
transition-timing-function:指定过渡函数
transition-delay:指定过渡开始出现的延迟时间