HTML5的快速使用和css3的入门知识汇总

各位开发者朋友和技术大神大家好！博主刚开始学习html5 ，自本周开始会每周更新技术博客，与大家分享每周所学。鉴于博主水品有限，如发现有问题的地方欢迎大家指正，有更好的意见和建议可在评论下方发表，我会第一时间回复。好了，话不多说，下面开始我的分享！

第一章 HTML的初识

一、HTML的基本结构

<!DOCTYPE html>

<html>
<head>


<meta name="autor" content="www.jredu100.com" />

<meta name="keywords" content="html5,网页,Web前端开发" />

<meta name="description" content="这是我在杰瑞教育开发的第一个网页" />
<meta charset="UTF-8">


<link rel="icon" type="image/x-icon" href="img/gouwuche.png">
<title>我的第一个网页</title>

</head>
<body>

</body>
</html>

二、常见的块级标签

<!DOCTYPE html>
<html>
<head>

<hr />

<p>p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，<br />这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字</p>
<p>p标签是段落标签，<br />这里是第二段文字</p>

<blockquote cite="http://www.jredu100.com">
横      眉冷对千夫指，俯首甘为孺子牛。
</blockquote>

<pre>哈哈哈哈哈哈哈哈
啊哈哈哈哈哈哈啊哈
</pre>

<pre>1
2
3
4
5
</pre>

<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>

<ul>
<li>无序第一项</li>
<li>无序第二项</li>
<li>无序第三项</li>
</ul>

<dl>
<dt>这是定义列表的标题</dt>
<dd>描述项1</dd>
<dd>描述项2</dd>
<dd>描述项3</dd>
</dl>
<!--
组合标签：<figure></figure> 用于显示图片及图片标题
两个子标签：<img /> 图片
<figcaption></figcaption> 图片的标题

浏览器显示效果为：图片与标题上下排列，且整体向后缩进一个单位。
-->
<figure>
<img src="img/shouye.png" />

<figcaption>这是图片标题</figcaption>
</figure>

<div style="width: 100%; height: 100px; background-color: red;">
这是div里边的文字
<h1>这是div的标题</h1>
</div>

</body>
</html>

三、常见的行级标签

<!DOCTYPE html>
<html>
<head>
<a name="top"></a>
<meta charset="UTF-8">
<title>行级标签</title>
</head>
<body>


<span style="color: blue; font-size: 36px;">大家好</span>，
我是<span style="color: red; font-size: 36px;">Span</span>中的文字
<br />

<em>我被em标签强调了</em>
<br />

<strong>我被strong标签强调了</strong>

<i>我被i标签倾斜了！！</i>
<br />

<b>我被b标签加粗了！！！！</b>
<br />

<q cite="http://www.jredu100.com">这是短引用标签q中的文字</q>
<br />

<small><small>我被small缩小了一号。</small></small><br />
<big>我被big标签放大了</big>
<br />
<br />
<!--img（图片）
1、src：表示图片引用路径。
src常见路径地址的写法：
# ① 相对路径：以当前文件为准，去寻找图片地址。
a、与当前文件处于同一层的图片，直接写图片名
b、图片在当前文件下一层：文件夹名/图片名,如 img/shouye.png
c、图片在当前文件上一层：../图片名,如 ../shouye.jpg(png)
使用相对路径时，图片所能放的最外层只能放到网站根目录（图片必须在项目文件夹中）
② 绝对路径：写法：<img src="file:///盘符:/文件夹/图片.后缀名">。但是，严禁使用!!!
③ 网络链接：网络上的图片链接。但是，一般不使用。但是图片在别人服务器，不可控，不建议使用。

2、height="" width="" 图片的宽度高度。可以用css样式(style="width: ; height: ;")代替

3、title:图片标题。当鼠标指上后显示的文字。

4、alt:当图片无法加载的时候，显示的文字。

5、align：设置图片周围文字相对于图片的位置。top， center ，bottom
-->
<img src="img/shouye.png" height="100px" width="100px" title="鼠标指上时显示的文字"
alt="当图片没有加载成功时显示的文字" align="center"/>

<br />

