css 尺寸、边框、内边距、背景以及css Sprite

上节课回顾：

HTML标签：格式排版　

p 段落双
br 换行单
hr 分隔线单
h1~h6 标题双
pre 原样格式化输出双
div 标签，无任何特殊意义

HTML标签：文本

<em> 强调倾斜双
<ruby></ruby> 加拼音
<rt></rt>
<strong> 加粗强调双
<mark></mark> 标记选中双
<sub></sub> 下标
<sup></sup> 上标
<ins></ins> 插入的内容
<del></del> 删除的内容

CSS：在html中的使用

link 外部css 单 href type rel
<style> </style>
style属性

CSS选择器以及优先级

#id
.className
tagName

组合 selector1 selector2
组合 selector1>selector2
群组 selector1,selecotr2
and p.item .item.first-item p#nav <div class="item first-item">

选择器优先级

id > class > tagName

CSS属性：字体文本颜色

font:[bold|style] size family
font-family:
font-size:2em
font-weight bold
font-style italic
font-variant: small-caps

color

word-spacing 词的间距，通过空格来识别。
letter-spacing 字母间隔，值为长度，可以是负值。
text-align left/right/center 横向排列
vertical-align: middle/top/bottom 垂直对齐
line-height 设置行间距离
word-wrap: break-word / overflow-wrap 允许长单词或url地址换到下一行
white-space: pre / pre-wrap
text-decoration: underline / overline / line-through / none
text-indent

CSS颜色和长度

颜色
colorName
rgb(100，80，60) rgb(100%,50%,80%)
十六进制 #fff # c1c1c1

长度单位

px 像素

em font-size:2em 字体大小原尺寸的2倍
百分比

CSS 尺寸、内边距、边框、背景

尺寸

width: max-width min-width 设置最大宽度和设置最小宽度
height max-height min-height

边框

border-style 边框风格 solid 实线 / dotted 点线 / dashed 虚线 / double 双层 / none 设置边框：无边框
border-width 边框宽度
border-color 边框颜色后面可以根rgb 也可以直接#f90
border 复合属性 border: 1px solid #ccc

内边距

padding-left：20px；距离左边框20px
padding-top
padding-right
padding-bottom
padding 使用注意点如下：

　　padding: 值; 上下左右
　　padding: 值1 值2；上下左右
　　padding: 值1 值2 值3; 上左右下
　　padding: 值2 值2 值3 值4；上右下左后面要加单位px。

背景属性

background-color 背景颜色 transparent（透明）
background-image 背景图片 url()
background-repeat 背景图片平铺 repeat no-repeat（不重复平铺）repeat-x（水平方向重复平铺） repeat-y（竖直方向重复平铺）
background-position 背景图片位置 10px,10px 根据坐标图片位置
background-position : right center(右中) center center 居中
background-attachment 背景图片固定 scroll / fixed scroll---滚动 fixed --固定
background 复合属性
background: #ccc url('../../dist/images_two/bg02.jpg') no-repeat 10px 10px

CSS Sprite 精灵图

利用 background-position 设置背景图片的位置
把很多小的图片集成到一张大图上
好处：减少网络请求数量

2 超级链接

2.1 a 元素

属性

href 后面跟着要跳转的连接
target = _blank / _self -blank指向一个新的网页
title 单纯的一个图片标题
download H5新增的下载

特殊用法

跳转网页
发短信
打电话
发邮件

2.2 路径

相对路径 ./ ../
绝对路径 URL http://www.biadu.com/index.html
特殊的相对路径 /lesson/path/index.html

2.3 cursor css属性

pointer / move / no-drop

2.4 锚点

设置锚点

第一种方式
<a name="锚点名字"></a>

第二种方式
随便一个元素
<tagname id="锚点名字"></tagname>

跳转到指定锚点

<a href="#锚点名"></a> 注意：# 是在当前页面跳转，不加#会跳到另外一个页面。

2.5 完整URL

http://www.badiu.com/path/demo/contents/index.php?a=100&b=300#mao1

协议protocol http
主机名hostname www.baidu.com / IP
路径 path /path/demo/contents/
文件名filename index.php
查询内容query ?a=100&b=300
锚点 #mao1

3图片

img元素

属性

src 后面跟图片地址
title 图片的标题
alt 图片丢失也能看到图片显示的名字，img元素后最好跟上，好的习惯。
usemap 将图像定义为客户端图像映射。图像映射指的是带有可点击区域的图像。

图片映射

map元素

　　usemap属性与map中的name或id相关联，以建立img与map之间的关系。

name
id

area元素

shape rect（矩形） /circle（圆形） /poly（聚？？？）
coords 坐标矩形取对角两个点，四个值圆取圆心加半径三个值 poly取三个点，六个值
target 指向的页面，如果需要跳到新页面，要指定_blank，不然可以不写或者等于_self
href 后面跟着url地址
title 单纯的图片标题