CSS 学习笔记（1）

CSS分为内嵌式、外链式、行内式。（权重：行内>内嵌=外链）

内嵌式：常用于电商网站首页，网页加载速度快。

外链式：实现css与html分离，方便修改

CSS有继承性、覆盖性。

一、CSS选择器

1.简单选择器

• id选择器：#id{}
• class类选择器：.class{}
• 标签选择器：div{}

2.复合选择器

• 后代选择器：
• 并集、并列选择器：

二、CSS盒子模型

border：边框线   border:1px solid black; 

margin：外填充  magin:0px 0px 0px 0px  顺时针改变：上右下左

padding：内填充

三、CSS3 新增属性

在css中输入代码body{background:url(xx.jpg);}载入背景图片

• 圆角属性：border-radius: 20px 20px 20px 20px; 分别对应4个角的圆弧

.div{border-radius: 20px 40px 60px 80px;}

另外，当border-radius：50%时 得到的图片将会这样变换：

变换为 

变换不仅可以用像素值，还可以用百分比

• 盒子阴影：box-shadow: 0 0 20px red inset; 水平垂直方向 阴影大小 阴影颜色

div{width: 200px;height: 100px;background: gold; margin: 50px;
            border: 2px solid black; border-radius: 20px;}

.div1{box-shadow: 0 0 20px red;}

.div2{box-shadow: 0 0 20px red inset;}    此处设置inset 为内阴影 

• 渐变色背景：background: linear-gradient(to right, white, pink) 从左到右由白到粉
• 透明度：rgba(255,255,255,0.5); 最后一个值代表透明程度 0完全透明-1不透明
• 文字阴影：text-shadow: 0px 0px 20px pink
• 旋转、缩放、位移：

三个变换都需要用到transform：来完成

旋转：transform: rotate(180deg);

缩放：transform: scale(0.5);

平移：transform: translate(100px,10px);

另外还可能用到的变化有：

沿x轴变换：transform: rotateX(180deg)

沿Y轴变换：transform: rotateY(180deg)

• 过渡属性：用到的是hover和transition: all Xs; all指所有属性 后面的时间代表动画执行时间

下面是一个CSS的动画案例展示：

通过keyframes定义一个动画 name为定义的动画的名字 可以更改，定义完成后在CSS中。

在keyframes中除了通过from to实现，如果我们要运行3个效果可以更改为如下代码：

@keyframes donghua{

    0%{起始状态}

    50%{中间状态}

    100%{最后状态}

    }

同理，也可以实现更多的效果。