<!--a标签：超链接
属性：
1、href：超链接跳转的地址。可以写网络连接，或本地HTML文件的相对路径，确定方式同img的src路径。
2、target：设置超链接打开窗口的位置。_self 自身页面打开（默认） _blank 新页面打开。
3、title：鼠标指上后显示的文字
4、rel：表明即将跳转的页面，以当前页面的关系。
rel="prev" 即将跳转的页面，是当前页面的前一篇文章
rel="next" 即将跳转的页面，是当前页面的后一篇文章
【记住】rel="icon" 被链接图片是当前文档的图标 rel="stylesheet" 被链接文档是当前文档的样式表
rel="prefetch" 预加载。在当前文档加载完成后，利用空余时间，预加载即将链接的文档

[target功能性链接]
mailto://jianghao@jerei.com
tencent://message/?uin=529169579
[锚链接]
1、本页面的锚链接
（1）设置一个锚点：<a name="top"></a>用name属性表示锚点名称
（2）在超链接的href属性中，使用#name 跳到指定的锚点位置。
2、其他页面锚链接
(1)需跳转的页面设置锚链接
(2)在超链接的href属性,文件名.html#name。
<a href="aaaa.html#top">其他页面锚链接</a>
注：由于谷歌/IE的兼容问题，需在锚点中，插入一个坑空格才能生效，
<a name="top">&nbsp</a>
-->
<a href=" mailto://jianghao@jerei.com" title="鼠标指上后显示的文字" target="_self">这是一个超链
接到邮箱自身页面打开</a>
<br /><br />
<a href="https://www.baidu.com" title="鼠标指上后显示的文字" target=" _blank">这是一个超链接到新
  百度</a>
<br /><br />
<a href="tencent://message/?uin=529169579" title="鼠标指上后显示的文字" target=" _blank">跳
到qq聊天</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<a href="#top">跳到本业锚链接top</a><br /><br />
<a href="唐诗三百首.html#top" target=" _blank" >其他页面锚链接top</a><br /<br /

<s>这是s标签中的文字</s>
<br />

<cite>这是cite标签</cite>
<br />

<pre>
<code>
StringBuffer sb = new StringBuffer();
for(String s : arr){
sb.append(s);
}
</code>
</pre>
<br />

<bdo dir="ltr">1234567</bdo>
<br />

请输入“<kbd>Esc</kbd>”退出系统。
<br />

X<sup>2</sup>
X²
<br />

© 空格  
<br />

<u>这是u标签</u>
<br />

<mark>哈哈哈哈哈</mark>

</html>

第二章表格及表单

一、表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<tr>
<td align="center">1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
</table> <br />
<table width="500" border="5" bordercolor="red" cellspacing="4"
style="border-collapse: collapse;" cellpadding="10" align="left" bgcolor="#0000FF"
background="img/shouye.png" >
<tr>
<th>学号</th>
<th>姓名</th>
<th>数学成绩</th>
<th>语文成绩</th>
<th>英语成绩</th>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>100分</td>
<td>120分</td>
<td>120分</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>110分</td>
<td>123分</td>
<td>124分</td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>150分</td>
<td>120分</td>
<td>120分</td>
</tr>
</table>
<!-- 【表格table】
表格<table></table>
表格的行<tr></tr>
表格的列<td></td>
表格的表头列<th></th> (将tr中的td，替换为th，表示本行为表头)
th 默认加粗，且在单元格居中显示

【table的常用属性】
1、Border：当使用border="?"设置边框时，会在所有td以及table上嵌套边框，当border加
大时，只有table最外层框线加粗，td单元格上的框线不会变化。

2、Cellspacing：单元格与单元格之间的间隙。当cellspacing="0"时，单元格之间的间隙为0，
但边框线并没有合并（边框线还是两条线的宽度）

##[合并边框的写法] style="border-collapse:collapse;" 使用边框合并后，无需设置
cellspacing。

3、Cellpadding：单元格中文字与单元格边框之间的距离（单元格内边距）
4、Width ：表格的宽高。
Height
5、Align:设置表格在父容器中的对齐方式：left居左，center居中，right居右。
【注意】当表格使用align属性时，相当于使表格浮动，可能导致表格后面的元素受表格浮动影
响，导致布局错乱。
6、Bgcolor：背景色
Background：背景图片，后接相对路径。当背景图和背景色同时生效时，背景图会覆盖背景色。
Bordercolor：边框颜色
-->

