关于css3优化选择器与文本

最新推荐文章于 2024-04-04 22:24:51 发布

True_cl

最新推荐文章于 2024-04-04 22:24:51 发布

阅读量137

点赞数

分类专栏：程序员 css3

本文链接：https://blog.csdn.net/True_cl/article/details/105610167

版权

程序员同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

一，概述

随着时间的发展，很多技术随着时间的变化，技术的更新也在日益优化变得更好，就比如在WEB开发中，采用 CSS 技术，可以有效地控制页面的布局、字体、颜色、背景和其它效果。只需要一些简单的修改，就可以改变网页的外观和格式。随着时代的推进，在Web 开发中也开始采用 CSS3 技术，这门技术会显著的美化我们的应用程序，提高用户体验，同时也能极大的提高程序的性能。

二，关于选择器的优化

相比以前的版本，这方面优化，可以通过一个标签找到其他的标签
以前的版本

<style type="text/css">
		div .spans{
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<span>1</span>
		<span class="spans">2</span>
	</div>
</body>

以前的版本想要设置盒子里面的元素，必须要在里面设置标签，有点麻烦，但是css3的选择器可以轻松解决这个问题
代码演示：

<style type="text/css">
		div span:nth-of-type(2){
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<span>1</span>
		<span>2</span>
	</div>
</body>

这个选择器可以通过父标签找到子标签指定的元素，相对于以前的版本优化省去了给标签起名的这个问题

三，字体样式的优化

对于以前的css字体样式，以前的字体样式，是通过font-family:来设置浏览器内部的规定的字体样式

<style type="text/css">
		span{
			font-family: 楷体;
		}
	</style>
</head>
<body>
	<span>
		太对了！
	</span>
</body>

因为只能使用，而不能满足用户的需求，这时候css3新出了一套新的字体样式，可以通过用户的需求，随意的进行修改字体
代码演示：

<style type="text/css">
	    @font-face{
	    	font-family: user;
            src:url(../font/字体名称.ttf) format('truetype');
	    }
		span{
			font-family: user;
		}
	</style>
</head>
<body>
	<span>
		太对了！
	</span>

四，文字的渲染优化

在这个文字渲染在以前的css,只能单纯的给字体设置放大或者是给设置样式，不能从根本上去给把整体上的样式进行修改，css3也给这个方面进行了相对的优化，让字体看的特别的新颖
代码演示：

div{
    		width: 500px;
    		height: 100px;
    		font-size: 100px;
            margin: 50px 20px;
            background-color: #fff;
            font-weight: bold;
            color: transparent;
            -webkit-text-stroke: 2px #f00;
            font-family: simsun;
            background-image: url(img/pikaqiu.jpg);
            background-repeat: no-repeat;
           
            -webkit-background-clip:text;
            background-clip: text;
            -webkit-text-fill-color:transparent;
            
            text-shadow: 10px 10px 2px rgba(0,0,0,.1);
    	}
    </style>
</head>
<body>
	<div>
		皮卡丘
	</div>
</body>

True_cl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于css3优化选择器与文本

一，概述随着时间的发展，很多技术随着时间的变化，技术的更新也在日益优化变得更好，就比如在WEB开发中，采用 CSS 技术，可以有效地控制页面的布局、字体、颜色、背景和其它效果。只需要一些简单的修改，就可以改变网页的外观和格式。随着时代的推进，在Web 开发中也开始采用 CSS3 技术，这门技术会显著的美化我们的应用程序，提高用户体验，同时也能极大的提高程序的性能。二，关于选择器的优化相比以前...
复制链接

扫一扫