css3新属性partA

2024-06-09 18:17:41

1.新的选择器

其实大家可以预感到，css3的出现一定会给大家带来更加powerful的选择器，我自称为正则选择器：
如果我们现在有5个li标签，但是每个li标签都要求有不同的背景颜色。传统的做法有两种，一种是用内联样式把5个li分别写上不同的background-color，另一种是我们用五个不同的选择器给他们标记出来。但是我们本着css和html分离的原则第一种很丑，第二种又要把同样的代码写5变，感觉又很笨，在不借助js的情况下，我们可以用css3的“正则选择器”去帮我们完成我们想要的效果。具体的预发在下面 ps：css3的这种选择器在ie6以上的选择器的兼容性更好哦（都2019年了我不信正常人还在用ie6）。如果觉得上述的表格还是不是很直观的话我们就不逼逼，看代码按照上面的截图被选中的标签是blue和black，于是乎blue和black被标红了。还是不是很了解的小伙伴们可以跟着我一起敲一下

2.@Font-face 特性

font-face是css3中允许自定义字体的一个模块，它主要是把自定义的web字体嵌入到你的页面中去让页面显得更有个性，比如基本语法是： font-family是字体名字，src是字体的加载路径，font-weight是字体的厚度，font-style是字体的样式图片也可以做成字体，通过这个可以减少图片请求，从而进行性能优化
这个部分设计到iconfont：传送门有兴趣的小伙伴可以好好了解一下
我们接下来partB要讲css3带来的新的样式特性和新的布局方式

css3新属性partA相关推荐

两点补充——CSS3新属性以及弹性布局
CSS3 新属性一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋二 .[CSS 长度单位 ...
从零开始学前端：css3新属性scss和less --- 今天你学习了吗？（CSS:Day22）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:形变 - 今天你学习了吗?(CSS:Day21) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
前端基础8：HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签标签名描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
“约见”面试官系列之常见面试题第三十七篇之CSS3新属性（建议收藏）
目录 CSS3 结构(位置)伪类选择器(CSS3) 目标伪类选择器(CSS3) 属性选择器(CSS3) 伪元素选择器(CSS3,重要) CSS3盒模型(重要) 颜色模式盒子阴影(CSS3) 文本阴影 ...
Css3新属性：calc()
一.前言 calc()看起来像是javascript中的一个函数,而事实上它是用在Css中的,可以用它来计算长度(宽度或高度),能够自动根据不同尺寸的屏幕自动调接数值,从而很轻松的实现自适应布局展示在 ...
css 一些好玩的属性,推荐一些比较有用的css3新属性
css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开始慢慢的去了解并使用css3(还有html5),因为我觉得这是一种趋势,它是一种已经被制定的标准.我并不 ...
CSS3新属性：在网站中使用访客电脑里没有安装的字体
CSS的font-family属性使网页可以使用客户电脑里的字体,从而得到多姿多彩的WEB页面,但当客户端没有你想要使用的字体时怎么办呢?我们总不能让每个访问者都去安装一个字体吧?事实上,这是可以的! ...
运用css3新属性transform写的盒子嵌套展开动画效果
刚刚进园,第一篇博客,记录一下CSS3 绘制盒子效果的方法. css3允许使用 3D 转换来对元素进行格式化,转换是使元素改变形状.尺寸和位置的一种效果,3D转换可以通过设置transform的属性值 ...

最新文章

热门文章