黑马程序员技术交流社区

标题: 笔记 [打印本页]

作者: 您的戏真多 时间: 2019-7-18 14:22
标题: 笔记
# 回顾复习

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语言中变量如何定义

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2