CSS学习11

最新推荐文章于 2024-02-15 09:44:07 发布

aneyal

最新推荐文章于 2024-02-15 09:44:07 发布

阅读量725

点赞数 1

分类专栏：前端学习文章标签： css 学习 css3 前端

本文链接：https://blog.csdn.net/aneyal/article/details/123596292

版权

前端学习专栏收录该内容

47 篇文章 2 订阅

订阅专栏

CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，比如说更改用户的鼠标样式、表单轮廓等

鼠标样式

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形象

使用属性cursor设置。

可选值：

default：默认的小白箭头

pointer：小手，尽量不要用hand，因为火狐不支持

move：移动

text：文字

轮廓

是绘制于元素周围的一条线，位于边框边缘的外围，可以起到突出元素的作用

outline: outline-width outline-style outline-color

可以使用outline:0

防止拖拽文本域resize

resize:none可以防止火狐等浏览器随意拖拽文本域

垂直对齐

使用vertical-align

对于块级元素无效，通常用于控制图片或表单与文字的对齐方式

图片和文字默认基线对齐

有四个值：

baseline：基线对齐

top：顶线对齐

middle：中线对齐

bottom：底线对齐

去除图片底侧空白缝隙

对于图片或表单等行内块元素，默认其底线和父级盒子的基线对齐，这可能导致图片底侧有一个空白缝隙

解决办法：可以将图片或表单转换为块级元素，也可以使用vertical-align设置顶线（或中线）对齐

溢出的文字隐藏

自动换行

使用word-break

默认为normal，即使用浏览器默认的换行规则，也可以使用break-all，即允许在单词内换行，还有keep-all，只能在半角空格或连字符处换行。

该属性主要处理英文单词。

设置或检索对象内文本显示方式

通常用于强制在一行显示内容

使用white-space

默认为normal，即默认的处理方式，也可以为nowrap，表示强制在一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行

文字溢出

使用text-overflow，设置或检索是否使用一个省略标记（...）标识对象内文本的溢出

其值默认为clip，不显示省略标记，只是简单地裁切。也可以是ellipsis，表示当对象内文本溢出时显示省略标记。

注意一定要首先使用white-space:nowrap来强制一行内显示，再使用overflow:hidden，最后使用text-overflow属性

CSS精灵技术（sprite）

精灵技术是为了有效减少服务器接收和相应请求的次数，提高页面的加载速度。

精灵技术的本质

简单来说，CSS精灵技术就是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星的背景图像都集中到一张大图中，然后将大图应用到网页之中这样，用户访问网页时，只需要向服务器发送一次请求，网页中的背景图像就可以全部展现出来。通常情况下，这个由很多背景图组成的大图被称为精灵图，也被称为雪碧图。

精灵技术的使用

一般来说，插入的图片不使用精灵技术，背景上的小图片使用精灵技术。

许多小的背景图片构成了精灵图，实际使用时使用background-position定位得到精灵图中我们需要的图。

例如，如果我们需要的背景图在精灵图中的位置是从左上角往下300px开始，则在实际使用时，用background-position：0 -300px就可以定位到我们想要的背景图片。

字体图标

字体图标可以做和图片一样的事，例如改变透明度、旋转度等，但其本质是文字，可以很随便地改变颜色、产生阴影、透明效果等等，并且其本身的体积更小，携带的信息却没有删减，并且几乎支持所有的浏览器。

字体图标使用

设计字体图标

由UI设计人员设计字体图标，保存为svg格式

上传生成字体包

前端人员需要将svg文件转换成我们能够使用的字体文件，并且需要生成的是能兼容各个浏览器的文件。

可以使用网站http://icomoon.io、阿里字体库、

下载兼容字体包

将svg文件上传网站之后，网站会将我们的svg图片转换为我们的字体格式，然后我们就可以进行下载。当然，我们也可以下载现有的图标，下载之后，将文件解压并且将其中的fonts文件放在项目目录下。

使用字体文件

首先要在样式中声明字体，告诉别人我们自己定义的字体

注意这里的icomoon是我们自己定义的字体名字，可以改变，并且要注意路径问题

然后给盒子声明字体:font-family：“icomoon”

最后在盒子中添加结构（假设盒子为span，e9eb是转换文件之后网站给的HTML文件中显示的代码）：

span::before{

content：“\e9eb”;

}

也可以使用转换文件之后网站给的HTML文件中显示的图标，直接将图标复制在<span>和</span>之间。

追加新图标

此时，将原来压缩包中的selection.json重新上传，然后选中自己想要的新的图标，重新下载压缩包，再替换文件就可以了

滑动门技术

为了使各种特殊情况的背景能自适应元素中文本内容的多少，滑动门技术从新的角度构建网页，使各种特殊形状的背景可以自由拉伸滑动，以适应元素内部的文本内容，可用性更强。

滑动门技术原理

滑动门技术就是使用CSS精灵（主要是背景位置）和盒子padding撑开宽度，以便能适应不同字数的导航栏

注意a和span中不能给宽度

before和after伪元素详解

之所以被称为伪元素，是因为它们不是真正的页面元素，html没有对应的元素。但是其所有的用法和表现形式都和真正的元素一样。可以使其使用诸如页面元素一样的css样式

伪元素选择器本质上是插入了一个元素，并且是行内元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
		</title>
		<style>
			div::before {
				content: "吃";
				background-color: pink;
				border: 1px solid deeppink;
			}

			div::after {
				content: "吗";
				background-color: blue;
				border: 1px solid skyblue;
			}
		</style>
	</head>
	<body>
		<div>了</div>
	</body>
</html>

效果：