CSS3新技能学习笔记

  说来惭愧自认为对css了解,但在项目中却很少有正确的使用css,如果面向对象的css吧,其实也不是不想用而是css天生就是面向对象的,高度可重用,但是如果把每个都单独提取,难免会有过多的class以及自己也比较懒。

  你要干嘛就选择什么样的标签,命名也一样。从内容本质出发,它是干什么的。

  微型格式,如果某些内容需要的标签没有,可以使用class来代替 class="vcard"联系信息。

  

  通过需求和流程图可以事先考虑如何布局使用什么元素。

标签的使用:
  ul无序列表
  ol有序列表
  dl>dt+dd描述内容 可以用在商品之类的描述上
  blockquote描述,q短描述 cite引用 可以用在用户评论上
  em强调

css属性
  用outline替代border这样就不用再减border的值了或者使用box-sizing:border-box;

  又想设置高度有想高度自适应可以使用min-height

  box-sizing
    表示width宽度包含哪些,默认值是content-box表示width只包括内容宽度

媒体查询

  @media screen and (min-width:640px)
    screen屏幕(width:xx)包括浏览器滚动条

    only对不支持该语法的浏览器隐藏此规则
    not如果浏览器不满足设置的条件可以通过not来设置

  • 通过device-width可以获取设备宽和高不包括浏览器滚动条。
  • 通过orientation特性可以根据屏幕的宽度和高度的比较设计不同样式。orientation:landscape当浏览器宽度大于高度的时候会被匹配成功,而portrait则相反。我们可以用它来实现响应式的导航。
  • touch-enabled可以匹配触摸屏

通过媒体查询和rem实现响应式字体大小

html{
  font-size:10px;
}
@media only device-width and (min-width:360px) {
  html{
    font-size: 11px!important;
  }
}
@media only device-width and (min-width:400px) {
  html{
    font-size: 13px!important;
  }
}
@media only device-width and (min-width:1000px) {
  body{
    max-width:640px;
    margin:0 auto;
  }
}

  iPhone、iPad,和Android等设备会通过四个屏幕侧边中较短的一对去测量device-width。也就是说,给定尺寸为320×480的设备,不管是以纵向还是横向模式去查看,device-width都会是320px。

网页字体

  @font-face定义字体规则

  @font-face{
    font-family:字体名;
    src:local('字体名'),url('你要导入的字体路径') format('字体类型')
  }

local使用源字体的名称去检查字体是否已经安装在用户的机器上;url提供一个指向字体的路径,当字体在本地不可用时使用;而format指定字体的类型

通过font-family:字体名,来使用,并且可以覆盖字符。

兼容IE9以下

src:url('xx.eot');
ie9以下支持eot格式,不支持local

为了兼容强制下载所定义的字体
local('☺')

可以指定多个url路径以,分割达到兼容的效果。

更简单的兼容方法

@font-face{
  font-family:name;
  src:url('filename.eot?') format(eot),
  url('filename.woff') format('woff'),
  url('filename.otf') format ('opentype'),
  url('filename.svg#filename') format('svg');
}

  @font-face生成器(http://www.fontsquirrel.com/fontface/generator/)。只要简单上传你要使用的字体文件,@font-face生成器就会将其转化为所有相关的格式——而且还可以生成需要在页面中使用的CSS。

font-stretch属性,它告诉浏览器显示的字体风格要比当前更窄一些。

使用font-size-adjust属性。该属性可以动态修改font-size属性。

文本效果

  text-shadow:x y blur-radius color
  文字阴影,支持多重阴影用,分割

  -webkit-text-stroke:width color
  描边

  -webkit-text-fill-color:color
  填充,对字符的轮廓进行描边

  text-overflow:ellipsis
  用省略号替换超出的文字
  white-space:nowrap;
  防止文本被折叠成多行

  注意还需要加overflow:hidden;并且宽度。

  resize:both;
  改变元素大小

  text-align:justify;
  文本两端对齐
  text-align-last
  设置最后一段文本的对齐方式

多列布局

  column-count:number
  要分成几列

  column-width:单位
  根据屏幕宽度自动分列

  column-gap:单位
  边界间隔

  column-rule:1px solid red;
  分界线

背景

  一个元素支持多个背景图片以,分割

  background-size
  对背景图片进行缩放

  

  background-clip:border-box、content-box、padding-box
  背景裁剪,它会设置盒模型的那一部分成为背景(颜色或图片)显示的界限

  

  background-origin:border-box、content-box、padding-box
  设置背景开始计算的点

  

  background-repeat:space、round
  space:平铺且不被裁剪或缩放的最大数量的图片,并且在显示时会有空白区域出现在它们中间
  round:水平和垂直填充包含元素的图片的最大完整数量

  background-image:image-rect(url,top,right,bottom,left)
  背景图片裁剪,解决图片精灵问题

  mask:url repeat x y;
  遮罩

  border-radius

  边框

  border-image
  边框图片

  box-shadow:inset x y radius spread color
  盒子阴影,radius:模糊半径,spread:阴影扩散的距离

  rgba值只能应用到它指定的元素上,所以子元素可以否决所有的继承。

  currentColor表示当前color颜色值

  appearance:button、radio-button、password...
  使用来自操作系统的不同地方的颜色。

2D变换-transform

  允许多重变换以空格隔开 transform:rotate(10deg) skew();

  transform:rotate(10deg);
  旋转

  transform-origin:x y;
  改变原点,transform属性中默认的原点是水平垂直中心

  translate(x,y)
  平移,该函数可将元素从它的默认位置进行移动

  translate非常类似于使用相对定位以及left和top属性,但请记住,经过变换的元素会保留它的位置,只是从显示上看起来像被移动过,被变换的是元素的图像,而不是元素本身。

  skew(x,y)
  倾斜

  scale(x,y)
  缩放

  matrix
  矩阵

  box-reflect:direction offset image;
  反射

  transition:property time ease、linear、ease-in、ease-out、ease-in-out delay

  过渡

动画
  @keyframes声明关键帧

@keyframes 'name'{
  keyframes{
    property:value;
  }
}

  通过animation来调用

  animation:name time ease、linear、ease-in、ease-out、ease-in-out delay count direction
  名字 持续时间 运动方式 延迟 执行次数(infinite重复播放) 方向(normal或者alternate反向播放)

  播放状态
  animation-play-state:running|paused
  running表示动画正在播放,而paused表示动画未在播放

  允许多重动画。

3D变换
  transform-style:preserve-3d;

  perspective
  透视

  perspective-origin

  transform-origin
  变换原点

上一篇:vue解决音频可视化播放,使用wavesurfer.js


下一篇:鼠标滑到一定程度,出现返回顶部然后点击可以直接跳转到顶部