您的位置：360文档中心› HTML5 CSS3速查笔记

HTML5 CSS3速查笔记

HTML5 CSS3速查笔记
HTML5 CSS3速查笔记

HTML5/CSS3速查笔记

笔记本： HTML5/CSS3备忘笔记

作者：无限知识数据库

标签： HTML5/CSS3

HTML标签/元素

文档声明类型

跟标签

文档头部

定义与文档相关的名称/ 值对

文档标题

文档主体

charset (字符集)

UTF-8万国码

GB2312简体中文

BIG5繁体中文

GBK国标

(请看右栏实例→→→→→→)

网站favicon图标

1 .在html页面里面的元素之间引入代码

语法：

href="favicon.i co"type="image/x-icon"/>

description网站说明

语法：

注意：写在起始下面

keywords关键字

语法：

注意：写在起始下面实例：

Document

logo的注意事项

1.logo里面首先放个h1标签，目的是为了提权，告诉搜索引擎，这个地方很里要。

2.h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可。

3.为了搜索引擎收录我们，我们链接里面要放文字(网站名称),但是文字不要显示出来。方法1: text-indent移到盒子外面( text- indent-999px),然后 overflow.hidden,

方法2:直接给 font-size:0;就看不到文字了，京东的做法

4.最后给链接一个title属性，这样鼠标放到ogo上就可以看到是示文字了。

盒子模型（Box Model）组成

分开

跨度

border边境

content内容

padding内边距

margin外边距

border-width定义边框粗细，单位是px border-style边框的样式（请看右栏→→→→→→）

border-color边框颜色

边框样式border-style：

none无边框

hidden隐藏边框

dotted点线边框

dashed虚线边框

solid实线边框

double 双线边框

groove 3D凹槽边框

ridge 菱形边框

inset 3D凹边边框

_ 边框合并（相邻）：border- collapse:collapse; 新增： 1. box-sizing: content-box 盒子大小为 wdth+ padding+ border(以前默认的) 2. box-sizing: border-box 盒子大小为wdth 如果盒子模型我们改为了 box-sizing:border- box,那 padding 和 border 就不会撑大盒子了 (前提 padding 和bode 不会超过width 度) 计算盒子宽度calc 函数 语法：width: calc(100%-30px);

括号里面可以使用+-*/来计算 过渡(重点) transition: 要过渡的属性 花费时间 运动曲

线 何时开始 1.属性：想要变化的css 属性，宽度高度背景颜 色内外边距都可以。如果想要所有的属性都变 化过渡，写一个all 就可以。

例如：transition:all 0.5s; 2.花要时间：单位是秒(必须写单位)比如0.5s 3.远动曲线：默认是ease(可以省略) ease 逐渐慢下来 / ease-in 加速 / ease-out 减 速 / ease-in-out 先加速后减速 4.何时开始：单位是秒(必须写单位)可以设置 延迟触发时间 默认是0s(可以省略)

注意：谁过度给谁加

盒子阴影 box-shadow: h-shadow (水平阴影) v-shadow (垂直阴影) blur (模糊距离) spread (阴影尺寸) color (阴影颜色) inset (内部阴影)； 语法：

box-shadow:10px 10px 10px -4px

rgba(0,0,0,.3);较好的阴影语法

outset 3D 凸边边框

圆角

边框圆角 border-radius:10px 四个角可以分开写，用空格隔开就可以了。 例如： border-top-left-radius (左上角) border-top-right-radius (右上角) border-bottom-righet-radius (右下角)

border-bottom-left-radius (左下角)

盒子塌陷的解决方法：

可以为父元素添加 overflow:hidden.

HTML 文字标签 字体大小 ：

~

，

，

，

，

段落标签
强制换行 ， 加粗 ，倾斜 ， 删除线 ， 下划线 CSS 样式 字体大小：font-size ：12

px; 字体类型：font-family:（ 请看右栏 → → → → → → ） 字体粗细：font-weight:400(细体) / 700(粗 体) 字体类型

宋体

SimSun / 楷体：KaiTi 黑体 SimHei / 楷体_GB2312：

KaiTi GB2312 微软雅黑 Microsoft YaHei / 仿宋 _GB2312：FangSong_GB2312

微软正黑体 Microsoft JhengHei / 微軟正 黑體：Microsoft JhengHei

新宋体 NSimSun / 微软雅黑体：Microsoft YaHei

新细明体 PMingLiU / 隶书：LiSu 细明体 MingLiU / 幼圆：YouYuan 标楷体 DFKai-SB / 华文细黑：STXihei 仿宋 FangSong / 华文楷体：STKaiti

楷体 KaiTi / 华文宋体：STSong

仿宋_GB2312 FangSong_GB2312 / 华文

中宋：STZhongsong

文字风格：font-styled:normal;（正常）/ italic;（倾斜的）

水平对齐：text-align:left左对齐/ center居中/r ight右对齐

文本修饰：text-decoration:none; (没有任何东西) /under line; (下线)

