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

上节课回顾：

HTML标签： 格式排版　

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

HTML标签 ：文本

<em> 强调 倾斜 双
<ruby></ruby> 加拼音 ?
<rt></rt> ??
<strong> ?加粗 ?强调 ?双
<mark></mark> 标记 选中 ?双
 ?下标
 ?上标
<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:
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
white-space: pre / pre-wrap
text-decoration: underline ?/ overline / line-through / none
text-indent

CSS颜色和长度

# 颜色
colorName
rgb() rgb()
#十六进制

# 长度
px
em
百分比

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

尺寸

• width max-width min-width

• height max-height min-height

边框

• border-style 边框风格 solid / dotted / dashed / double / none

• border-width 边框宽度

• border-color 边框颜色

• border 复合属性 border: 1px solid #ccc

内边距

• padding-left

• 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

• 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

• 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

• usemap

图片映射

map元素

• name

• id

area元素

• shape rect circle poly

• coords

• target

• href

• title

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

原文地址：https://www.cnblogs.com/Roc-Atlantis/p/9379631.html