CSS入门5(0724)
07-24
1.用户界面属性
/*
resize调整元素宽高
none： 不允许用户调整元素大小。
both： 用户可以调节元素的宽度和高度。
horizontal： 用户可以调节元素的宽度
vertical： 用户可以调节元素的高度
*/
div{
width:100px;
height:100px;
background:green;
margin:0auto;
/*resize只适用于具有overflow属性且属性值不为visible*/
overflow:hidden;
resize:both;
}
/*
zoom 等比例缩放元素
*/
div:hover{
zoom:1.2;
}
textarea{
resize:none;
}
2.文字超出
/*
white-space强制不换行（强制文本在同一行显示）
text-overflow文本超出的显示方式
clip将溢出容器的内容直接裁剪
ellipsis将溢出容器的内容以小圆点表示
注意：text-overflow必须配合overflow属性和white-space使用
*/
p{
width:400px;
height:42px;
background: lightblue;
line-height:42px;
/*强制不换行*/
white-space:nowrap;
overflow:hidden;
/*文字超出设置*/
text-overflow:ellipsis;
}
3.不透明度
/*
opacity不透明度
取值为数字，取值范围为0~1
越接近1越不透明，越接近于0，越透明
*/
div{
width:480px;
height:417px;
background:black;
overflow:hidden;
}
img{
width:500px;
height:500px;
transition:all1slinear;
}
div:hover>img{
/*透明度*/
opacity:0.6;
margin-left:-20px;
}
4.颜色的取值
/*
颜色取值：
1、英文
2、六位十六进制 00 00 00
rgb r red g green b blue 代表三原色 取值范围为0~255
rgba r red g green b blue a alpha（透明度） 代表三原色 取值范围为0~255
a的取值范围0~1
hsl h 色调（0-360） s饱和度 l亮度 饱和度和亮度取值为百分比
0(或360)表示红色，120表示绿色，240表示蓝色
hsla h 色调（0-360） s饱和度 l亮度 饱和度和亮度取值为百分比
0(或360)表示红色，120表示绿色，240表示蓝色
a代表透明度 取值范围为0~1
*/
div{
width:300px;
height:300px;
border:1pxsolidblack;
float:left;
margin:10px;
}
div.d1{
background:rgb(200,100,120);
}
div.d2{
background:rgba(200,100,120,0.7);
}
div.d3{
background:hsl(120,20%,50%);
}
div.d4{
background:hsla(120,20%,50%,0.5);
}
5.网页标题图标
<!-- 一般图标大小为16*16 或者24*24 -->
<!-- 设置网页标题栏图标 -->
6.雪碧图
/*
雪碧图 全称（css sprites） 精灵技术
原理：CSS Sprites其实就是把网页中一些零星的图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置
*/
div{
width:100px;
height:100px;
border:1pxsolidred;
background:url(icon.png)no-repeat-1050px-200px;
}