<br /><br /><br />
<table width="800" border="1" bordercolor="red" cellspacing="2"
cellpadding="5" align="center"
>
<tr>
<td align="center" colspan="3">杰瑞教育</td>
</tr>
<tr>
<td >HTML5</td>
<td rowspan="2">Android</td>
<td >IOS</td>
</tr>
<tr>
<td >java</td>

</tr>
<tr>

</tr>
<tr>

</tr>
<tr>

</tr>
</table>
<table width="500" border="5" style="border-collapse: collapse;" bordercolor="pink">
<tr>
<td rowspan="6">111</td>
<td rowspan="3">111</td>
<td rowspan="2">111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td rowspan="2">111</td>
<td>111</td>
</tr>
<tr>
<td rowspan="3">111</td>
<td>111</td>
</tr>
<tr>
<td rowspan="2">111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
</table>

</body>
</html>

二、表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--[form表单]
1、两个重要属性：
action:表单需要提交的服务器地址
method:表单提交数据使用的方法：get/post
>>>get和post的区别
(1)get传参使用URL传递，所有参数在地址栏可见，不安全；get传参数据量有限
(2)post传参使用http请求传递，比较安全；post可传递大量数据；
但是，get请求传输速率要比post快

>>>URL的传参形式：链接URL地址？name1=value1&name2=value2

2、input的常用属性：
(1)type：设置input的输入类型
(2)name：给input输入框起名，一般情况下，name属性必不可少，因为，传输数据时使
用name=value(输入内容) 的传形式传递
(3)value：input输入框的默认值。
(4)placeholder：输入框的提示内容。当input有默认的value输入值时，placeholder消失。

