CSS回顾
CSS的使用
- 元素的style属性内
- style标签内
- link引入外部的css文件
<link rel="stylesheet" href=""> - @import url(""); 写在css中
CSS的基本语法
选择器{
属性:属性值;
}
CSS注释
/*注释*/
CSS的长度单位
- px
- em
- 百分比
- 绝对单位 cm mm pt
CSS的颜色表示
- 英文单词
- rgb方式
- 16进制
CSS选择器
- ID选择器
- CLASS选择器
- 元素选择器
- 全局选择器 *
- 组合-- 后代 selecter selecter
- 组合--子元素 selecter>selecter
- 组合--多条件 p.item
- 伪类
- :link
- :visited
- :hover
- :active
选择器优先级
CSS的属性
CSS字体属性
- font-family sans-serif/serif
- font-size
- font-weight normal/bold/bolder/lighter/数字
- font-style normal/italic/oblique
- font-variant: normal/small-caps
- font
font:[weight/style/variant] size family
CSS颜色属性
- color
CSS文本属性
- letter-spacing 字母间距 默认0px
- word-spacing 单词间距 默认 0px
- text-decoration 值： none/underline/overline/line-through
- text-align 水平对齐方式 left(默认)/right/center
- vertical-align 垂直对齐（基于文字的基线）（图片和文字在一行时多使用 ） baseline/bottom/top/middle/sub/super/text-top/text-bottom/百分比
- text-indent 首行缩进 长度单位
- line-height: 行高 长度单位 设置行高=高 使一行文字垂直居中
font:[style/variant/weight] size/line-height family
CSS背景属性
- background-color 背景颜色
- background-iamge 背景图片 url()
- background-repeat 背景图片的平铺方式 repeat(默认)/repeat-x/repeat-y/no-repeat
- background-postion 背景图片定位 left/center/right/长度单位 top/center/bottom/长度单位
- background-attachment 背景图片固定或滚动 scroll(默认)/fixed
background:color image repeat postion
CSS边框属性
- border-width 边框线的宽度 长度单位
- border-color
- border-style 边框线的风格 solid/dotted/dashed/double...
- border
border:width style color - border-left/right/top/bottom
CSS鼠标光标属性
- cursor 值 default/pointer/move/crosshair/text/wait
CSS列表属性
- list-style-type 列表项的图形 disc/circle/square/decimal/lower-roman/upper-roman ....
- list-style-postion 列表项图形的位置 outside/inside
- list-style-iamge 自定义列表图形 url
- 最常见的设置
list-style:none
CSS表格属性
- table-layout 表格布局方式 auto/fixed
- border-collapse 合并单元格边框 separate/collapse
- border-spacing 单元格间距 长度单位
- caption-side 表格标题位置 top/bottom
- empty-cells 没有内容的单元格是否隐藏 show/hide
CSS sprites css精灵图
通过使用background：x坐标 y坐标；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵图</title>
<style>
p{
25px;
height:25px;
border:1px solid #ccc;
}
.p1{
background:url('../../dist/images/iconlist.png') no-repeat 0px -125px;
}
.p2{
background:url("../../dist/images/iconlist.png") no-repeat -25px -225px;
}
.p3{
55px;
height:55px;
background:url("../../dist/images/fenju.jpg") no-repeat -27px -95px;
}
</style>
</head>
<body>
<h1>精灵图</h1>
<hr>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
</body>
</html>
DIV+CSS布局
行内元素和块状元素呢
- 块状元素独占一行， 行内元素可以共用一行
- 默认宽度： 块状元素默认宽度由父元素决定 行内元素默认宽度右内容决定
- 块状元素可以设置宽高， 行内元素不可以设置宽高
- 大部分块状元素内部可以嵌套块状或行内， 大部分行内只能嵌套行内
- 外边距，块状没问题，行内只能设置左右