css新起点
一、字体属性:
1.字体族科font-family
2.字体大小font-size 单位pt 表示尺寸
3字体风格font-style属性:normal普通、italic斜体、oblique倾斜字体
4.字体加粗font-weight属性:值100-900、normal 普通字体、bold加粗、bolder特粗、lighter加细
二、文本属性
- Letter-spacing字母间隔属性 定义附加在字符之间的间隔数量 允许使用负数
- text-decoration文本修饰属性 属性值:underline下划线、overline上划线、line-through删除线、none无任何修饰
- text-align文本对齐 文本水平对齐方式 值:left左对齐、right右对齐、center居中、justify两端对齐
4.text-indent文本首行缩进 可用于块级元素 p h1 等
定义该元素第一行可以接受的缩进的数量 该值必须是一个长度或一个百分比
5.line-height行高的属性 行的间距
三、颜色背景属性
1.color 定义颜色
2.background-color 定义一个元素的背景颜色
3.background-image 定义一个元素的背景图像
格式:body{background-image:url(xx.jpg)}
4.background-repeat决定一个指定的背景图像如何被重复
属性值:repeat-x图像横向重复repeat-y图像纵向重复
repeat图像横向纵向重复、no-repeat图像不重复
5.background-position设定水平和垂直方向上的位置
属性 left 背景图象居左
right 背景图象居右
center 背景图象水平居中 垂直居中
top 背景图象上对齐
bottom 背景图象下对齐
四、边框属性:用于设置一个元素边框的宽度样式和颜色
边框属性 描述
border 边框
border-top 上边框
border-left 左边框
border-right 右边框
border-bottom 下边框
边框样式属性值 描述
none 无边框
dotted 边框由点组成
dash 边框由短线组成
solid 边框是实线
double 边框是双实线
groove 边框是带有立体感的沟槽
ridge 边框成脊形
inset 边框内嵌一个立体边框
outset 边框外嵌一个立体边框
五、光标属性
cursor:值
鼠标光标属性 描述
hand 手
cross-hair 交叉十字
text 文本选择符号
wait WINDOWS的沙漏形状
default 默认的鼠标形状
help 带问号的鼠标
e-resize 向东的箭头
ne-resize 向东北的箭头
n-resize 向北的箭头
nw-resize 向西北的箭头
w-resize 向西的箭头
sw-resize 向西南的箭头
s-resize 向南的箭头
se-resize 向东南的箭头
六、定位属性
CSS提供两种定位方法:
相对定位:是指让操作的元素在相对其它的位置上进行偏移
绝对定位:是指让操作的元素参照原始文档进行偏移
定位属性 描述
position absolute(绝对定位) relative相对定位
top 层距离定点纵坐标的距离
left 层距离定点横坐标的距离
width 层的宽度
height 层的高度
Z-index 决定层的先后顺序和覆盖关系 值高的覆盖值低的元素
Clip 限定只显示剪切出来的区域 为矩形
只要设定两个点即可 top left
bottom right
overflow 当层的内容超出层所能容纳的范围时:
visible 层的 大小 内容会显示出来
hidden 隐藏超出层大小的内容
scrol 不管内容是否超出层的范围 都添加滚动条
auto 只在内容超出层的范围时才显示滚动条
visibility 针对嵌套层的设置
inherit 子层继承父层的可见性
父层可见 子层也可见 父层不可见 子层也不可见
visible 无论父层可见与否子层都可见
hidden 无论父层可见与否子层都隐藏
七.区块属性
在格式化页面对象时,css将所有的对象都放置在一个容器里面
这个容器成为块
区块属性 描述
width 设定对象的宽度
height 设定对象的高度
float 让文字环绕在一个元素的四周
clear 指定在某一元素的某一边是否允许有环绕的文字
padding 决定了究竟在边框与内容之间应该插入多少空间距离
top bottom left right
设定上下左右的填充距离
margin 设置一个元素在4个方向上与IE窗口边界或上一级元素的边界距离
top bottom left right
设定上下左右的距离
八.列表属性
列表属性 描述
list-style-type 设定引导列表项目的符号类型
符号类型属性值
disc 实心圆
circle 空心圆
square 实心方块
decimal 在文本前加普通的阿拉伯数字
lower-roman 在文本前加小写罗马数字
upper-roman 在文本前加大写罗马数字
lower-alpha 在文本前加小写英文字母
upper-alpha 在文本前加大写英文字母
none 不显示任何项目符号和编号
九.滤镜属性(了解即可)
滤镜属性 可以吧可视化的滤镜和转换效果添加到一个标准的html元素
1.alpha滤镜---设置透明层次
{filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,
startx=startx,starty=starty,finishx=finishx,finishy=finishy)}
alpha:属性是把一个目标元素与背景混合 就是一个元素的透明度
opacity: 代表透明度水准
finishopacity:设置渐变的透明效果 范围1---100
style:指定透明区域的形状特征
0 统一形状
1 线形
2 放射状
3 长方形
startx和starty代表渐变透明效果开始的X和Y坐标
finishx和finishy代表渐变透明效果结束的X和Y坐标
2. blur滤镜---模糊效果
语法:{filter:bur(add=add,direction=direction,strength=strength)}
add:它是一个参数值为 true false
指定图象是否被改变成印象派的模糊效果
derection:用来设置模糊的方向 0表示垂直向上 每45度为一个单位
默认值是向左270度
strength 它代表有多少像素的宽度将受到模糊影响
即模糊的强度 默认是5
3. flipH flipV滤镜----水平垂直翻转
4.gray滤镜---灰度
作用就是把一张图片变成灰度图