3、input-type属性的常用值：
(1)text：文本输入框
(2)password：密码输入框，输入内容默认显示小黑点。
(3)radio：单选框 checkbox：复选框
>>>使用radio时，value属性必填，提交时，提交的内容为value中的默认值，
>>>radio凭借name属性确定是否属于同一组，name相同为同组，只能选一个。
>>>使用checked="checked"属性，设置默认选中项。
(4)file:文件上传
>>>使用accept="类型"，设置只能上传上传的文件类型，image/*任意格式图片。

(5)submit：提交按钮。将所有表单数据，提交至后台服务器。
(6)reset：重置表单数据。将表单数据恢复至默认状态。
(7)image：图形提交按钮。跟submit一样，具有表单提交功能。
使用src属性，选择图片路径。
(8)button：普通按钮，没有任何卵用。
4、属性名等于属性名的情况：
① checked="checked" 设置radio/checkbox的默认选中项
② multiple="multiple" 设置select控件为多选控件
③ selected="selected" 设置select控件默认选中的option选项
④ readonly="readonly" 设置为texearea只读模式，不允许编辑。
⑤ disabled="disabled" 禁用控件。当input被disabled时，该input的name和value将无法向后台传递。
⑥ hidden="hidden" 隐藏控件。等效于<input type="hidden"/>
(7)nowrap="nowrap"设置单元格文字行末不断行（属性值可以不写）

5、【下拉选择控件 select】
① 写法：<select>
<option></option> //可以有N多个
</select>
② name属性，应该写在<select>上，所有选项只有一个name
③ multiple="multiple" 设置select控件为多选，可在界面使用Ctrl+鼠标，进行多选。一般不用。
④ option常用属性：
value="":当option没有value属性时，往后台传递的是<option></option>标签中的文字；
当option有value属性时，往后台传递的是value属性的值。
title="":鼠标指上后显示的文字。
selected="selected":默认选中。

⑤ <optgroup label="山东省"></optgroup> :用于将option标签进行分组，label属性表示分组名。
6、【文本域 textarea】
① 写法：<textarea></textarea>
② 设置宽高style="width: 200px; height: 150px;" 自身有cols="" rows=""两个属性，但不常用
③ readonly="readonly" 设置为只读模式，不允许编辑。
④ style="resize: none;" 设置为宽高不允许修改。
⑤ style="overflow: ;" 设置当文字超出区域时，如何处理。
>>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
>>> 常用属性值:hidden 超出区域的文字，隐藏无法显示
scroll 无论文字多少，均会显示滚动
auto 自动，根据文字多少自动决定是否显示滚动条（默认样式）
7、表格的边框与标题
<form>
<fieldest>表格的边框
<legend>表格的标题</legend>
。。。N多个表单元素（input/select/textarea）
</fieldest>
</form>
注：一个表单，可以有多组边框+标题
-->

<!--【html5智能表单】
① H5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签之中，即可通过表单进行提交。
<FORM id=foo>
…
</FORM>

<INPUT … form="foo">
② 新增N多个type新属性，详见表格

③ 新增input的属性：
Autocomplete：自动完成功能。
>>> 记忆之前输入过的内容，在下次输入时，根据以前的内容提示，自动完成。
>>> 绝大部分浏览器自动开启。
>>> 有两个属性值：off/on
>>> 可以在<form>标签上设置Autocomplete，控制整张表单的自动完成开关。但可以在
个别input上单独设置，覆盖form的整体设置。

Autofocus：自动获得焦点.autofocus="autofocus"

Form：所属表单，通过form表单的id,指向特定表单。

Required：必填。required="required" 设置input为必填。

Placeholder：输入框的提示内容。当input有默认的value输入值时，placeholder消失。

-->
<form action="" method="get" id="form1" autocomplete="on">
<fieldset>
<legend>用户注册</legend>
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="username" placeholder="请输入用户名" value="11111"
autocomplete="on"/>
<input type="hidden" name="username" value="11111" />
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="password" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="男" checked="checked"/>男
<input type="checkbox" name="hobby" value="女" checked="checked"/>女
</td>
</tr>
<tr>
<td>头像：</td>
<td>
<input type="file" name="head"/>
</td>
</tr>
<tr>
<td>城市：</td>

<tr>
<td>用户协议</td>
<td></td>
</tr>
<tr>
<td colspan="2">
<textarea style="width: 200px; height: 100px; resize: none; overflow-y: scroll;"
readonly="readonly">这是服务协议！这是服务协议！这是服务协议！</textarea>
</td>
</tr>

</body>

</html>

第三章 CSS样式表

一、CSS常用选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS常用选择器</title>

<style type="text/css">
/*CSS语法必须写在<style>标签中*/
/*CSS注释*/

/* 【通用选择器】
* 1、写法： *{}
* 2、作用：选中页面中的所有HTML标签
* 3、优先级：最低！
*/
*{
/*background-color: red;*/
}

/* 【标签选择器】
* 1、写法： HTML标签名{ }
* 2、作用：选中所有对应的HTML标签，并修改其样式
*/
li{
color: red;
font-size: 36px;
}

/* 【类选择器 class选择器】
* 1、写法： .选择器名{}
* 2、调用：在需要修改样式的HTML标签上，使用class="选择器名"
* 3、优先级：当作用于同一层时，class选择器>标签选择器
*/
.list{
color: blue;
}

/* 【ID选择器】
* 1、写法： #选择器名{}
* 2、调用：在需要修改样式的HTML标签上，使用id="选择器名"
* 3、优先级：同一层时，id选择器>class选择器
* 4、ID选择器是唯一的！同一页面严禁出现同名ID！！！
*/
#first{
color: green;
}

/* 【后代选择器】
* 1、写法：选择器1 选择器2 …… 选择器N {}
* 2、生效规则：选择器2必须是选择器1的【后代】……以此类推
*
* 【子代选择器】
* 1、写法：选择器1>选择器2>……>选择器N{}
* 2、生效规则：选择器2必须是选择器1的【直接子代】……
*/
div>ul>li{
/*background-color: yellow;*/
}

/* 【交集选择器】
* 1、写法：选择器1选择器2……选择N{}
* 2、生效规则：必须同时满足所有选择器，才会生效
*/
li.list#first{
background-color: yellowgreen;
}

