# 回顾复习
1. CSS基础选择器的权重关系(标签,类名,id)
2. 知道常见的CSS书写位置(引入方式)
3. **明确CSS内嵌式和外链式引入方式的使用场景**
4. 知道盒子模型组成由哪些部分组成
5. HTML5的结构标签有哪些?
6. 能认出来HTML5的音频标签和视频标签
# 第四天
## 今日内容
1. 了解CSS3的一些特效属性
2. 明确JS语言的作用
3. 知道JS语言中变量如何定义
4. 知道JS语言中事件的三要素是什么
# CSS3扩展属性和属性值
| 样式名 | 样式值 | 作用 |
| ------------- | ------------------------------------------------------------ | ------------- |
| border-radius | 像素单位 | 圆角属性 |
| background | linear-gradient(方向,颜色,颜色,...) | 渐变色背景 |
| background | url(图片路径) | 背景图片 |
| background | rgba(r0-255,g0-255,b0-255,a0-1) | 透明色背景 |
| box-shadow | 水平 垂直 大小 颜色 | 盒子阴影 |
| text-shadow | 水平 垂直 大小 颜色 | 文字阴影 |
| transform | rotate(角度值deg) | 变化-中心旋转 |
| transform | rotateY(角度值deg) | 变化-Y轴旋转 |
| transform | ratateX(角度值deg) | 变化-X轴旋转 |
| transform | scale(比例数值) | 变化-缩放 |
| transform | translate(水平像素,垂直像素) | 变化-位移 |
| transform | rotate(角度值deg) scale(比例数值) | 旋转-缩放 |
| transition | 属性all 持续时间<br />属性all 持续时间 延迟时间 速度变化<br />ease-in加速,ease-out减速,ease-in-out先加后减 | 变化过渡 |
| | @keyframes 动画名字(from{样式} to{样式}) | 设计动画 |
| animation | 动画名字 持续时间<br />动画名字 持续时间 alternate infinite | 添加动画 |
| | | |
| | | |
| | | |
| | | |
# JavaScript基础
**js是JavaScript作用是:控制前端的结构和样式**
## 语法
#### 书写位置--script标签内
```html
<script>
alert();
// 注释使用双斜杠
// 每个语句使用;;;;;结束
</script>
```
#### 定义变量--遵循命名规则
```js
var var_name = var_value;
举例:
var btn = document.getElementById("id值");
// 变量名命名规则:
// 字母、数字和下滑线组成
// 不能以数字开头
// 不用中文
// 不与保留字重复
```
#### 定位元素
1. document.getElementById("目标元素id属性值")
2. 注意getElementById大小写--驼峰命名法
#### 设置样式
```js
document.getElementById("元素id属性值").style.样式名="样式值";
```
## 事件
1. 概念:捕捉用户的行为--在什么时候做什么事情
2. 事件三要素:(当**事件源**发生了**事件类型**就执行**指定命令**)
1. 事件源
2. 事件类型
3. 执行的命令
```js
事件源.事件类型 = function() {
执行的命令
}
```
```js
举例:
document.getElementById("id值").onclick=function(){
//命令
document.getElementById("id值").style.width="200px";
}
var btn = document.getElementById("id值")
var box = document.getElementById("id值")
btn.onclick=function(){
//命令
box.style.width="200px";
}
```
# 今日内容
1. 了解CSS3的一些特效属性
2. 明确JS语言的作用
3. 知道JS语言中变量如何定义
|
|
收藏
淘帖
踩
