css常用属性

来源:互联网 发布:淘宝网点照明设计软件 编辑:程序博客网 时间:2024/06/05 19:51
背景
blackground-color 背景颜色
padding 内边距
blackground-image:url("iamage/bg.png"); 背景图片
blackground-reprt 是否允许重复
blackground-position:100px 100px 图片起始位置
blackground-attachment 设置背景图片是否随着内容滚动3
blackground- origin 规定背景图片的定位区域
blackground-clip 规定背景的绘制区域


文本
direction 文本方向
line-height 行高
letter 字符间距
text-align 对齐方式
text-indnet 文本字符缩进
text-decoration 向文本添加修饰
text-transform 管理文本中字母
unicode-bidi  设置文本方向
white-space 设置文本中空白的地方
word-spacing 字间距
text-shandow  向文本添加阴影
word-wrap 规定文本的换行规则

字符
font-size 字体大小
font-family 字体
@font=face{    引入字体
font-family:myfont;
src:url;
}

链接
a:link{}  普通的未被点击的链接
a:visited{}  已经点击过的链接
a:hover{}     鼠标位于链接上
a:active{}   被点击的时候

text-decoration 去掉链接中的下划线

列表
list-style-type  列表类型就是前面的那个点是圆心的实心的还是数字
list-style-position 列表标志位置
list-style-image 列表项图像

表格
border:1px solid blue 边框大小颜色
border-collapse 折叠边框
text-alin 文字对齐方式
border-radius:30px;设置圆角边框

轮廓
outline 设置轮廓样式属性
outline-cloor 设置轮廓颜色
outline-style 设置轮廓样式
outline-width 设置轮廓宽度

定位
position:absolute绝对布局/fixed固定布局/relative 相对布局(left/right/top/button:20px 向各个方向偏移)/static静态布局
z-index 设置层级关系

操作
line-height:120%; 设置行高,实现行间距

clear 设置一个原色的侧面是否允许其他的浮动元素
cursor 规定当指针指向某个元素时指针的类型
display 设置是否以及如何显示元素显示元素(display:block使之成为一个块元素这样就可以添加背景颜色或者照片)

visibi 设置元素是否可见

6+66
outline -color  设置轮廓颜色
outline -style   设置轮廓样式
outline -width    设置轮廓宽度


css定位
left 左偏移



布局
position:relative 相对布局
          absolute 绝对布局
          static 静态布局

z-index  设置曾局关系,谁覆盖谁,谁在前面
vertical-align 设置元素垂直对齐方式

float :left 浮动(后一个元素出现在前一个元素的哪个方位)

边框
border-style:dotted; 边框样式
border-top/left/right/bottom-style: ; 上下左右单边框样式
border-width  border-top/left/right/bottom-width 边框宽度
border-color 边框颜色
border-radius 圆角边框
bodder:2px solid blue; 增加边框
border-shadow:10px 10px 5px blue;边框阴影
border-image 边框图片

margin 外边距
marign:0px auto;这样就会居中
padding 内边距
 

对齐
marign:0px auto;这样就会居中
marign-left:auto;
marign-right:auto;
line-height:50%;设置行高,行间距


分类操作
clear  设置一个元素的侧面是否允许其他浮动元素
cursor 规定当鼠标指向某元素之上时显示的指针类型
display  设置是否以及如何显示元素
float   设置元素在哪个方向浮动
position 把元素放置到一个静态的·相对的,绝对的,固定的位置
visibility  设置元素是否可见

图片操作
给图片和文字描述增加一个边框
.image{
border:1px solid blue;
width:auto;
height:auto;
float:left;
text-alin:center;
margin:5px;
}

选择器
元素选择器
多类选择器
.class1.class2{  既有class1的属性,也有class2的属性,还有自己的color属性
color:blue;
}

属性选择器
[this]{
}
<p this="">hellow</p>

后代选择器
class1 class2{
}

子代选择器
h1>strong{}

2d 3D转换
我们能对元素进行移动,缩放,转动,拉长或者拉伸
2d转换方法
translate()


瀑布流显示模式
stlel.css
.container{
column-width:250px;  设置列表的宽度
-webkit-column-width:250px; 设置浏览器适配
-webkit-column-gap:5px;  设置图片之间的一个间距
-moz-column-gap:5px;  
column-gap:5px;
}

.container div{
width:250px;
margin;5px 0;
}
0 0