/* 【并集选择器】
* 1、写法：选择器1,选择器2,……,选择N{}
* 2、生效规则：满足任意一个选择器，均可生效
*/
.list,#first{
color: darkslategray;
}

/* 【选择器命名规范】
* 1、只能有字母、数字、下划线组成；
* 2、开头不能是数字。
*/
.ul_1{
background: red;
}

/* 【选择器优先级】
* 1、就近原则：近者优先。
* 2、当作用于同一层时：可有权重计算
* 权重划分：标签选择器 1
* class选择器 10
* id选择器 100
* 行级样式表style="" 1000
* #ul .li .li2 li{} 优先级权重121
* li .li1 .li2 .lis2 {} 优先级权重31
* #ul #li li{} 优先级201
*
*/

float：left（悬浮）

/*伪类选择器：
1.写法：选择器名：伪类状态{}
常见的伪类状态：
：link未访问
：visited已访问
：hover鼠标指上状态
：active激活选定状态
注，当超链接同时具有以上四种状态则选择器必须按照上述顺序排列
：focus获得焦点
*/

a:link{
color:burlywood;
text-decoration: none;
}
a:visited{
color: red;
}
a:hover{
color: green;
text-decoration: underline
}
a:active{
color: deepskyblue;
}

</style>

<!-- 【三种使用CSS的方式】
1、行内样式表：直接在HTML开始标签中使用style=""的方式引用；
特点：将CSS代码与HTML代码完全糅杂在一起，不符合W3C关于内容与表现分离的要求。不利于样式复用；
优先级：最高。

2、内部样式表：在<head></head>中，使用<style type="text/css"></style>方式引用；
特点：将CSS代码与HTML代码分离，但是没有彻底分离CSS文件与HTML文件，不利于多页面复用样式。

3、外部样式表：使用link标签链接CSS文件。
<link rel="stylesheet" type="text/css" href="css/01css.css" />
特点：实现了CSS与HTML的彻底分离，有利于样式复用及后期维护。

-->
<link rel="stylesheet" type="text/css" href="css/01css.css" />

</head>

<body>

<div>
<ul class="ul_1">
<li class="list" id="first">这是列表项1</li>
<li>这是列表项2</li>
<li class="list">这是列表项3</li>
<li>这是列表项4</li>
<li class="list">这是列表项5</li>
</ul>
</div>

<ul>
<li class="list" id="first">这是列表项1</li>
<li>这是列表项2</li>
<li class="list">这是列表项3</li>
<li>这是列表项4</li>
<li class="list">这是列表项5</li>
</ul>

</body>
</html>

