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的版本
浏览器渲染原理
当客户端请求一个页面时，服务器响应后，浏览器首先会处理HTML标记，并构建一个DOM树；然后在处理CSS构建一个CSSOM树，最后根据构建DOM树和CSSOM树组合成一个Render树进行样式叠加，布局和绘制，渲染成功后，最后将页面展示在浏览器上。
- CSS动画的两种做法 动画的原理：动画是由很多个不同帧的静止画面以一定的速度连续播放时，肉眼因视觉惨象而产生错觉，误以为是活动的画面
- transition：在已知的初始状态和结束状态，通过补全中间帧绘制一个画面，一般配合transform（变形）使用，transition的语法为：
transition : 属性名 时长 过渡方式 延迟。需要注意的是：不是所有的都能过渡，比如：display : none => block从无到有无法过渡。当有多个动画的时候，可以使用多个transform来完成多个动画的播放。 - animation：通过声明关键帧来定义动画，比如一个绘制一个跳动的红心，首先是绘制一个正常的红心，然后在绘制一个放大的红心，通过声明这个两个关键帧，然后设置播放效果，就可以实现一个跳动的红心了
animation : heart 800ms infinite alternate;
}
@keyframes heart {
0% {
transform : scale(1.0);
}
100% {
transform : scale(1.5);
}
}
使用技巧
- 使用caniuse.com这个网站快捷知道哪些浏览器支持哪些特性
- 在写CSS的时候，使用border调试大法进行调试
