阅读 45

CSS知识总结

CSS是谁发明的

css是由李爵士的同事赖先生首先提出来的

CSS的概念

  • CSS的语法:

语法一:

选择器 { 
属性名 : 属性值;
/*注释*/
}
复制代码

语法二:

@charset "UTF-8";
@import url(2.css);
@media (min-width: 100px) and (max-width: 200px) { }
复制代码
  • 样式层叠;可以多次对同一个样式进行层叠,下面代码展示,授首先在html中画一个div,然后在css中设置宽为50px的样式,然后在设置一个高为50ox的样式,也可以放在一起,这样的好处(目前能想到的)就是在一个元素的样式比较多而且复杂的时候的,将不同效果的样式进行分类。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="demo1">
  <div class="demo2">
  </div>
</body>
</html>
复制代码
.demo1 {
    width : 50px;
}
.demo1 {
    height : 50px
}
.demo1 {
    width : 50px;
    height : 50px
}
复制代码
  • 选择器层叠:可以用不同的选择器对同一个元素的样式进行声明,还是以上面那个div为例,比如想要一个黑色和红色的正方形,可以先对将所有的div设置成一个正方形,然后对每一个正放形添加颜色
div {
    width : 50px;
    height : 50px
}
.demo1 {
    blackground : black;
}
.demo1 {
    blackground : red;
}
复制代码
  • CSS的版本

image.png

浏览器渲染原理

当客户端请求一个页面时,服务器响应后,浏览器首先会处理HTML标记,并构建一个DOM树;然后在处理CSS构建一个CSSOM树,最后根据构建DOM树和CSSOM树组合成一个Render树进行样式叠加,布局和绘制,渲染成功后,最后将页面展示在浏览器上。

  • CSS动画的两种做法

动画的原理:动画是由很多个不同帧的静止画面以一定的速度连续播放时,肉眼因视觉惨象而产生错觉,误以为是活动的画面

  1. transition:在已知的初始状态和结束状态,通过补全中间帧绘制一个画面,一般配合transform(变形)使用,transition的语法为:transition : 属性名 时长 过渡方式 延迟。需要注意的是:不是所有的都能过渡,比如:display : none => block从无到有无法过渡。当有多个动画的时候,可以使用多个transform来完成多个动画的播放。
  2. animation:通过声明关键帧来定义动画,比如一个绘制一个跳动的红心,首先是绘制一个正常的红心,然后在绘制一个放大的红心,通过声明这个两个关键帧,然后设置播放效果,就可以实现一个跳动的红心了
animation : heart 800ms infinite alternate;
}

@keyframes heart {
  0% {
    transform : scale(1.0);
  }
  100% {
    transform : scale(1.5);
  }
}
复制代码

使用技巧

  • 使用caniuse.com这个网站快捷知道哪些浏览器支持哪些特性
  • 在写CSS的时候,使用border调试大法进行调试
文章分类
前端
文章标签