二、CSS常用文本属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
* /* [CSS常用文本属性]
* 1、字体、字号：
font-weight:字体的粗细，可选属性值：bold加粗 lighter细体
100~900数值(400正常，700 bold)

font-size:字体大小 **PX **%（浏览器默认字体大小的百分比，绝大部分默认16px）

font-family:字体族，设置字体。
>>>多个字体样式间用逗号分隔，浏览器解析时，会从左往右依次解析，选择可用字体。
>>>一般前面使用具体字体名称，最后一个使用字体族类名称。
（常用字体族名称：衬线体serif 非衬线体sans-serif(常用) 等宽体Monospace）
>>>例如：font-family:Arial, 'Microsoft Yahei', sans-serif;

font-style:字体样式,正常(normal) 斜体(italic)

* font-variant：small-caps; 将字母转为小型大写字体。

(了解)font缩写形式：font-style font-variant font-weight font-size line-height font-family
>>> 使用注意事项：
① 顺序必须严格按照上述顺序；
② 多个样式之间用空格分割，而且font-size/line-height 必须作为一对用/分割
③ font-size和font-family必须指定，其他样式不指定将采用默认样式显示；
>>> 例如：font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
斜体加粗字号/行高字体族(微软雅黑，非衬线字体族)

2、字体颜色：
color:字体颜色
opacity:透明度,0~1之间的数字。调整时控件以及子控件均会透明，而使用rgba调整时，
只会时本控件透明，子控件不会发生透明度变化。

3、行距、对齐等：
line-height:行高 ① 像素单位 48px ② 不带px 正常行高的倍数 ③百分数同2
>>> 典型应用，调整控件中文垂直居中的方式：控件的height=控件的line-height

text-align:块级元素中文字的水平对齐方式 left center right

letter-spacing:字符间距,字与字之间的间距

text-decoration:文本修饰下划线underline、删除线line-through、上划线overline、none

overflow:控制超出范围文本的显示方式(auto 根据文字多少自动显示滚动条，scroll始终显示滚动条，
hidden 超出范围文本隐藏) 可以通过overflow-x overflow-y分别设置水平垂直方向

text-overflow:设置多余文字的显示方式 clip裁剪掉 ellipsis省略号
>>>【重点】让每行多余文字显示省略号：
① white-space: nowrap; 如果是中文，需设置行末不断行
② overflow: hidden; 设置控件超出范围隐藏
③ text-overflow: ellipsis; 设置多余文本省略号显示

white-space: nowrap; 设置行末不断行显示

word-break: 浏览器默认在空格处断行，当一个单词长度超出范围时，
会不断行显示， break-all 允许在单词内换行。

text-shadow:文本阴影，有四个属性值：
①水平阴影距离必选，数值越大，阴影右移
②垂直阴影距离必选，数值越大，阴影下移
③阴影模糊距离可选，数值越大，阴影越模糊。默认为0，不模糊
④阴影颜色可选，默认为黑色

text-indent:首行缩进，可用像素值调整缩进大小

* text-stroke: -webkit-text-stroke: 0.2px #008000; 描边的粗细，描边的颜色

*{font:italic bold 16px/20px 'Microsoft Yahei', sans-serif;
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

.div1{width: 200px;height: 300px;background-color: #CCCCCC;}

</style>

</head>

<body>
<div class="div1">
<p>
这是列表项1这是列表项1这是列表项1这是列表项1这是列表项1这是列表项1
这是列表项1这是列表项1
</p>
</div>
<br /> <br /> <br /><br /><br />

</body>
</html>

三、CSS常用背景属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 【CSS常用背景属性】
background

background-color:背景色

background-image:背景图, 写法：background-image: URL(图片地址相对路径);背景图和背景色同时存在时，
背景图会覆盖背景色

background-repeat：背景图重复方式，no-repeat不平铺 repeat平铺(默认) repeat-x水平平铺
repeat-y垂直平铺

background-size:背景图大小。
【指定宽度高度】
>>> 宽高的写法，第一个属性值为宽度，第二个属性值为高度，可以：①直接写像素
②写百分比（父容器宽高的百分比）
>>> 当只有一个属性值时，默认为宽度。高度等比缩放。
当有两个属性值时，会按照指定的高度宽度进行压缩/拉伸显示。
【其他属性值】
>>> contain:图片等比缩放，缩放到宽或高的某一边等于父容器的宽高，另一边按照图片大小缩放
（可能导致部分空余区域无法覆盖）
>>> cover:图片等比缩放，使背景图像完全覆盖背景区域。(可能导致背景图部分区域无法显示)

background-position：位置坐标、偏移量
>>> 指定位置：left/center/right top/center/bottom
当只写一个属性值时，另一个默认居中
>>> 填写坐标：水平位置垂直位置 (像素或百分比形式)
① 当只写一个属性值时，默认写的为水平方向，则垂直居中
② 当使用像素时：图片的左上角往各个方向移动的实际距离
水平方向：正数右移负数左移垂直方法：正数下移负数上移
(左负有正上负下正)
③ 当使用百分数时，一般只能是正数。代表去掉图片后，剩余空白距离的分布比例。
例如 background-position：30%;
水平方向去掉图片后，剩余区域3:7分

*/
div{
width: 27px;
height: 27px;
background-image: url(css/icon.gif);
/*background-color: red;*/
background-repeat: no-repeat;
/*background-size: 100% 100%;*/
background-position: -165px -27px;
white-space: nowrap;
text-indent: 30px;
line-height: 27px;}

.first{background-position: -45px 0px;}

</style>
</head>
<body>

帮助中心
</div>

</body>
</html>

本周的分享就到这里，下周再见！

秒客网

HTML5的快速使用和css3的入门知识汇总

相关文章