HTML5和CSS3归纳(仅供自己记录复习基础点)
持续慢慢补充中…
前言
w3c 手册中文官网 :添加链接描述
随时查阅
一、HTML5
1.常用新标签
常用如header、nav、footer、article、section、aside、datalist、fieldset。详细可查看w3c官网HTML5新元素
- header:定义文档的页眉
- nav:定义导航链接的部分
- footer:定义文档或节的页脚
- article:定义文档内的文章
- section:定义文档中的节(section、区段) (用法自由)
- aside:定义其所处内容之外的内容(如侧边栏)
通俗来说,<header></header>
就可理解为<div class="header"></div>
,其他同理。语义更好。
- datalist:标签定义选项列表。请与 input 元素配合使用该元素
<!--通过list和id来建立连接-->
<input type="text" value="" list="id值">
<datalist id="id值">
<option></option>
<option></option>
<option></option>
</datalist>
效果如下:
-
fieldset:元素可将表单内的相关元素分组、打包。 legend 搭配使用
<fieldset> <legend>边框标题</legend> 表单内容 </fieldset>
如下图:
补充一个曾经做的一个项目所用到比较多的一个新标签
- figure: 定义自包含内容,比如图示、图表、照片、代码清单等。
<figcaption>
是定义 <figure>
元素的标题。
2.新增的input属性
1. 新增的type属性值
类型 | 使用示例 | 含义 |
---|---|---|
<input type="email"> | 输入邮箱格式 | |
tel | <input type="tel"> | 输入手机号码格式 |
url | <input type="url"> | 输入url格式 |
number | <input type="number"> | 输入数字格式 |
search | <input type="search"> | 搜索框(体现语义化) |
range | <input type="range"> | 自由拖动滑块 |
time | <input type="time"> | 小时分钟 |
date | <input type="date"> | 年月日 |
datetime | <input type="datetime"> | 时间 |
month | <input type="month"> | 月年 |
week | <input type="week"> | 星期 年 |
实例展示:
- email
- search
- range
- time和date
- month 、week和color
其余的推荐查阅w3c
2.input常用新属性
属性 | 用法 | 含义 |
---|---|---|
placeholder | <input type="text" placeholder="请输入用户名"> | 占位符,提供可描述输入字段预期值的提示信息 |
autofocus* | <input type="text" autofocus> | 规定当页面加载时 input 元素应该自动获得焦点 |
multiple | <input type="file" multiple> | 多文件上传,比如图片 |
autocomplete | <input type="text" autocomplete="off"> | 规定表单是否应该启用自动完成功能 (on/off),on记录已经输入的值 |
required | <input type="text" required> | 必填项,不能为空(加了后那一栏为必填) |
accesskey | <input type="text" accesskey="s"> | 规定激活(使元素获得焦点)元素的快捷键 |
- palceholder
-
autocomplete
<input type="text" autocomplete="off" name="名字"> <!--只写 autocomplete时等于autocomplete="on"--> <input type="submit"/>
on,记录已经输入的值。
- autocomplete属性需要提交按钮
- 这个表单必须给他名字name
-
required
给昵称一栏加了required属性,这项不能为空
<input type="text" required>
补充,html5兼容性问题,IE可能看不出效果,上图为火狐浏览器。
3.多媒体标签
- embed:定义嵌入的内容(用得较多,但要兼容处理)
- audio:播放音频
- video:播放视频
-
<embed></embed>
引入网上视频(
embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。网站本地不提倡放视频,视频数据内存很大,而网站容量是有限的,网站上传到服务器里,是很贵的。
可以把视频上传到优酷或其他视频网站,然后再调用优酷的地址就可以
点分享,然后复制代码,复制到html文件里就可以了(有广告…)
问题:兼容性问题 -
audio
<audio src="音频地址"></audio>
audio属性:
- autoplay: 自动播放 (默认不自动播放)
- controls:是否显示播放控件(默认不显示)
- loop : 循环播放 loop =“2”: 循环2次 (loop或者 loop = “-1” 无限循环)
兼容性解决:
<audio controls="">
<!-- 通过source标签指定多格式音频文件 -->
<source src="音频地址的路径.mp3" >
<source src="音频地址的路径.wav" >
<source src="音频地址的路径.ogg" >
</audio>
-
vedio
<vedio src="视频地址的路径"></audio>
vedio的属性:
- autoplay:自动播放
- controls:是否显示播放控件(默认不显示)
- loop: 循环播放
- width: 设置播放窗口宽度
- height: 设置播放窗口高度
由于版权等原因,不同的浏览器可支持播放的格式是不一样的,如下图供参考
兼容性处理和上面audio一样做法即可。
二、CSS3
1.文本新增属性
1.文本颜色半透明
color: rgba(r,g,b,a) <!--多了个a 是alpha 透明的意思 取值范围 0~1之间
例如:
color: rgba(0,0,0,0.3)
2.文字阴影:text-shadow
text-shadow: h-shadow v-shadow blur color;
例如:
属性值:
前两项是必须写的。 后两项可以选写。
实例:凹凸文字
<head>
<meta charset="utf-8">
<style>
body {
background-color: #ccc;
}
div {
color: #ccc;
font: 700 80px "微软雅黑";
}
div:first-child {
/* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; <!--往下是黑色,往上是白色-->
}
div:last-child {
/* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; <!--往上是黑色,往下是白色-->
}
</style>
</head>
<body>
<div>我是凸起的文字</div>
<div>我是凹下的文字</div>
</body>
2.新增背景属性
1.背景透明
与文本颜色半透明类似
background: rgba(0,0,0,0.3);
最后一个参数是alpha 透明度 取值范围 0~1之间
注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不收影响。
2.背景缩放:background-size
通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下:
- px或百分比(设置百分比时,参照盒子的宽高)
- cover:会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。我们平时用的cover最多
- contain: 自动调整缩放比例,保证图片始终完整显示在背景区域。
后两个用来铺满整个盒子,
- cover:等比例缩放,高度和宽度都满足盒子时,停止。溢出部分隐藏
- contain:等比例缩放,高度和宽度其中一个满足盒子时,停止。
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */
比如我有一张精灵图大小是400x400,里面的小图标的大小比我要放的页面布局的大小要大,就可以通过background-size:200px 200px;
缩放,然后就可以放置入页面给定的大小中。同时,找小图标在精灵图中位置时,设置background-position
也要根据前面的background-size
缩小,比如前面400x400改为200x200,那么横纵坐标需要减半。原来图片比例是多少,缩放的最好也是相同比例。
3.多背景图片
- 一个元素(盒子)可以设置多重背景图像。
- 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。
- 为了避免背景色将图像盖住,背景色通常都定义在最后一组上
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px ,
url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;
3.新增选择器
1.新增伪类选择器(2种)
(1)结构伪类选择器
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) : 匹配属于其父元素的第 n 个子元素,不论元素的类型
- :nth-last-child(n) :选择器匹配属于其父元素的倒数第 n 个子元素,不论元素的类型
- :nth-of-type(n):选择器匹配属于其元素的第n个同级兄弟元素
- :nth-last-of-type(n):选择器匹配属于其元素的倒数第 n 个兄弟元素,不论元素的类型
n 可以是数字、关键词或公式
实例:
选择第一个、第二个
选取第2、4、6…个(偶数项),奇数项括号里写odd即可。
(2)目标伪类选择器
:target 目标伪类选择器 :选择器可用于选取当前活动的目标元素
:target {
color: red;
font-size: 30px;
}
2.新增了伪元素选择器
-
::first-letter:文本的第一个单词或字(如中文、日文、韩文等)
-
::first-line:文本第一行;
p::first-line{ font-size:14px; }
-
::selection: 可改变选中文本的样式;(比如鼠标选中多行文本时,选中的样式会改变)
-
::before和 ::after :在元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用
例如:(::before同理)
<!--CSS部分-->
div::after{
content:"你好";
}
<!--代码部分-->
<body>
<div>
<p>今年</p>
</div>
</body>
结果:
4.盒模型
1.CSS3盒模型:box-sizing:
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box(以W3C推荐的以前的盒模型)、border-box(新模型),这样我们计算盒子大小的方式就发生了改变。
- box-sizing: content-box: 盒子大小为 width + padding + border
(content-box:此值为其默认值,其让元素维持W3C的标准Box Mode) - box-sizing: border-box: 盒子大小为 width,就是说 padding 和 border 是包含到width里面的
(设置这种模型后,设置padding和border盒子大小都没变化,因为这两者都包含到以前就设置的width里去了。)
在给元素加边框、间距、边距等,不希望破坏原始设置的宽度,保证页面的稳固。就会设置盒模型box-sizing: border-box;
div {
width: 400px; /*包含了padding和border*/
height: 200px;
padding: 10px; /*盒子大小不变,不撑开*/
box-sizing: border-box; /* padding border 不撑开盒子 */
/* margin: 10px; */ /*margin还是生效*/
/* 盒子大小为 width 就是说 padding 和 border 是包含到width里面的 */
}
2.圆角边框
radius 半径(距离)
border-radius: 左上角 右上角 右下角 左下角;
border-radius: 10px; /* 一个数值表示4个角都是相同的 10px 的弧度 */
border-radius: 50%; /* 50% 取宽度和高度 一半 则会变成一个圆形 */
border-radius: 10px 40px; /* 左上角和右下角是10px 右上角和左下角40 (对角线) */
border-radius: 10px 40px 80px; /* 左上角 10 右上角和左下角 40 右下角80 */
border-radius: 10px 40px 80px 100px; /* 左上角 10 右上角 40 右下角80 100 */
3.盒子阴影:box-shadow
6个值,前两个必写(与文字阴影相比多了阴影尺寸spread和外部阴影inset)
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
默认是外阴影(outset) 但是不可以写这个属性值,不写就已经是外阴影,写了阴影就没了。想要内阴影就写inset.
注意: 文字阴影和盒子阴影都像多背景图片一样,逗号隔开,可写多个。
box-shadow: 5px 5px 10px 16px rgba(255,255,255,0.8) inset,
5px 4px 10px rgba(0,0,0,0.3);
5.过渡:transition
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
在CSS3里使用transition可以实现补间动画(过渡效果),并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指),就可以实现平滑的过渡,为了方便演示采用hover切换两种状态。
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化,还是用逗号隔开。
transition: all 0.6s; /* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */
属性:
- transition-property:规定应用过渡的 CSS 属性的名称。
- transition-duration:定义过渡效果花费的时间。单位必须写(s或者ms),默认是 0s。
- transition-timing-function:规定过渡效果的时间曲线。默认是 “ease”。
- transition-delay:规定过渡效果何时开始。默认是 0s。
时间曲线:
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
/* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */
}
div:hover { /* 鼠标经过盒子,我们的宽度变为600,高度300*/
width: 600px;
height: 300px;
}
6.变形:transform
transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果。
1. 2D变形
(1)移动:translate(x, y)
可以改变元素的位置,x、y可为负值(平移)。
- translate(x,y):水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)
- translateX(x):仅水平方向移动(X轴移动)
- translateY(y):仅垂直方向移动(Y轴移动)
可以写px也可以写%,百分比是自己的宽高为基准。
transform: translate(50px,50px);
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
.box {
width: 499.9999px;
height: 400px;
background: pink;
position: absolute;
left:50%; /* 父级盒子的50% */
top:50%;
transform:translate(-50%,-50%); /* 走的自己的一半 */
}
以前在写盒子居中对齐时(绝对定位小节的补充),用得是margin-left: 自己宽度一半;
但是写死了,如果宽度变了就得改。而用transform:translate(-50%)就可以了,注意是走的自己的一半。
(2)缩放:scale(x, y)
可以对元素进行水平和垂直方向的缩放。
- scale(X,Y):使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
- scaleX(x):元素仅水平方向缩放(X轴缩放)
- scaleY(y):元素仅垂直方向缩放(Y轴缩放)
scale()的取值默认为1,0-1缩小;>1放大。
transform:scale(0.8,1);
该元素在水平方向上缩小了20%,垂直方向上不缩放。
(3)旋转:rotate(deg)
可以对元素进行旋转,正值为顺时针,负值为逆时针; 注意单位是 deg 度数 。
transform:rotate(45deg);
(4调整元素转换变形的原点:transform-origin
div { /* 改变元素原点到左上角,然后进行顺时旋转45度 */
transform-origin: left top;
transform: rotate(45deg);
}
如果是4个角,可以用 left top这些,如果想要精确的位置, 可以用px像素修改变形原点。
div { /* 改变元素原点到x为10,y为10 然后进行顺时旋转45度 */
transform-origin: 10px 10px;
transform: rotate(45deg);
}
(5)倾斜:skew(deg, deg)
可以使元素按一定的角度进行倾斜,可为负值,第二个参数不写默认为0。
transform:skew(30deg,0deg);
元素水平方向上倾斜30度,垂直方向保持不变。
2. 3D变形
(1)立体旋转:rotateX(deg)、rotateY(deg)、rotateZ(deg)
1.rotateX(deg)
就是沿着x立体旋转。
img {
transition:all 0.5s ease 0s;
}
img:hover {
transform:rotateX(180deg);
}
2.rotateY(deg)
沿着y轴进行旋转。同retateX(deg)
3.rotateZ(deg)
沿着z轴进行旋转。同上。 z轴旋转其实类似绕图片中间点旋转。
(2)透视:perspective
显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的。
透视可以将一个2D平面,在转换的过程当中,呈现3D效果。
- 透视原理: 近大远小 。
- 浏览器透视:把近大远小的所有图像,透视在屏幕上。
- perspective:视距,表示视点距离屏幕的长短。如下图的d。
(视点,用于模拟透视效果时人眼的位置)
近大远小: 视距越大,效果越不明显。视距越小越明显。
给父级加
父级 {
perspective: 1000px; /* 视距,距离,眼镜距离屏幕的距离*/
persp
}
(3)移动:translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)
translate3d(x,y,z)
注意:
其中,x和y可以是长度值,也可以是百分比,百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和;z只能设置长度值。
方向是坐标轴方向。
transform: translate3d(100px,100px,300px)
比如设置一个文字鼠标放上后,往上升的效果。
由y轴往下的50px处,回到0处。
补充:
backface-visibility
定义当元素不面向屏幕时是否可见。
backface-visibility: visible | hidden;
7.动画:animation
动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
语法格式:
/* 前两个必写*/
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
- animation-name:动画名称,自定义
- animation-duration:动画完成一个周期的时间,再次注意必须带单位
- animation-timing-function:动画的速度曲线
- animation-delay:动画何时开始,带单位
- animation-iteration-count: infinite; 无限循环播放
- animation-play-state: paused; 暂停动画
- animation-direction: normal | reverse | alternate |alternate-reverse
详细更多查阅w3c
关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意。
/* 定义动画:@keyframes 动画名称{} 定义动画*/
@keyframes 动画名称 {
from { /* 0% */
开始位置;
}
to { /* 100% */
结束
}
}
/* 调用动画 */
元素{
animation: 动画名称 2s;
}
多组动画可以讲from{ } to{ } 修改为百分比。0% { } 25%{ } 50% { } 75% { } 100{ }
例子:
@keyframes go { /* 定义动画 */
from {
transform: translateX(0);
}
to {
transform: translateX(600px);
}
div { /* 调用动画 */
width: 100px;
height: 100px;
background-color: pink;
animation: go 2s ease infinite; /* 一般我们写得前两个就可以了*/
}
8.伸缩布局
传统布局,如下图三个div每个盒子给1/3宽,容易出现一个问题,当加上margin,超出父盒子宽时最后一个不够位置会掉下去。而解决又要去修改宽度。很容易出问题。
而伸缩布局呢
1.父级盒子添加flex布局 display: flex;
2.子盒子添加份数 例如flex: 1;
而且加margin值也不会出现上面说的情况。
另外可以在第一个盒子给定宽度 width值,然后剩下的盒子划分份数。拉伸浏览器窗口时,固定的不变,剩下的按比例缩。
1.伸缩布局
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。
- 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向。
- 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的。
- 方向:默认主轴从左向右,侧轴默认从上到下。
主轴和侧轴并不是固定不变的,通过flex-direction可以互换。
Flex布局的语法规范经过几年发生了很大的变化,也给Flexbox的使用带来一定的局限性,因为语法规范版本众多,浏览器支持不一致,致使Flexbox布局使用不多
2.各属性详解
(1)flex子项目在主轴的缩放比例。不指定flex属性,则不参与伸缩分配
- min-width:最小值; min-width: 280px ; 拉伸浏览器,最小宽度不能小于 280px
- max-width: 最大宽度; max-width: 1280px;
div {
min-width: 400px;
max-width: 1280px;
}
(2)flex-direction:调整主轴方向(默认为水平方向)
通过设置主轴方向,可以实现竖着排。
flex-direction: row; /* 水平排列,默认*/
flex-direction: column; /* 垂直排列*/
(3) justify-content:调整主轴对齐(水平对齐)
子盒子如何在父盒子里面水平对齐
属性值 | 描述 | 白话翻译理解 |
---|---|---|
flex-start | 默认值。项目位于容器的开头。 | 让子元素从父容器的开头开始排序但是盒子顺序不变 |
flex-end | 项目位于容器的结尾。 | 让子元素从父容器的后面开始排序但是盒子顺序不变 |
center | 项目位于容器的中心。 | 让子元素在父容器中间显示 |
space-between | 项目位于各行之间留有空白的容器内。 | 左右的盒子贴近父盒子,中间的平均分布空白间距 |
space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | 相当于给每个盒子添加了左右margin外边距 |
(4)align-items:调整侧轴对齐(垂直对齐)
子盒子如何在父盒子里面垂直对齐(单行)
属性值 | 描述 | 白话翻译理解 |
---|---|---|
flex-start | 项目位于容器的开头。 | 垂直对齐开始位置 上对齐 |
flex-end | 项目位于容器的结尾。 | 垂直对齐结束位置 底对齐 |
center | 项目位于容器的中心。 | 垂直居中 |
stretch | 默认值。项目被拉伸以适应容器。 | 让子元素的高度拉伸适用父容器(子元素不给高度的前提下) |
(5)flex-wrap:是否换行
当我们子盒子内容宽度多于父盒子的时候如何处理
属性值 | 描述 |
---|---|
nowrap | 默认值。规定灵活的项目不拆行或不拆列。 不换行,则 收缩(压缩) 显示 强制一行内显示 |
wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。 |
(6)flex-flow:是flex-direction、flex-wrap的简写形式
flex-flow: 排列方向 换不换行;
flex-flow: flex-direction flex-wrap;
(7)align-content:堆栈(由flex-wrap产生的独立行)多行垂直对齐方式
align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。
必须对父元素设置自由盒属性display:flex;
,并且设置排列方式为横向排列flex-direction: row;并且设置换行,flex-wrap: wrap;这样这个属性的设置才会起作用。也就是 flex-flow: row wrap;
属性值 | 描述 |
---|---|
stretch | 默认值。项目被拉伸以适应容器。 |
center | 项目位于容器的中心。 |
flex-start | 项目位于容器的开头。 |
flex-end | 项目位于容器的结尾。 |
space-between | 项目位于各行之间留有空白的容器内。 |
space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
(8)order:控制子项目的排列顺序,正序方式排序,从小到大
用css 来控制盒子的前后顺序。 用order 就可以
用整数值来定义排列顺序,数值小的排在前面。可以为负值。 默认值是0。
order: -1;
此知识点重在理解,要明确找出主轴、侧轴、方向,各属性对应的属性值。(移动端会再涉及)
(9)justify-content:在弹性盒对象的
设置行内同一主轴上,有空白间隔时。除了设置float:right外,还可以设置css3的flex布局。
display {
flex;
justify-content: space-between;
}