CSS用户界面样式
所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了。 防止表单域拖拽
鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
cursor : default 小白 | pointer 小手 | move 移动 | text 文本
鼠标放我身上查看效果哦:
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移动</li>
<li style="cursor:text">我是文本</li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标样式</title>
<style>
div {
width: 100px;
height: 100px;
background-color: purple;
cursor: default;/*小白 默认*/
}
.pointer {
cursor: pointer;
background-color: skyblue;
}
.move {
cursor: move;
background-color: green;
}
.text {
cursor: text;
background-color: orange;
}
</style>
</head>
<body>
<div>鼠标经过div 会变换样式 小白</div>
<div class="pointer">鼠标经过div 会变换样式 小手</div>
<div class="move">鼠标经过div 会变换样式 移动</div>
<div class="text">鼠标经过div 会变换样式 文本</div>
</body>
</html>
尽量不要用hand 因为 火狐不支持 pointer ie6以上都支持的尽量用
轮廓 outline
是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作
outline : outline-color ||outline-style || outline-width
但是我们都不关心可以设置多少,我们平时都是去掉的。
最直接的写法是 : outline: 0;
<input type="text" style="outline: 0;"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单轮廓线</title>
<style>
input {
outline: 1px solid red;
/* outline: 0 ; 一般设置为0或none 取消轮廓线 */
border: 1x solid blue;
};
</style>
</head>
<body>
<input type="text">
</body>
</html>
防止拖拽文本域resize
resize:none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。
右下角可以拖拽:
右下角不可以拖拽:
<textarea style="resize: none;"></textarea>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防止拖曳文本域</title>
<style>
textarea {
resize: none;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防止拖曳文本域</title>
<style>
textarea {
resize: none; /* 防止拖曳 */
outline: none; /* 取消轮廓线 */
width: 200px;
height: 120px;
border: 1px solid gray;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
vertical-align 垂直对齐
以前我们讲过让带有宽度的块级元素居中对齐,是margin: 0 auto;
以前我们还讲过让文字居中对齐,是 text-align: center;
但是我们从来没有讲过有垂直居中的属性, 我们的妈妈一直很担心我们的垂直居中怎么做。
vertical-align 垂直对齐, 这个看上去很美好的一个属性, 实际有着不可捉摸的脾气,否则我们也不会这么晚来讲解。
vertical-align : baseline |top |middle |bottom
设置或检索对象内容的垂直对其方式。
vertical-align 不影响块级元素中的内容对齐,它只针对于 行内元素或者行内块元素,
特别是行内块元素, 通常用来控制图片和表单等。
图片、表单和文字对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片与文字对齐</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
margin-left: auto;
margin-right: auto; /* 左右自动 盒子居中对齐 */
text-align: center; /* 文字水平居中 */
/*vertical-align: center; 对于块级元素无效 */
}
img { /* 行内块 */
/* vertical-align: baseline; 默认的基线对齐 */
vertical-align: middle; /* 中线对齐 top 顶线对齐*/
}
textarea {
height: 300px;
width: 500px;
vertical-align: top; /* 顶部对齐 */
}
</style>
</head>
<body>
<div>文字居中</div>
<hr>
<!-- 图片和文字默认的是基线对齐 我们想要的是 中线对齐 -->
<img src="../images/3.jpg" alt="">
萌萌的
<hr>
用户留言:
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
去除图片底侧空白缝隙
有个很重要特性你要记住: 如果一个元素没有基线,比如图片或者表单等行内块元素,则他的底线会和父级盒子的基线对齐。 这样会造成一个问题,就是图片底侧会有一个空白缝隙。
解决的方法就是:
- 给img vertical-align:middle | top等等。 让图片不要和基线对齐。
- 给img 添加 display:block; 转换为块级元素就不会存在问题了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>解决图片底部有缝隙的问题(2种)</title>
<style>
div {
width: 222px;
height: 220px;
background-color: gray;
}
img {
/*display: block; 1. 转换为块级元素 */
vertical-align: middle; /* 2. 设为middle | top */
}
</style>
</head>
<body>
<div>
<img src="../images/3.jpg" alt="">
</div>
</body>
</html>
溢出的文字隐藏
word-break:自动换行
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
主要处理英文单词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>word-break:自动换行</title>
<style>
div {
width: 120px;
height: 20px;
border: 1px solid #f00;
/* word-break: break-all; 允许单词拆开显示 */
word-break: keep-all; /* 不允许拆开显示 连字符特殊 */
}
</style>
</head>
<body>
<div>
my name is Andy.
</div>
</body>
</html>
white-space
white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容
normal : 默认处理方式
nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。
可以处理中文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>white-space</title>
<style>
div {
width: 120px;
height: 20px;
border: 1px solid #f00;
/* white-space: normal; */
white-space: nowrap;
}
</style>
</head>
<body>
<div>
我的名字是安迪,永远的...
</div>
</body>
</html>
text-overflow 文字溢出
text-overflow : clip | ellipsis
设置或检索是否使用一个省略标记(…)标示对象内文本的溢出
clip : 不显示省略标记(…),而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(…)
注意一定要首先强制一行内显示,再次和overflow属性 搭配使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-overflow 文字溢出</title>
<style>
div {
width: 120px;
height: 20px;
border: 1px solid #f00;
white-space: nowrap; /* 首先添加 强制一行显示 */
overflow: hidden; /* 其次必须有这句话 */
/* text-overflow: chip; 直接裁剪*/
text-overflow: ellipsis; /* 超出的部分用省略号代替 */
}
</style>
</head>
<body>
<div>
我的名字是安迪,永远的...
</div>
</body>
</html>