over line; (越线) /line-through;（划掉）

段落缩进：text-indent:10px;/ 2em;

行高: line-height:20px;

文字阴影：

text-shadow:

h-shadow(水平阴影)

v-shadow(垂直阴影)

blur(模糊距离)

color(阴影颜色)

语法：

text-shadow:10px10px

10px rgba(0,0,0,.3);

content:'内容';内容楷体_GB2312KaiTi_GB2312/ 华文仿宋：STFangsong

华文细黑：STHeiti Light[STXihei] / 方正舒体：FZShuTi

华文黑体：STHeiti / 方正姚体：FZYaoti 华文楷体：STKaiti / 华文彩云：STCaiyun 华文宋体：STSong/ 华文琥珀：STHupo 华文仿宋：STFangsong/ 华文隶书：STLiti

儷黑Pro：LiHei Pro Medium / 华文行楷：STXingkai

儷宋Pro：LiSong Pro Light / 华文新魏：STXinwei

標楷體：BiauKai / 华文新魏：STXinwei 蘋果儷中黑：Apple LiGothic Medium

/ 蘋果儷細宋：Apple LiSung Light

新細明體：PMingLiU/ 細明體：MingLiU 標楷體：DFKai-SB / 黑体：SimHei

新宋体：NSimSun/ 仿宋：FangSong

方位名词

align对齐方式 / left(左) / center(居中) / right(右) / top(上) / bottom(下)

常用符号

<小于号<

>大于号>

&和号&

¥人民币￥

©版权?

®注册商标?

°摄氏度℃

±正负号±

×乘号X

÷除号÷

²平方2上标

³立方3上标

 空格

下划线

鼠标样式

cursor:

default默认

pointer小手

move移动

text文本

not-allowed禁止

HTML图像标签/元素

定义图像

src图像路径

alt加载失败显示文本

title标题

width宽度

height高度

border边境

/下一路径

../上一路径

CSS样式

背景颜色：background-color:

背景图片：background-image:url();

背景平铺：background-repeat:

repeat(平铺)

no-repeat(不平铺)

repeat-x(平铺x轴)

repeat-y(平铺y轴)

背景图像固定：background-attachment:

scroll(背景图片随对象内容滚动)

fixed(固定)

背景图片位置：background-position:x y;

语法:background-position:20px50px;

背景半透明：

background:rgba(0,0,0,0.3)；

新增：滤镜ifilter:

filter CSS性将模糊或颜色偏移等图形效果应

用于元素。

fter:函数();例如:filter:blur(5px);blur模糊

处理数值越大越模糊

链接标签链接实例

定义超链接

href指定链接必须属性

target打开方式，_self默认值，_blank新窗口

"#名字"锚点跳转元素,id="名字"锚点跳转目标。

a:link选择所有未被访问的链接

语法：a:link {color:#333;（颜色）text- decoration:none;（下划线）}没有访问过的链接是黑色的且没有下划线。

a：visited选择所有已被访问的链接

语法：a：visited{color:red;}链接访问过后的颜色

a:hover选择鼠标指针位于其上的链接

语法：a:hover {color:red;/background- color:red}鼠标经过会更改颜色

a:active选择活动链接（鼠标长按未弹起的链接）

语法：a:active {color：red;}鼠标长按会更改颜色

focud伪类选择器:

语法：input:focus{background-color:red;} 获得焦点的输入框改变背景颜色，也可以改变文字颜色等。内部链接：首页

空连接：首页

下载链接：下载

锚点链接：1.第二集

2.第二集介绍

网页元素链接：

src=“XXX.jpg”>

链接伪类选择器实际开发写法：

a{color:red}链接原本的颜色

a:hover{color:red}鼠标经过链接的颜色

分组标签

头部分组

中/尾部分组

表格标签

定义表格

定义表格行

定义表格标题

定义表格文本rowspan跨行合并

colspan跨列合并

border边境

cellspacing单元格间距cellpadding单元格边距

列表标签

    定义无须列表

      定义有序列表

    1. 无须/有序列表内容

      定义自定义列表

      名词

      名词解释。

      li前端的显示样式list-style-type：

      disc:CSS1实心圆

      circle: CSS1空心圆

      square:CSS1实心方块decimal:CSS1阿拉伯数字

      lower-roman: CSS1小写罗马数字upper-roman: CSS1大写罗马数字lower-alpha: CSS1小写英文字母upper-alpha: CSS1大写英文字母none:CSS1不使用项目符号

      内容溢出

      overflow溢出

      visible不剪切内容也不添加滚动条hidden不显示超过对象尺寸的内容，超出的部分隐藏

      scroll不管超出内容否，总是显示滚动条auto超出自动显示滚动条，不超出不显示滚动条

      图文对齐

      evrtical-align:

      baselinne基线

      top顶线

      mlddle中线

      bottom底线

      元素转换

      ①行内元素转换块元素：display:block;

      ①块元素：常见块元素

      ~

      ,

      ,

      ,