欢迎使用品优购代码规范, 这个是我借鉴京东前端代码规范,组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范,
以下规范是团队基本约定的内容,必须严格遵循。
HTML规范
基于 W3C、苹果开发者 等官方文档,并结合团队业务和开发过程中总结的规范约定,让页面HTML代码更具语义性。
图片规范
了解各种图片格式特性,根据特性制定图片规范,包括但不限于图片的质量约定、图片引入方式、图片合并处理等,旨在从图片层面优化页面性能。
CSS规范
统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格,提供常用媒体查询语句和浏览器私有属性引用,并从业务层面统一规范常用模块的引用。
命名规范
从 目录
、图片
、HTML/CSS文件
、ClassName
的命名等层面约定规范团队的命名习惯,增强团队代码的可读性。
HTML文件必须加上 DOCTYPE 声明,并统一使用 HTML5 的文档声明:
HTML5标准模版
HTML5标准模版
推荐使用属性值 cmn-Hans-CN
(简体, 中国大陆),但是考虑浏览器和操作系统的兼容性,目前仍然使用 zh-CN
属性值
更多地区语言参考:
zh-SG 中文 (简体, 新加坡) 对应 cmn-Hans-SG 普通话 (简体, 新加坡) zh-HK 中文 (繁体, 香港) 对应 cmn-Hant-HK 普通话 (繁体, 香港) zh-MO 中文 (繁体, 澳门) 对应 cmn-Hant-MO 普通话 (繁体, 澳门) zh-TW 中文 (繁体, 台湾) 对应 cmn-Hant-TW 普通话 (繁体, 台湾)
一般情况下统一使用 “UTF-8” 编码
由于历史原因,有些业务可能会使用 “GBK” 编码
请尽量统一写成标准的 “UTF-8”,不要写成 “utf-8” 或 “utf8” 或 “UTF8”。根据 IETF对UTF-8的定义,其编码标准的写法是 “UTF-8”;而 UTF8 或 utf8 的写法只是出现在某些编程系统中,如 .NET framework 的类 System.Text.Encoding 中的一个属性名就叫 UTF8。
HTML代码大小写
HTML标签名、类名、标签属性和大部分属性值统一用小写
推荐:
不推荐:
不需要为 CSS、JS 指定类型属性,HTML5 中默认已包含
推荐:
不推荐:
元素属性值使用双引号语法
元素属性值可以写上的都写上
推荐:
不推荐:
文本可以和字符引用混合出现。这种方法可以用来转义在文本中不能合法出现的字符。
在 HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符,浏览器会将它们作为标签解析,若要正确显示,在 HTML 源代码中使用字符实体
推荐:
more>>
不推荐:
more>>
统一使用四个空格进行代码缩进,使得各编辑器表现一致(各编辑器有相关配置)
元素嵌套规范,每个块状元素独立一行,内联元素可选
推荐:
不推荐:
段落元素与标题元素只能嵌套内联元素
推荐:
不推荐:
内容图多以商品图等照片类图片形式存在,颜色较为丰富,文件体积较大
优先考虑 JPEG 格式,条件允许的话优先考虑 WebP 格式
尽量不使用PNG格式,PNG8 色位太低,PNG24 压缩率低,文件体积大
PC平台单张的图片的大小不应大于 200KB。
背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片
PNG 与 GIF 格式,优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
图像颜色比较简单的,如纯色块线条图标,优先考虑使用 PNG8 格式,避免不使用 JPEG 格式
图像颜色丰富而且图片文件不太大的(40KB 以下)或有半透明效果的优先考虑 PNG24 格式
图像颜色丰富而且文件比较大的(40KB - 200KB)优先考虑 JPEG 格式
条件允许的,优先考虑 WebP 代替 PNG 和 JPEG 格式
样式书写一般有两种:一种是紧凑格式 (Compact)
.jdc{ display: block;width: 50px;}
一种是展开格式(Expanded)
.jdc { display: block; width: 50px; }
团队约定
统一使用展开格式书写样式
样式选择器,属性名,属性值关键字全部使用小写字母书写,属性字符串允许使用大小写。
/* 推荐 */ .jdc{ display:block; } /* 不推荐 */ .JDC{ DISPLAY:BLOCK; }
尽量少用通用选择器 *
不使用 ID 选择器
不使用无具体语义定义的标签选择器
/* 推荐 */ .jdc {} .jdc li {} .jdc li p{} /* 不推荐 */ *{} #jdc {} .jdc div{}
统一使用四个空格进行代码缩进,使得各编辑器表现一致(各编辑器有相关配置)
.jdc { width: 100%; height: 100%; }
每个属性声明末尾都要加分号;
.jdc { width: 100%; height: 100%; }
左括号与类名之间一个空格,冒号与属性值之间一个空格
推荐:
.jdc { width: 100%; }
不推荐:
.jdc{ width:100%; }
逗号分隔的取值,逗号之后一个空格
推荐:
.jdc { box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc; }
不推荐:
.jdc { box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc; }
为单个css选择器或新申明开启新行
推荐:
.jdc, .jdc_logo, .jdc_hd { color: #ff0; } .nav { color: #fff; }
不推荐:
.jdc,jdc_logo,.jdc_hd { color: #ff0; }.nav{ color: #fff; }
颜色值 rgb()
rgba()
hsl()
hsla()
rect()
中不需有空格,且取值不要带有不必要的 0
推荐:
.jdc { color: rgba(255,255,255,.5); }
不推荐:
.jdc { color: rgba( 255, 255, 255, 0.5 ); }
属性值十六进制数值能用简写的尽量用简写
推荐:
.jdc { color: #fff; }
不推荐:
.jdc { color: #ffffff; }
不要为 0
指明单位
推荐:
.jdc { margin: 0 10px; }
不推荐:
.jdc { margin: 0px 10px; }
css属性值需要用到引号时,统一使用单引号
/* 推荐 */ .jdc { font-family: 'Hiragino Sans GB'; } /* 不推荐 */ .jdc { font-family: "Hiragino Sans GB"; }
建议遵循以下顺序:
布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)
自身属性:width / height / margin / padding / border / background
文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; background: rgba(0,0,0,.5); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
mozilla官方属性顺序推荐
由历史原因及个人习惯引起的 DOM 结构、命名不统一,导致不同成员在维护同一页面时,效率低下,迭代、维护成本极高。
项目文件夹:shoping
样式文件夹:css
脚本文件夹:js
样式类图片文件夹:img
产品类图片文件夹: upload
字体类文件夹: fonts
ClassName的命名应该尽量精短、明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用下划线 “_” 连接
.nav_top
常用命名推荐
注意:ad、banner、gg、guanggao 等有机会和广告挂勾的不建议直接用来做ClassName,因为有些浏览器插件(Chrome的广告拦截插件等)会直接过滤这些类名,因此
这种广告的英文或拼音类名不应该出现
另外,敏感不和谐字眼也不应该出现,如:
...
ClassName | 含义 |
---|---|
about | 关于 |
account | 账户 |
arrow | 箭头图标 |
article | 文章 |
aside | 边栏 |
audio | 音频 |
avatar | 头像 |
bg,background | 背景 |
bar | 栏(工具类) |
branding | 品牌化 |
crumb,breadcrumbs | 面包屑 |
btn,button | 按钮 |
caption | 标题,说明 |
category | 分类 |
chart | 图表 |
clearfix | 清除浮动 |
close | 关闭 |
col,column | 列 |
comment | 评论 |
community | 社区 |
container | 容器 |
content | 内容 |
copyright | 版权 |
current | 当前态,选中态 |
default | 默认 |
description | 描述 |
details | 细节 |
disabled | 不可用 |
entry | 文章,博文 |
error | 错误 |
even | 偶数,常用于多行列表或表格中 |
fail | 失败(提示) |
feature | 专题 |
fewer | 收起 |
field | 用于表单的输入区域 |
figure | 图 |
filter | 筛选 |
first | 第一个,常用于列表中 |
footer | 页脚 |
forum | 论坛 |
gallery | 画廊 |
group | 模块,清除浮动 |
header | 页头 |
help | 帮助 |
hide | 隐藏 |
hightlight | 高亮 |
home | 主页 |
icon | 图标 |
info,information | 信息 |
last | 最后一个,常用于列表中 |
links | 链接 |
login | 登录 |
logout | 退出 |
logo | 标志 |
main | 主体 |
menu | 菜单 |
meta | 作者、更新时间等信息栏,一般位于标题之下 |
module | 模块 |
more | 更多(展开) |
msg,message | 消息 |
nav,navigation | 导航 |
next | 下一页 |
nub | 小块 |
odd | 奇数,常用于多行列表或表格中 |
off | 鼠标离开 |
on | 鼠标移过 |
output | 输出 |
pagination | 分页 |
pop,popup | 弹窗 |
preview | 预览 |
previous | 上一页 |
primary | 主要 |
progress | 进度条 |
promotion | 促销 |
rcommd,recommendations | 推荐 |
reg,register | 注册 |
save | 保存 |
search | 搜索 |
secondary | 次要 |
section | 区块 |
selected | 已选 |
share | 分享 |
show | 显示 |
sidebar | 边栏,侧栏 |
slide | 幻灯片,图片切换 |
sort | 排序 |
sub | 次级的,子级的 |
submit | 提交 |
subscribe | 订阅 |
subtitle | 副标题 |
success | 成功(提示) |
summary | 摘要 |
tab | 标签页 |
table | 表格 |
txt,text | 文本 |
thumbnail | 缩略图 |
time | 时间 |
tips | 提示 |
title | 标题 |
video | 视频 |
wrap | 容器,包,一般用于最外层 |
wrapper | 容器,包,一般用于最外层 |
常用模块类名命名
名称 | 说明 |
---|---|
快捷导航栏 | shortcut |
头部 | header |
标志 | logo |
购物车 | shopcar |
搜索 | search |
热点词 | hotwords |
导航 | nav |
导航左侧 | dropdown 包含.dd .dt |
导航右侧 | navitems |
页面底部 | footer |
页面底部服务模块 | mod_service |
页面底部帮助模块 | mod_help |
页面底部版权模块 | mod_copyright |
SEO(Search Engine Optimization) 汉译为搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
SEO的目的是对网站进行深度的优化,从而帮助网站获取免费的流量,进而在搜索引擎上提升网站的排名,提高网站的知名度。
页面必须有三个标签用来符合SEO优化。
三大标签:title(标题)、description(网站说明)、keywords(关键字)
title具有不可替代性,是我们内页的第一个重要标签,是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议:网站名(产品名)—网站的介绍(尽量不要超过30个汉字)
京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物!
小米商城-小米5s、红米Note4、小米MIX、小米笔记本官方网站
简要说明我们网站主要是做什么的。
我们提倡,description作为网站总体业务和主题概括,多采用“我们是...."、“我们提供...”、xxx网作为...“、”电话:010....“之类语句。
例如:
keywords是页面关键词,是搜索引擎的关注点之一。
keywords最好限制为6~8个关键词,关键词之间用英文逗号隔开,采用关键词1,关键词2的形式。
例如:
对于我们前端人员来说,我们只需要准备好这三个标签,具体里面的内容,有专门的SEO人员准备。
logo里面首先放一个 h1 标签,目的是为了提权,告诉搜索引擎,这个地方很重要
h1里面再放一个 链接 ,可以返回首页的,把logo的背景图片给链接即可
为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来
方法1:text-indent 移到盒子外面 (text-indent: -999px) ,然后 overflow: hidden; ,淘宝的做法
方法2:直接给 font-size:0; 就看不到文字了,京东的做法
最后给链接一个 title 属性,这样鼠标放到logo上就可以看到提示文字了
.logo { position: absolute; top: 25px; width: 171px; height: 61px; } .logo a { display: block; width: 171px; height: 61px; background: url(../images/logo.png) no-repeat; /* font-size: 0; 京东的做法 */ /* 淘宝的做法 */ /* text-indent: -9999px; overflow: hidden; */ color: transparent; }
盒子阴影
文字阴影 你是阴影,我是火影
粘性定位
HTML标签是由尖括号包围的关键字
HTML标签通常是成对出现的,例如和,我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签
有些特殊的标签必须是当标签(极少情况),列如
,我们称之为单标签(在下面的笔记中双标签我只写一个并且不会有尖括号,只有单标签的时候才会写尖括号)
cs 客户端 服务端 bs 浏览器 服务端 ps:bs本质也是cs
浏览器朝服务端发送请求
服务端接受请求(eg:请求百度页面)
服务端返回相应的响应(eg:返回百度页面)
浏览器接收相应,根据特定的规则渲染页面然后展示给用户看
包含关系
并列关系
grandpa
grandpa
grandpa
Document
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签
HTML中的注释以""结束
在vs里面注释的快捷键为crtl+/
在HTML页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代
特殊字符 | 描述 | 字符的代码 |
---|---|---|
空格符 | ||
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
¥ | 人民币 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
° | 摄氏度 | ° |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 平方2(上标2) | ² |
³ | 立方3(上标3) | ³ |
为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题,即h1到h6
标签语义:作为标题使用,并且依次重要性递减
特点
加了标题的文字会变的加粗,字号也会依次变大
一个标题独占一行
标签名 | 语义 |
---|---|
h1 | 一级标题 |
h2 | 二级标题 |
h3 | 三级标题 |
h4 | 四级标题 |
h5 | 五级标题 |
h6 | 六级标题 |
段落标签
在网页中,要把文字有条理显示出来,就需要将这些文字分段显示。在HTML标签中,p标签用于定义段落,它可以将整个网页分为若干个段落
特点
文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间保有空隙
换行标签
在HTML中,一个段落中的文字会从左到右一次排列,直到浏览器窗口的右端,然后才自动换行。如果希望其某段文本强制换行显示,就需要使用换行标签
特点
只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距
标签名 | 语义 |
---|---|
p | 段落 |
换行 |
在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示
标签语义:突出重要性,比普通文字更重要,注意一般不写后面的简写,因为简写内容语义不明确
标签 | 语义 |
---|---|
strong或者b | 加粗 |
em或者i | 倾斜 |
del或者s | 删除线 |
ins或者u | 下划线 |
div和span是没有语义的,它们就是一个盒子,用来装内容的
特点
div标签用来布局,但是现在一行只能放一个div
span标签用来布局,一行上可以多个span
标签名 | 语义 |
---|---|
div | 大盒子 |
span | 小盒子 |
在HTML标签中,img标签用于定义html页面中的图像
src是img标签的必须属性,它用于指定图像的路径和文件名
所谓属性:简单理解就是属于这个图像标签的特性
标签 | 语义 |
---|---|
img | 图像 |
图像标签的属性设置
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本。图像不能显示的文字 |
title | 文本 | 提示文本。鼠标放到图像上,显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框粗细 |
图像标签属性注意点
图像标签可以拥有多个属性,必须写在标签名的后面。
属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开
属性采取键值对的格式,即key=“value”的格式,属性=“属性值”
图像属性的src是必须写的
alt和title来说alt是在图片无法显示的时候出现的文字描述,而title是在图片能显示的时候鼠标放到图像之后才显示的文字
目标文件夹
就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如html文件、图片等
根目录
打开目录文件夹的第一层就是根目录
路径
相对路径
以引用文件所在位置为参考基础,而建立出的目录路径(图片相对于html页面的位置)
相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 图像文件位于HTML文件同一级 如 |
|
下一级路径 | / | 图像文件位于HTML文件下一级 如![]() |
上一级路径 | ../ | 图像文件位于HTML文件上一级 如![]() |
注意:
相对路径是从代码所在的这个文件出发,去寻找目标文件的,而我们这里所说的上一级、下一级和同一级就是图片相对于HTML页面的位置
绝对路径
是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径
在HTML标签中,a标签用于定义超链接,作用是从一个页面链接到另一个页面
链接的语法格式
链接的分类
标签 | 语义 |
---|---|
a | 超链接 |
链接的语法格式
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其实_self为默认值,_blank为在新窗口中打开方式 |
链接分为几大类
4399
首页
首页
下载文件
在链接文本的href属性中,设置属性值为#名字的形式,如第二集
找到目标位置标签,里面添加一个id属性=刚才的名字,如
Document 第二集第二集介绍
作用:
表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
总结:
表格不是用来布局页面的,而是用来展示数据的
标签 | 语义 | 作用 |
---|---|---|
table | 表格 | 用于定义表格的标签 |
thead | 头部 | 用于将写表格的头部区域,添加代码的可读性,在使用的 时候tr是在这个标签里面的 |
tbody | 主体 | 用于将写表格的主体区域,添加代码的可读性,在使用的 时候tr是在这个标签里面的 |
tr | 一行 | 标签用于定义表格中的行,必须嵌套在table标签中 |
th | 表头单元格 | 用于书写表格中的表头,通常放在第一行tr中,常用于表 格第一行,突出重要性,表头单元格里面的蚊子会加粗居中显示 |
td | 数据单元格 | 用于书写表格中的数据,必须嵌套在tr标签中这个标签里 面是表格中书写表格数据的 |
属性名 | 属性值 | 描述 |
---|---|---|
align | left、center、right | 规定表格相对周围元素的对齐方式 |
border | 1或"" | 规定表格单元是否拥有边框,默认为"",表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认为1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素或百分比 | 规定表格的宽度 |
属性名 | 属性值 | 描述 |
---|---|---|
rowspan | 个数 | 跨行合并,根据属性值指定的个数向右合并指定的单元格数量 |
colspan | 个数 | 跨列合并,根据属性值指定的个数向下合并指定的单元格数量 |
案例:
名字 | 年龄 | 性别 | 国家 |
---|---|---|---|
小明 | 18 | 男 | 中国 |
小红 | 17 | 女 | |
小方 | 保密 |
作用:
表格是用来显示数据的,那么列表就是用来布局的
列表最大的特点就是整齐、整洁、有序,它作为布局会更加的自由方便
根据使用情景不同,列表可以分为三大类:无序列表、有序列表和自定义列表
ul标签显示html页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用li标签定义
标签 | 语义 | 作用 |
---|---|---|
ul | 无序列表 | 用于定义有序列表的标签 |
li | 单元格 | 用于填写数据,必须放在ul标签中 |
注意:
无须列表的各个列表项之间没有顺序级别之分,是并列的
ul中只能嵌套li,直接在ul标签中输入其他标签或者文字的做法是不被允许的
li相当于一个容器,可以容纳所有元素
无序列表会带有自己的样式数据,但在实际使用中时,我们会使用CSS来设置
有序列表即为有排列顺序 的列表,其各个列表项会按照一定的顺序排列定义
在HTML标签中,ol标签用于定义有序列表,列表排序以数字来显示,并且使用li标签来定义列表项
标签 | 语义 | 作用 |
---|---|---|
ol | 有序列表 | 用于定义有序列表的标签 |
li | 单元格 | 用于填写数据,必须放在ol标签中 |
注意和无序列表一样
在HTML标签中,dl标签用于定义描述列表(或定义列表),该标签会与dt(定义项目/名字)和dd(描述每一个项目/名字)一起使用
注意:
dl里面只能包含dt和dd
dt和dd个数没有限制,经常是一个dt对应多个dd
标签 | 语义 | 作用 |
---|---|---|
dl | 自定义列表 | 用于定义自定义序列表的标签 |
dt | 单元格 | 用于填写无缩进数据,必须放在dl标签中 |
dd | 单元格 | 用于填写有缩进数据,必须放在dl标签中 |
使用表单目的是为了收集用户信息
在我们的网页中,我们也需要跟用户进行交互,收集用户资料,此时就需要表单
表单的组成
在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成
表单域是一个包含表单元素的区域
在HTML标签中,form标签用于定义表单域,以实现用户信息的收集和传递
form会把它范围内的表单元素信息提交给服务器
标签 | 语义 | 作用 |
---|---|---|
form | 表单 | 定义表单域 |
表单的属性
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
在表单域中可以定义各种表单元素,这些表单元素就是运行用户在表单中输入或者选择的内容控件
input表单元素
表单元素标签常用于收集用户信息
标签 | 语义 | 作用 |
---|---|---|
输入框 | 用来在表单中填写信息 |
input表单元素的属性
属性 | 属性值 | 描述 |
---|---|---|
type | 在下面 | 用来选择input输入框输入的数据类型 |
name | 由用户自定义 | 定义input元素的名称 |
value | 由用户自定义 | 规定input元素的默认值 |
checked | checked | 规定此input元素首次加载时应该被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
placeholder | 由用户自定义 | 规定在输入框中为空的时候出现的提示性文本 |
type属性值和描述
属性值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本) |
checkbox | 定义复选框 |
file | 定义输入字段和"浏览"按钮,提供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段,该字段中的字符被掩码 |
radio | 定义单选按钮 |
reset | 定义重置按钮,重置按钮会清楚表单中的所有数据 |
submit | 定义提交按钮,提交按钮会把表单数据发送到服务端 |
text | 定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符 |
label标签为input定义标注标签
label标签用于绑定一个表单元素,当点击label标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验
注意:label标签的for属性应当与相关元素的id属性相同
标签 | 语义 |
---|---|
label | 选中标签 |
label属性
属性 | 属性值 | 描述 |
---|---|---|
for | 由用户自定义 | 用来对对应的元素进行匹配 |
案例:
注意:
label标签是可以使用其他标签的,并且效果是没有变化的
在页面中国,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用select标签控件定义下拉列表
标签 | 语义 | 作用 |
---|---|---|
select | 下拉表 | 定义一个下拉框用来提供用户选择的 |
option | 选项 | 书写给用户选择的数据 |
注意:
select中至少包含一对option
在option中定义selected="selected"时,当前项即为默认选中项
当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用textarea标签
在表单元素中,textarea标签是用于定义多行文本输入的控件
使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论
标签 | 语义 | 描述 |
---|---|---|
textarea | 文本域 | 当文本内容比较多的情况下使用这个标签 |
textarea属性
属性 | 属性值 | 描述 |
---|---|---|
cols | 由用户自定义 | 用来显示每行中的字符数 |
rows | 由用户自定义 | 用来显示行数 |
注意:
我们一般都是使用css来改变textarea每行显示的字符串和数据的行数
HTML和css 的作用:
HTML主要做结构,显示网页元素内容
CSS美化HTML,布局网页
css最大价值:由HTML专注去做结构呈现,样式交给CSS,即结构(HTML)与样式(CSS)相分离
网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应位置CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)∶
普通流(标准流)
浮动
定位
注意:实际开发中,一个页面基本都包含了率三种布局方式(后面移动端学习新的布局方式)。
所谓的标准流:就是标签按照规定好默认方式排列.
块级元素会独占一行,从上向下顺字排列。
常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序,从左到右顺字排列,碰到父元素边缘则自动换行。
常用元素: span、a、i、em等
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说,就是选择标签用的
小结
找到所有的对应标签
设置这些标签的样式
选择器分为基础选择器和复合选择器两个大类,我们这里先讲解一下基础选择器
基础选择器是由单个选择器组成的
基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器
标签选择器(元素选择器)是指HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式
格式 | 作用 |
---|---|
标签名 | 修改这个文件中所有这个标签名的样式 |
作用
标签选择器可以把某一类标签全部选择出来,比如所有的div标签和所有的span标签
优点
能快速为页面中同类型的标签统一设置样式
缺点
不能设计差异化样式,只能选择全部的当前标签
如果想要差异化选择不同的标签,单独选一个或者几个标签,可以使用类选择器
注意
结构里需要用class属性来调用class类的意思
格式/属性 | 属性值 | 描述 |
---|---|---|
.类名 | 用来改变一个或多个指定类名的样式 | |
class | 由用户自定义 | 给你一个或多个标签添加类,这些类的类名可以重复使用 |
注意:
类选择器使用"."(英文点号)进行标识,后面紧跟类名
可以理解为给这个标签起了一个名字来表示
长名称或词组可以使用中横线来为选择器命名
不要使用纯数字、中文等命名,尽量使用英文字母来表示
多类名
我们可以给一个标签指定多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签,简单理解就是一个标签有多个名字
注意
在标签class属性中书写多个类名的时候不同类名中间必须用空格分开
这个标签可以分别具有这些类名的形式
当使用多个类的时候如果两个类设置了同一个属性,后面的类会覆盖前面的类,也就是说最后面的类会生效
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义
格式/属性 | 属性值 | 描述 |
---|---|---|
#id名 | 用来改变一个指定id名的样式 | |
id | 由用户自定义 | 给标签添加一个id来调用对应id的样式 |
注意:
id在页面中时唯一的如果出现多个只有第一个会生效
在css中,通配符选择器使用"*"定义,它表示选取页面中所有元素(标签)
通配符选择器不需要调用,自动就给所有的元素使用样式
特殊情况才使用
基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如p | 不能差异化选择 | 较多 | p{color: red;} |
类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .head{color: red;} |
id选择器 | 一次只能选择1个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和js搭配 | #head{dolor: red;} |
通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 特殊情况使用 | *{color: red;} |
css Fonts(字体)属性用于定义字体系列、大小、粗细、和字体样式(如斜体)
css使用font-family属性定义文本的字体系列
属性 | 属性值 | 表示 |
---|---|---|
font-family | 系统指定(如:微软雅黑/Microsoft Yahei) | 字体类型 |
font-size | 像素(谷歌浏览器默认为16像素) | 字体字号 |
font-weight | 数字或者系统指定 | 字体粗细 |
font-style | 系统指定 | 字体样式 |
font | font: font-style font-weight font-size/line-height font-family; | 字体连写 |
font-weight属性值介绍
属性值 | 作用 |
---|---|
normal | 默认值(不加粗) |
bold | 定义粗体(加粗的) |
100-900 | 400等同于normal,而700等同于blod 注意这个数字后面不跟单位 |
fontsize属性值介绍:
属性值 | 作用 |
---|---|
normal | 默认值,浏览器会显示标准的字体样式 |
italic | 浏览器会显示斜体的字体样式 |
注意:
font-family
各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体或者为中文字体,加引号
尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
最常见的几个字体:'Microsoft Yahei,tahoma,arial,'Hiragino Sans GB'
案例:
*{ font-family:'Microsoft Yahei',Arial,'宋体';}
font-size
不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
字体属性可以把以上文字样式综合来写,这样可以更节约代码
body{ font: font-style font-weight font-size/line-height font-family;}
沙发沙发上
注意:
使用font属性时,必须按上面语法格式张工的顺序书写,不能更换顺序,并且各个属性间以空格隔开
不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则属性将不起作用
属性 | 表示 | 注意点 |
---|---|---|
color | 文本颜色 | 我们通常用十六进制表示,#ffffff,而且支持简介,#fff |
text-align | 文本对齐 | 可以设定文字水平的对齐方式 |
text-indent | 文本缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent:2em' |
text-decoration | 文本修饰 | 添加下划线underline取消下划线none |
line-height | 行高 | 控制行与行之间的距离 |
color属性用于定义文本的颜色
属性值
表示 | 属性值 |
---|---|
预定义的颜色 | red,green,blue,black,pink颜色等等 |
十六进制 | #FF0000(简写为#F00),#FF6600(简写为#F60),#29D794 |
RGB代码 | rgb(255,0,0)或者rgb(100%,0%,0%) |
RGBA代码 | rgba(255,0,0,.1)或者rgba(255,255,255,0.3),后面的a表示的 是颜色的透明度 |
text-align属性用于设置元素内文本内容的水平对齐方式
属性值
属性值 | 解释 |
---|---|
left | 左对齐(默认值) |
right | 右对齐 |
center | 居中对齐 |
text-decoration属性规定添加报文本的修饰,可以给文本添加下划线、删除线、上划线。
属性值 | 描述 |
---|---|
none | 默认,没有装饰线(最常用) |
underline | 下划线,链接a标签自带下划线(常用) |
overline | 上划线(几乎不用) |
line-through | 删除线(不常用) |
text-indent属性用来指定文本的第一行的缩进,通常是加段落的首行缩进
通过设置该属性,所有元素的第一行都可以首行缩进一个给定的长度,甚至该长度可以是负值
em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的一个文字大小进行缩进
line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离
解释:一个文本框分为三部分,第一部分为框框到文字的空白部分那么这个部分叫做上间距,文字占用的空间叫做文本高度,文字下面的到下面的框框叫做下间距,而这个属性添加的就是上间距和下间距的大小,值为正添加上间距,值为负添加下间距
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 结构样式混写 | 较少 | 控制一个标签 |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
外部样式表 | 完成实现结构和样式相分离 | 需要引入 | 最多 | 控制多个页面 |
内部样式表(内嵌样式表)是写到HTML页面内部,是将所有的css代码抽取出来,单独放到一个style标签中
沙发沙发上
style标签理论上可以放在HTML文档的任何地方,但一般会放在文档的head标签中
通过此种,可以方便控制当前整个页面中的元素样式设置
行内样式表(内联样式表)是在元素标签内部的style属性中设置CSS样式。适合于修改简单样式
风水轮流转
style其实就是标签的属性
在双引号中间,写法要符合CSS规范
可以控制当前的标签设置样式
由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用
实际开发都是外部样式表,适合于样式比较多的情况,核心是:样式单独写到css文件中,之后把css文件导入到HTML页面中使用
标签 | 描述 |
---|---|
用来导入外部css的 |
link标签的属性
属性 | 作用 |
---|---|
rel | 定义当前文档与被链接文档之间的关系,在这里需要指定为”stylesheet“,表示被链接的文档是一个样式表文件 |
href | 定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径 |
引入外部样式表分为两步:
新建一个后缀名为.css的样式文件,把所有css代码都放入此文件中
在HTML页面中,使用link标签引入这个文件
注意:
使用外部样式表设定css,通常也被称为外链式或链接式引入,这种方式是开发中常用的方式
在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
复合选择器可以更准确、更高效的选择目标元素(标签)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
常用的复合选择器包括︰后代选择器、子选择器、并集选择器、伪类选择器等等
后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。 语法︰
元素1元素2{样式声明}
上述语法表示选择元素1里面的所有元素2(后代元素)。例如∶
ul li {样式声明}/*选择ul里面所有的li标签元素*/
元素1和元素2中间用空格隔开
元素1是父级,元素2是子级,最终选择的是元素2
元素2可以是儿子,也可以是孙了等,只要是元素1的后代即可
元素1和元素2可以是任意基础选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.
语法︰
元素1>元素2{样式声明}
上述语法表示选择元素1里面的所有直接后代(子元素)元素2。例如∶
div > p{样式声明}/*选择div 里面所有最近一级p标签元素*/
元素1和元素2中间用大于号隔开
元元素1是父级,元素2是子级,最终选择的是元素2
元素2必须是亲儿子,其孙子、重孙之类都不归他管.你也可以叫他亲儿子选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明.
并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
语法:
元素1,元素2{ 样式声明}
上述语法表示选择元素1和元素2。
例如︰
ul, div{样式声明}/*选择ul和div标签元素*/
元素1和元素2中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示,比如:hover . :first-child 。
因为伪类选择器很多,比如有链接伪类、结构伪类等,所以这里先给大家讲解常用的链接伪类选择器。
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
---|---|---|---|---|
后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格.nav a |
子代选择器 | 选择最近—级元素 | 只选亲儿子 | 较少 | 符号是大于.nav>p |
并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号.nav,.header |
链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a{}和a:hover 实际开发的写法 |
:focus选择器 | 选择获得光标的表单 | 跟表单相关 | 较多 | input:focus记住这个写法 |
链接伪类选择器
a : link /* 选择所有未被访问的链接*/ a : visited /*选择所有已被访问的链接*/ a : hover /* 选择鼠标指针位于其上的链接*/ a : active /* 选择活动链接(鼠标按下未弹起的链接)*/
链接伪类选择器实际开发中的写法.链接伪类选择器注意事项
为了确保生效,请按HLVHA的循顺序声明:link - :visited - :hover - :active。
因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
链接伪类选择器实际工作开发中的写法︰
/* a是标签选择器所有的链接*/ a { color: gray; } /* :hover是链接伪类选择器鼠标经过*/ a:hover { color: red;/*鼠标经过的时候,由原来的灰色变成了红色*/ }
focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况input类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。
input:focus { background-color: yellow ; }
作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素(标签)以什么方式进行显示,比如div自己占一行,比如一行可以放多个span。
HTML元素一般分为块元素和行内元素两种类型。
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块级元素 | 一行只能放一个块级 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |
行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
常见的块元素有
、
块级元素的特点︰
比较霸道,自己独占一行。
高度,宽度、外边距以及内边距都可以控制。
宽度默认是容器(父级宽度)的100%。
是一个容器及盒子,里面可以放行内或者块级元素。
注意:
文字类的元素内不能使用块级元素
p标签主要用于存放文字,因此p里面不能放块级元素,特别是不能放div
同理,h1~h6等都是文字类块级标签,里面也不能放其他块级元素
常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等,其中span标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点︰
相邻行内元素在一行上,一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。
注意:
链接里面不能再放链接
特殊情况链接a里面可以放块级元素,但是给a转换一下块级模式最安全
在行内元素中有几个特殊的标签——img、input 、td,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点:
和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
默认宽度就是它本身内容的宽度(行内元素特点)。
高度,行高、外边距以及内边距都可以控制(块级元素特点)。
特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另外一种模式的特性比如想要增加链接a的触发范围。
转换为块元素:display:block;
转换为行内元素:display.inline;
转换为行内块:display: inline-block;
通过CSS背景属性,可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
属性 | 作用 | 值 |
---|---|---|
background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
background-image | 背景图片 | url(图片路径) |
background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
background-position | 背景位置 | length/position分别是x和y坐标 |
background-attachment | 背景附着 | scroll(背景滚动)/fixed(背景固定) |
背景简写 | 书写更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; |
背景色半透明 | 背景颜色半透明 | background: rgba(0,0,0,0.3); 后面必须是4个值 |
background-color属性定义了元素的背景颜色。
background-color:颜色值;
一般情况下元素背景颜色默认值是transparent(透明),我们也可以手动指定背景颜色为透明色
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置.(精灵图也是一种运用场景)
background-image:none | url (url)
参数值 | 作用 |
---|---|
none | 无背景图(默认的) |
url | 使用绝对或相对地址指定背景图像 |
如果需要在HTML页面上对背景图像进行平铺,可以使用background-repeat属性。
background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数值 | 作用 |
---|---|
repeat | 背景图像在纵向和横向上平铺(默认的) |
no-repeat | 背景图像不平铺 |
repeat-x | 背景图像在横向上平铺 |
repeat-y | 背景图像在纵向平铺 |
利用background-position属性可以改变图片在背景中的位置。
background-position: x y;
参数代表的意思是:x坐标和y坐标。可以使用方位名词或者精确单位
参数值 | 说明 |
---|---|
length | 百分数|由浮点数字和单位标识符组成的长度值 |
position | top | center | bottom | left | center | right 方位名词 |
参数是方位名词
如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top和top left效果一致
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
参数是精确单位
如果参数值是精确坐标,那么第一个肯定是×坐标,第二个一定是y坐标
如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中
参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是×坐标,第二个值是y坐标
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment后期可以制作视差滚动的效果。
background-attachment:scroll | fixed
参数 | 作用 |
---|---|
scroll | 背景图像是随对象内容滚动 |
fixed | 背景图像固定 |
为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性background中。从而节约代码量.当使用简写属性时,没有特定的书写顺序,一般习惯约定顺
序为:
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top ;
这是实际开发中,我们更提倡的写法。
语法1:
background: linear-gradient(起始方向,颜色1,颜色2,...) background: -webkit-linear-gradient(left,red,blue) background: -webkit-linear-gradient(left top,red,blue)
背景渐变必须添加浏览器私有前缀
起始方向可以是:方位名词 或者 度数, 如果省略默认就是top
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题
层叠性原则:
样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
样式不冲突,不会层叠
现实中的继承:我们继承了父亲的姓
CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是︰子承父业。
恰当地使用继承可以简化代码,降低CSS样式的复杂性
子元素可以继承父元素的样式( text-, font-,line-这些元素开头的可以继承,以及color属性)
行高的继承
body { font:12px/1.5 Microsoft YaHei; }
行高可以跟单位也可以不跟单位
如果子元素没有设置行高,则会继承父元素的行高为1.5
此时子元素的行高是:当前子元素的文字大小* 1.5
body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
当同一个元素指定多个选择器,就会有优先级的产生。
选择器相同,则执行层叠性
选择器不同,则根据选择器权重执行
选择器权重如下表所示。
选择器 | 选择器权重 |
---|---|
继承或者* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式style="" | 1,0,0,0 |
!important重要的 | =无穷大 |
Document 我真的是无语了
优先级注意点:
权重是有4组数字组成,但是不会有进位。
可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推
等级判断从左向右,如果某一位数值相同,则判断下一位数值。
可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10, id选择器100,行内样式表为1000,!important无穷大.
继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0。
权重叠加
权重叠加∶如果是复合选择器,则会有权重叠加,需要计算权重。
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover ------> 0,0,1,1
.nav a ------> 0,0,1,1
网页布局过程:
先准备好相关的网页元素,网页元素基本都是盒子Box。
利用CSS设置好盒子样式,然后摆放到相应位置。
往盒子里面装内容.
网面布局的核心本质:就是用CSS摆盒子
所谓盒子模型︰就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距、和实际内容
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)边框样式边框颜色语法;
border:border-width || border-style || border-color
属性 | 属性 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
边框的复合写法
CSS边框属性允许你指定一个元素边框的样式和颜色。
边框简写:
border:1px solid red;没有顺序
边框分开写法:
border-top: 1px solid red; /*只设定上边框,其余同理*/
表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法︰
border-collapse:collapse;
collapse单词是合并的意思
border-collapse: collapse;表示相邻边框合并在一起
边框会影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
测量盒子大小的时候,不量边框
如果测量的时候包含了边框,则需要width/height减去边框宽度
padding属性用于设置内边距,即边框与内容之间的距离。
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
padding属性简写
值的个数 | 表达意思 |
---|---|
padding: 5px; | 1个值,代表上下左右都有5像素内边距; |
padding: 5px10px; | 2个值,代表上下内边距是5像素 左右内边距是10像素; |
padding: 5px 10px 20px; | 3个值,代表上内边距5像素 左右内边距10像素 下内边距20像素; |
padding: 5px 10px 20px 30px; | 4个值,上是5像素 右10像素 下20像素 左是30像素顺时针 |
特性:
当我们给盒子指定padding值之后,发生了2件事情:
内容和边框有了距离,添加了内边距。
padding影响了盒子实际大小。
也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。
解决方案∶
如果保证盒子跟效果图大小保持一致,则让width/height 减去多出来的内边距大小即可。
或者使用box-sizing:border-box;属性
margin属性用于设置外边距,即控制盒子和盒子之间的距离。
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
margin简写方式代表的意义跟padding完全一致。
外边距典型应用
外边距可以让块级盒子水平居中,但是必须满足两个条件:
盒子必须指定了宽度( width ) .
盒子左右的外边距都设置为auto 。
.header{ width: 960px; margin: 0 auto;}
常见的写法,以下三种都可以:
margin-left: auto;margin-right auto;
margin: auto;
margin: 0 auto;
注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。
外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与 margin-top之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
解决方案∶
尽量只给一个盒子添加margin值。
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:
可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加overflow:hidden。
还有其他方法,比如浮动、固定,绝对定位的盒子不会有塌陷问题
网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。因此我们在布局前,首先要清除下网页元素的内外边距。
* { padding:0;/*清除内边距*/ margin: 0;/*清除外边距*/ }
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了
css3为我们提供了背景颜色半透明的效果。
background:rgba(0,0,0,0.3);
最后一个参数是alpha透明度,取值范围在0~1之间
我们习惯把0.3的0省略掉,写为background: rgba(0,0,0,.3);
注意:背景半透明是指盒子背景半透明,盒子里面的内容不受影响
CSS3新增属性,是IE9+版本浏览器才支持的
但是现在实际开发,我们不太关注兼容性写法了,可以放心使用
在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角。
语法︰
border-radius : length;
radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果
注意
参数值可以为数值或百分比的形式
如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%
如果是个矩形,设置为高度的一半就可以做
该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角
分开写: border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius
CSS3中新增了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影。
语法︰
box-shadow: h-shadow v-shadow blur spread color inset;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅CSS颜色值。 |
inset | 可选。将外部阴影(outset)改为内部阴影。 |
注意:
默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效
盒子阴影不占用空间,不会影响其他盒子排列。
在CSS3中,我们可以使用text-shadow属性将阴影应用于文本。
语法︰
text-shadow : h-shadow v-shadow blur color;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色。 |
页面有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式.
浮动最典型的应用:可以让多个块级元素一行内排列显示。
网页布局第一准则︰多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法︰
选择器{ float:属性值;}
属性值 | 描述 |
---|---|
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
脱标:
脱离标准普通流的控制(浮)移动到指定位置(动),(俗称脱标)
浮动的盒子不在保留原先的位置
浮动元素一行显示:
如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列
注意:浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐
浮动元素会具有行内块元素特性:
任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性
如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定
浮动的盒子中间没有缝隙的,是紧挨着一起的
行内元素同理
小结:
为了约束浮动元素位置,我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则
浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
一个元素浮动了,理论上其余的兄弟元素也要浮动
一个盒子里面有多个盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子
清除浮动的本质
清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度,则不需要清除浮动
清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了
语法:
选择器{clear:属性值;}
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
清除浮动的策略是:闭合浮动
清除浮动的方法
清除浮动的方式 | 优点 | 缺点 |
---|---|---|
额外标签法(隔离法) | 通俗易懂,书写方便 | 添加许多无意义的标签,结构化较差 |
父级overflow:hidden; | 书写简单 | 溢出隐藏 |
父级after伪元素 | 结构语义正确 | 由于IE6-7不支持:after,兼容性问题 |
父类双伪元素 | 结构语义正确 | 由于IE6-7不支持:after,兼容性问题 |
额外标签法
额外标签法会在浮动元素末尾添加一个空的标签。例如
,或者其他标签(如优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差
注意:要求这个新的空标签必须是块级元素
给父级添加overflow
可以给父级添加overflow属性,将其属性值设置为hidden、auto或scroll。
优点:代码简洁
缺点:无法显示溢出的部分
:after伪元素法
:atter方式是额外标签法的升级版。也是给父元素添加
添加的内容如下:
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{ /* IE6/7专有 */ *zoom: 1; }
优点:没有增加标签,结构更简单
缺点:照顾低版本浏览器
双伪元素清除浮动
也是给父元素添加
添加内容如下:
.clearfix:before,.clearfix:after { content: ""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom: 1; }
优点:代码更简洁
缺点:照顾低版本浏览器
建议遵循以下顺序:
布局定位属性:display/position/float/clear/visivility/overflow(建议display第一个写,因为关系到模式)
自身属性:width/height/margin/padding/border/background
文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word
其他属性(CSS3):content/cusor/border-radius/box-shadow/background:linear-gradient...
.jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: #333; background: rgba(0, 0, 0, .5); border-radius: 10px; }
浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子
定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置
定位模式 | 是否脱标 | 移动位置 | 是否常用 |
---|---|---|---|
static静态定位 | 否(占有位置) | 不能使用边偏移 | 很少 |
relative相对定位 | 是(不占有位置) | 相对于自身位置移动 | 常用 |
absolute绝对定位 | 是(不占有位置) | 带有定位的父级 | 常用 |
fixed固定定位 | 是(不占有位置) | 浏览器可视区 | 常用 |
sticky粘性定位 | 否(占有位置) | 浏览器可视区 | 比较少 |
静态定位是元素的默认定位方式,无定位的意思
语法:
选择器 {position: static; }
静态定位按照标准特性摆放位置,它没有位移
静态定位在布局时很少用到
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)
语法:
选择器 {position: relative; }
相对定位的特点:(务必记住)
它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。(不脱标,继续保留原来位置)因此,相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。
绝对定位是元素在移动位置的时候,是相对于它的祖先元素来说的(拼爹型)
语法:
选择器 {position: absolute; }
绝对定位的特点:(务必记住)
如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)。
如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素位参考点移动位置
绝对定位不在占有原先的位置。(脱标)
子绝父相
意思是:子级是绝对定位的话,父级要用相对定位
子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时,需要占有位置,因此父亲只能是相对定位
这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级
总结:因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位
绝对定位的盒子居中
加了绝对定位的盒子不能通过margin:0 auto水平居中,但是可以通过以下计算方法实现水平和垂直居中
left:50%;:让盒子的左侧移动到父级元素的水平中心位置
margin-left:-100px;:让盒子向左移动自身宽度的一半
固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变
语法:
选择器 {position: fixed; }
固定定位的特点:
以浏览器的可视窗口为参照点移动元素
跟父元素没有任何关系
不随滚动条滚动
固定定位不在占有原先的位置
固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位
粘性定位可以被认为是相对定位和固定定位的混合。
语法:
选择器 {position: sticky; top: 10px; }
粘性定位的特点:
以浏览器的可视窗口为参照点移动元素(固定定位的特点)
粘性定位占有原先的位置(相对定位特点)
必须添加top、left、right、bottom其中一个才有效
跟页面滚动搭配使用。兼容性较差,IE不支持
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序(z轴)
语法:
选择器 { z-index: 1; }
数值可以是正整数,负整数或0,默认是auto,数值越大,盒子越靠上
如果属性值相同,则按照书写顺序,后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性
绝对定位、固定定位和浮动的相同点
行内元素添加聚堆或者固定定位,可以直接设置高度和宽度
块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
浮动元素。绝对定位(固定定位)元素都不会触发外边距合并的问题
绝对定位、固定定位和浮动的不同点
绝对定位(固定定位)会完全压住盒子
浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)
但是绝对定位(固定定位)会压住下面标准流所有的内容
浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素
格式:
选择器 {display: none; }
display属性用于设置一个元素应如何显示
display:none; 隐藏对象
display:block; 除了装换为块级元素之外,同时还有显示元素的意思
display隐藏元素后,不在占有原来的位置
后面应用及其广泛,搭配js可以做很多的网页特效
格式:
选择器 {visibility: visible; }
visibility属性用于指定一个元素应可见还是隐藏
visibility:visible; 元素可视
visibility:hidden; 元素隐藏
visibility隐藏元素后,继续占有原来的位置
如果隐藏元素想要原来位置,就用visibility:hidden
如果隐藏元素不想要原来位置,就用display:none(用处更多重点)
overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会将超出部分内容进行一下属性值操作
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scroll | 不管超出内容否,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局
但是如果有定位的盒子,请慎用overflow:hidden因为它会隐藏多余的部分
一个网页中往往会应用很多小的背景图作为修饰,当页面中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这大大降低页面的加载速度
因此,为了有效减少服务器接收和发送请求的次数,提高页面加载速度,出现了css精灵技术(也称CSS Sprites、CSS 雪碧)。核心原理:将页面中一些小背景图片整合到一张大图,这样服务器只需要一次请求就可以了
使用精灵图核心:
精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图中
这个大图也称为sprites精灵图或者雪碧图
移动背景图片位置,此时可以使用background-position
移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
因为一般情况下都是往上往左移动,所以数值是负值
使用精灵图的时候需要精确测量,每个小背景图片的大小和位置
使用精灵图核心总结
精灵图主要针对于晓得背景图片使用
主要借助于背景位置来实现---background-position
一般情况下精灵图都是负值。(千万注意网页中的坐标:x轴右边走是正值,左边走是负值,y轴同理。)
字体图标使用场景:主要用于显示网页中通用、常用的一些小图标
精灵图是有诸多优点的,但是缺点很明显
图片文件还是比较大的
图片本身放大和缩小会失真
一旦图片制作完毕想要更换非常复杂
此时,有一种技术的出现很好的解决以上的问题,就是字体图标iconfont
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体
轻量级:一个图标文字要比一系列的图像更小。一旦字体加载了,图标就会马上渲染,减少了服务器请求
灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性:几乎支持所有的浏览器,请放心使用
注意:字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化
总结:
如果遇到一些结构和样式比较简单的小图标,就用字体图标
如果遇到一些结构和杨思复杂一点的小图片,就用精灵图
字体的使用步骤
字体图标的下载
字体图标的引入(引入到我们的HTML页面中)
字体图标的追加(以后添加新的小图标)
字体图标的下载
推荐下载网站
icomoon字库Icon Font & SVG Icon Sets ❍ IcoMoon
优点:字库内容种类繁多,非常全面,缺点:国外服务器,打开网速比较慢
阿里iconfont字库iconfont-阿里巴巴矢量图标库
优点:免费,而且是国内网站
字体图标的引入
下载完毕之后,里面的源文件不要删除,后面会使用到
把下载包可能的fonts文件夹放入页面根目录下
不同浏览器所支持的字体格式是不一样的,字体图标之所以兼容,就是因为包含了主流浏览器支持的字体文件
TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2+;
Web Open Font Format(.woff)格式woff字体,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;
Embedded Open Type(.eot)格式.eot字体是IE专用字体,支持这种字体的浏览器有IE4+;
SVG(.svg)格式.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;
在css样式中全局声明字体:简单理解把这些字体文件通过css导入到我们页面中
一定注意字体文件路径的问题
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') fromat('truetype'), url('fonts/icomoon.woff?7kkyc2') fromat('woff'), url('fonts/icomoon.svg?7kkyc2#icommon') fromat('svg'); font-weight: normal; font-style: normal; }
字体图标的追加
如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的selection.json重新上传,然后选中自己想要新的图标,从新下载压缩包,并替换原来的文件即可
.box1 { width: 0; height 0; border-top:10px solid black; border-right:10px solid red; border-bottom:10px solid blue; border-left:10px solid green; }
.box2 { width:0; height:0; border:10px solid transparent; border-top-color:red; }
兼容一些低版本浏览器写法:
.box2 { width:0; height:0; line-height:0; font-size:0; border:10px solid transparent; border-top-color:red; }
所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。
更改用户的鼠标样式
用户界面样式-鼠标样式
表单轮廓
防止表单域拖拽
用户界面样式-表单轮廓和防止拖拽文本域
li { cursor:pointer; }
input { outline:none;或者 input{outline:0; }
实际开发中,我们文本域右下角是不可以拖拽的。
textarea { resize:none; }
css的 vertical-align属性使用场景:经常用于设置图片表单(行内块元素)和文字垂直对齐 官方解释:用于设置一个元素的 垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。
语法:
vertical-align:**baseline**|top|middle|bottom
利用vertical-align实现图片文字垂直居中对齐 琴棋书画样样精通
图片底侧空白缝隙解决方案 ![]()
让每个盒子margin往左移动-1px 正好压住相邻盒子边框
鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有定位,则加相对定位(保留位置),如果有定位,则加z-index)
margin负值的巧妙运用
行内块元素的巧妙运用
/* 把我们所有标签的内外边距清零 */ * { margin: 0; padding: 0 } /* em 和 i 斜体的文字不倾斜 */ em, i { font-style: normal } /* 去掉 li 的小圆点 */ li { list-style: none } img { /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 */ vertical-align: middle } button { /* 当我们鼠标经过button 这个按钮的时候,鼠标变成小手 */ cursor: pointer } a { color: #666; text-decoration: none } a:hover { color: #c81623 } button, input { /* \5B8B\4F53 就是宋体的意思 这样浏览器的兼容性比较好 */ font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif } body { /* 抗锯齿形 让文字显示的更加清晰 */ -webkit-font-smoothing: antialiased; background-color: #fff; /* 字体大小12px 1.5倍行高 */ font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; color: #666 } .hide, .none { display: none } /* 清除浮动 */ .clearfix:after { /* 隐藏元素 */ visibility: hidden; clear: both; display: block; content: "."; height: 0 } .clearfix { *zoom: 1 } .clearfix:before, .clearfix::after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
先强制一行内显示文本
white-space:nowrap; (默认 normal 自动换行)
2.超出的部分隐藏
overflow:hidden;
3.文字用省略号代替超出的部分
text-overflow:ellipais;
Document 啥也不说,此处省略一万字
多行文本溢出显示省略号,有较大兼容性问题,适合于webKit浏览器或移动端(移动端大部分是webKit内核)
overflow:hidden;
text-overflow:ellipsis;
/弹性伸缩盒子模型显示/
display: -webkit-box;
限制在一个块元素的文本的行数
-webkit-line-clamp:2;
/*设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient:vertical;
更推荐让后台人员来做这个效果,因为后台人员可以设置显示多少个字,操作更简单。
多行文本溢出显示省略号 啥都不用说,此处省略一万字;啥都不用说,此处省略一万字。
1.音频:
HTML5新增音频标签
2.视频:
HTML5新增标签
音频标签和视频标签使用方式基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
我们给视频标签添加muted属性来静音播放视屏,音频不可以(可以通过JavaScript解决)
视频标签是重点,我们经常设置自动播放,不适用controls控件,循环和设置大小属性
属性值 | 说明 |
---|---|
type="email" | 限制用户输入必须为Email类型 |
type="url" | 限制用户输入必须为URL类型 |
type="date" | 限制用户输入必须为日期类型 |
type="time" | 限制用户输入必须为时间类型 |
type="month" | 限制用户输入必须为月类型 |
type="week" | 限制用户输入必须为周期类型 |
type="number" | 限制用户输入必须为数字类型 |
type="tel" | 手机号码 |
type="search" | 搜索框 |
type="color" | 生成一个颜色选择表单 |
HTML5新增input表单
属性 | 值 | 说明 |
---|---|---|
required | required | 表单拥有该属性表示其内容不能为空,必填 |
placeholder | 提示文本 | 表单的提示信息,存在默认值将不显示 |
autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚焦到指定表单 |
autocomplete | off/on | 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。 默认已经打开,如autocomplete="on",关闭autocomplete="off" 需要放在表单内,同时加上name属性,同时成功提交 |
multiple | multiple | 可以多选文件提交 |
HTML5新增表单属性
图片模糊处理 ![]()
新增的CSS3特性有兼容性问题,ie9+才支持
移动端支持优于PC端
不断改进中
应用相对广泛
现阶段学习: 新增选择器和 盒子模型以及 其他特性
属性选择器可以根据元素特定的属性来选择元素。这样就可以不用借助于类或者id选择器。
选择符 | 简介 |
---|---|
E[arr] | 选择具有att属性的E元素 |
E[arr="val"] | 选择具有att属性且属性值等于val的E元素 |
E[arr^="val"] | 匹配具有att属性且值以val开头的E元素 |
E[arr$="val"] | 匹配具有att属性且值以val结尾的E元素 |
E[arr*="val"] | 匹配具有att属性且值中含有val的E元素 |
CSS3新增属性选择器 小图标1小图标2小图标3小图标4我是打酱油的我是安其拉 我是哥斯拉 那我是谁
选择符 | 简介 |
---|---|
E:first-child | 匹配父元素中的第一个子元素E |
E:last-child | 匹配父元素中的最后一个E元素 |
E:nth-child(n) | 匹配父元素中的第n个子元素E |
E:fitst-of-type | 指定类型E的第一个 |
E:last-type | 指定类型E的最后一个 |
E:nth-of-type | 指定类型E的第n个 |
CSS3新增属性选择器-nth-child
- 我是第1个孩子
- 我是第2个孩子
- 我是第3个孩子
- 我是第4个孩子
- 我是第5个孩子
- 我是第6个孩子
- 我是第7个孩子
- 我是第8个孩子
CSS3新增nth-of-type属性选择器
光头强
小结
结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配
nth-of-type 对父元素里面指定的子元素进行排序选择。先去匹配E然后再根据E找到第n个孩子
关于nth-child(n)我们要知道n是从0开始计算的,要记住常用的公式
如果是无序列表,我们肯定用nth-child更多
类选择器、属性选择器、伪类选择器,权重为10
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。
选择符 | 简介 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
注意:
before和after创建一个元素,但是属于行内元素
新创建的这个元素在文档树中是找不到的,所以我们称为 伪元素
语法:
element::before{}
before和after必须有 content属性
before在父元素内容的前面创建元素,after在父元素的后面插入元素
伪类选择器和标签选择器一样,权重为1
伪元素选择器 是
伪元素使用场景-字体图标
仿土豆网显示隐藏遮罩案例 ![]()
过渡(transition)动画:是从一个状态 渐渐的过渡到另一个状态
经常和:hover一起搭配使用
语法: transition:要过渡的属性 花费时间 运动曲线 何时开始;
1.属性:想要变化的css属性,宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡,写一个all就可以了
2.花费时间:单位是秒(必须写单位) 比如0.5s
3.运动曲线:默认是ease(可以忽略)
4.何时开始:单位是秒(必须写单位)可以设置延迟触发时间 默认是0s(可以忽略)
CSS3过渡效果(重点)
CSS3宽度calc函数
转换(transform)是CSS中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
转换(transform)你可以简单理解为变形
移动: translate
旋转: rotate
缩放: scale
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
1.语法:
transform: translate(x,y); 或者分开写 transform: translateX(n); transform: translateY(n);
2.重点
定义2D转换中的移动,沿着X和Y轴移动元素
translate最大的优点:不会影响到其他元素的位置
translate的百分比单位是相对于自身元素的translate:(50%,50%);
对行内标签没有效果
2D转换之translate
让盒子实现水平和垂直居中 123
2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转。
1.语法:
transform:rotate(度数);
重点:
rotate里面跟度数,单位是deg 比如 rotate(45deg)
角度为正时,顺时针,负时,逆时针
默认旋转的中心点是元素的中心点
2D转换之旋转
CSS3书写三角
我们可以设置元素转换的中心点
1.语法:
transform-origin: x,y;
2.重点
注意后面的参数x和y用逗号隔开
x y默认转换的中心点是元素的中心点(50% 50%)
还可以给x y 设置像素 或者 方位名词(top bottom left right center)
旋转中心点案例
缩放,顾名思义,可以放大和缩小。只要给元素添加了这个属性就能控制它是放大还是缩小
1.语法:
transform: scale(x,y);
2.注意:
注意其中的x和y用逗号分隔
transform: scale(1,1); 宽和高都放大一倍,相当于没有放大
transform:scale(2,2); 宽和高都放大2倍
transform:scale(2); 只写一个参数,第二个参数则和第一个参数一样,相当于scale(2,2);
transform:scale(0.5,0.5); 缩小
scale缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
2D转换之缩放scale
图片放大案例
分页按钮案例
注意:
1.
同时使用多个转换,其格式为:transform:translate() rotate() scale()...等,
2.其顺序会影响转换的效果。(先选择会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候,记得要将位移放到最前
1. 转换transform 我们简单理解就是变形 有2D和3D之分 2. 我们暂且学了三个 分别是 位移 旋转 和 缩放 3. 2D 移动translate(x,y) 最大的优势是不影响其他盒子,里面参数用%,是相对于自身宽度和高度来计算的 4. 可以分开写比如translateX(x) 和 translateY(y) 5. 2D旋转rotate(度数) 可以实现旋转元素 度数的单位是deg 6. 2D缩放scale(x,y) 里面的参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子 7. 设置转换中心点transform-origin: x,y; 参数可以是百分比、像素或者是方位名词 8. **当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前**
动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。
制作动画分为两步:
先定义动画
再使用(调用)动画
@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px; } }
0%是动画的开始,100%是动画的完成。这样的规划就是动画序列。
在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改变为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间,或用关键词'from'和'to',等同于0%和100%。
div { width: 200px; height: 200px; background-color: aqua; margin: 100px auto; /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间; }
CSS3动画基本使用
动画序列
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所有动画属性的简写属性,除了animation-play-state属性。 |
animation-name | 规定@keyframes动画的名称。(必须的) |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒,默认是0。(必须的) |
animation-timing-function | 规定动画的速度曲线,默认是"ease" |
animation-delay | 规定动画何时开始,默认是0 |
animation-iteration-count | 规定动画被播放的次数,默认是1,还有infinite |
animation-direction | 规定动画是否在下一周期逆向播放,默认是"normal",alternate逆播放 |
animation-play-state | 规定动画是否正在运行或暂停。默认是"running",还有"paused" |
animation-fill-mode | 规定动画结束后状态,保持forwards回到起始backwards |
动画属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
animation: myfirst 5s linear 2s infinite alternate;
1. 简写属性里面不包括animation-play-state 2. 暂停动画:animation-play-state:puased;经常和鼠标经过等其他配合使用 3. 想要动画走回来,而不是直接跳回来:animation-direction:alternate 4. 盒子动画结束后,停在结束位置:animation-fill-mode:forwoeds
大数据热点图
animation-timing-function:规定动画的速度曲线,默认是"ease"
值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的。匀速 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束 |
steps() | 指定了时间函数中的间隔数量(步长) |
速度曲线步长 世纪佳豪我在这里等你
奔跑的熊案例
我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子。
有什么特点
近大远小
物体后面遮挡不可见
当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。
x轴:水平向右 注意:x右边是正值,左边是负值
y轴:垂直向下 注意:y下面是正值,上面是负值
z轴:垂直屏幕 注意:往外面是正值,往里面是负值
3D转换我们主要学习工作中对常用的 3D位移 和 3D旋转
主要知识点
3D位移:translate3d(x,y,z)
3D旋转rotate3d(x,y,z)
透视:perspective
3D呈现transfrom-style
3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。
transform:translateX(100px);仅仅是在x轴上移动
transform:translateY(100px);仅仅是在y轴上移动
transform:translateZ(100px);仅仅是在z轴上移动(注意:translateZ一般用px单位)
transform:translate3d(x,y,z);其中x、y、z分别指要移动的轴的方向的距离
在2D平面产生近大远小视觉立体,但是只是效果二维的
如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。
模拟人类的视觉位置,可认为安排一只眼睛去看
透视我们也称为视距:视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大,越远成像越小
透视的单位是像素
透视写在被观察元素的父盒子上面的
d:就是视距,视距就是一个距离人的眼睛到屏幕的距离。
z:就是z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体就越大。
3d移动transform3d
transform:translateZ(100px); 仅仅是在z轴上移动。
有了透视,就能看到translateZ引起的变化了
translateZ
3D旋转指可以让元素在三维平面内沿着x轴,y轴,z轴或者自定义轴进行旋转。
语法
transform:rotateX(45deg); 沿着x轴正方向旋转45度
transform:rotateY(45deg); 沿着y轴正方向旋转45度
transform:rotateZ(45deg); 沿着z轴正方向旋转45度
transform:rotate3d(x,y,z,deg); 沿着自定义轴旋转deg为角度(了解即可)
对于元素旋转的方向的判断 我们需要先学习一个左手准则。
左手准则(X轴)
左手的手拇指指向x轴的正方向
其余手指的弯曲方向就是该元素沿着x轴旋转的方向
rotateX ![]()
左手准则(Y轴)
左手的手拇指指向y轴的正方向
其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)
rotateY ![]()
transform:rotate3d(x,y,z,deg); 沿着自定义轴旋转deg为角度(了解即可)
xyz是表示旋转轴的矢量,是表示你是否希望沿着该轴旋转,最后一个表示旋转的角度
控制子元素是否开启三维立体环境
transform-style:flat 子元素不开启3d立体空间 默认的
transform-style:preserver-3d; 子元素开启立体空间
代码写给父级,但是影响的是子盒子
这个属性很重要,后面必用
3D呈现transform-style
1.搭建HTML结构
黑马程序员我在这里等你
box父盒子里面包含前后两个子盒子
box是翻转的盒子 front是前面盒子back是后面盒子
2.CSS样式
box指定大小,切记要添加3d呈现
back盒子要沿着y轴翻转180度
最后鼠标经过box沿着y旋转180deg
两面翻转的盒子 黑马程序员我在这里等你
1.搭建HTML结构
li做导航栏
.box是翻转的盒子 front是前面盒子bottom是底下盒子
3D导航栏
1.搭建HTML结构
案例:旋转木马
浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无序添加。
-moz-:代表firefox浏览器私有属性(火狐)
-ms-:代表ie浏览器私有属性(微软)
-webkit-:代表safari、Chrome私有属性(谷歌等)
-o-:代表Opera私有属性
-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;
盒子覆盖知识点
Document