CSS与Javascript基础复习指南
91 浏览量
更新于2024-09-01
收藏 60KB PDF 举报
"CSS和Javascript简单复习资料"
在前端开发中，CSS（层叠样式表）和JavaScript是非常重要的技术，它们分别负责网页的样式表现和交互功能。以下是对这两个主题的详细解释：
### CSS (层叠样式表)
CSS用于定义HTML或XML（包括SVG、XHTML等）文档的呈现。它允许你控制网页的布局、颜色、字体、间距等视觉效果。
#### 样式定义
1. **内联样式**：通过在HTML元素中添加`style`属性来定义样式，如`<p style="color:red;">文本</p>`。
2. **嵌入式样式**：将样式写在`<head>`标签内的`<style>`标签中，例如：
```html
<head>
<style type="text/css">
p {color: red;}
</style>
</head>
```
3. **外部样式表**：将样式放在单独的`.css`文件中，然后通过`<link>`标签引入，如：
```html
<link rel="stylesheet" href="style.css">
```
#### 选择器
1. **HTML选择器**：直接针对HTML标签应用样式，如`p{color:red}`。
2. **类选择器**：使用`.`前缀，如`.red{color:red}`，可以应用于具有指定类名的元素。
3. **ID选择器**：使用`#`前缀，如`#red{color:red}`，适用于具有特定ID的唯一元素。
4. **关联选择器**：使用空格分隔嵌套元素，如`p em{color:red}`。
5. **组合选择器**：使用逗号分隔多个标签，如`h1, h2, h3{color:red}`。
6. **伪元素选择器**：如`a:link{color:red}`，用于定义元素的不同状态。
#### 注释
CSS中的注释使用`/* ... */`，例如`/* 这是一个注释 */`。
### JavaScript
JavaScript是一种广泛使用的脚本语言，主要用于网页和用户的交互，以及动态内容的创建。
#### 数据类型
1. **基本数据类型**：包括`Number`（数值）、`String`（字符串）、`Boolean`（布尔）、`null`、`undefined`。
2. **特殊说明**：在JavaScript中，字符串是基本类型，传递时传递值而非引用。
#### 转义字符
在字符串中，可以使用反斜杠（\）进行转义，如`\n`表示换行。
#### 变量
变量名由字母、数字、下划线或美元符号开始，如`var myVariable = "hello"`。
#### 函数
函数的定义通常如下：
```javascript
function functionName(param1, param2) {
// 函数体
return result;
}
```
函数的参数是可选的，不需保证实参和形参数量一致。可以通过`arguments`对象获取实际传入的参数数量。
#### 内置函数
1. **字符串处理**：`encodeURI()`和`decodeURI()`用于编码和解码URL，`encodeURIComponent()`用于编码URL部分。
2. **数值处理**：`parseInt()`和`parseFloat()`用于转换字符串为整数或浮点数，`isNaN()`检查结果是否为`NaN`。
3. **编码解码**：`escape()`和`unescape()`对字符串进行编码和解码操作。
4. **表达式执行**：`eval()`函数将字符串作为JavaScript代码执行。
以上是CSS和JavaScript的基础知识，理解并熟练掌握这些概念对于前端开发至关重要。在实际项目中，还会涉及到更高级的概念，如CSS布局、JavaScript面向对象编程、DOM操作等。
CSS和和Javascript简单复习资料简单复习资料
CSS和Javascript简单复习资料，学习css与js的朋友可以参考下。
CSS：
内联样式表 标签内直接加style=””
嵌入式样式表 定义在<head>标签
<style type=”text/css”>
外部样式表
<link rel=”StyleSheet” href=”style.css”>
<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
选择器：
HTML选择器：接在html标签后加css
如：p{color:red}
class选择器：1 在html标签后加class名，再加css
如：p.red{color:red}
2 直接加class名，再加css
如：.red{color:red} 注意前面有个点
ID选择器：在ID前加一个#号
如：#red{color:red} ID选择器只为某一ID的控件使用
关联选择器：有嵌套的html标签，用空格隔开
如：P EM{color:red}
组合选择器：多个html标签，用逗号隔开
如： H1,H2,H3{color:red}
伪元素选择器：HTML元素：伪元素
如：A:link{color:red}
注释：使用 /* … */ 进行注释，不可嵌套
javascript：
javascript的数据类型：
基本数据类型：数值、字符串、布尔、空、undefined
注意：javascript中字符串是基本类型，传递的是值，不是地址。和java不同。
转义字符
变量：字母、数字、下划线、美元符$ ，以字母开头
javascript的函数：
function 函数名 (参数){
函数体；
return 表达式；
}
注意：函数由function定义。
形参：javascript不要求实参和形参个数相等，可以通过使用function_name.arguments.length来得到传过来的参数的
个数。
内部函数： encodeURI / decodeURI
parseInt / pareFloat
isNan 检测parseInt / pareFloat的值是否是NaN
escape / unescape 对一个字符串进行编码后的字符串
eval 把一个字符串作为一个JavaScript表达式
javascript：
javascript的数据类型：
基本数据类型：数值、字符串、布尔、空、undefined
注意：javascript中字符串是基本类型，传递的是值，不是地址。和java不同。
转义字符
变量：字母、数字、下划线、美元符$ ，以字母开头
下载后可阅读完整内容，剩余3页未读，立即下载
2020-09-13 上传
2021-06-11 上传
2010-01-01 上传
2022-11-26 上传
2022-11-26 上传
2020-03-03 上传
2024-11-11 上传
2008-01-01 上传
weixin_38729336
- 粉丝: 7
- 资源: 925
我的内容管理
展开
最新资源
- Angular程序高效加载与展示海量Excel数据技巧
- Argos客户端开发流程及Vue配置指南
- 基于源码的PHP Webshell审查工具介绍
- Mina任务部署Rpush教程与实践指南
- 密歇根大学主题新标签页壁纸与多功能扩展
- Golang编程入门：基础代码学习教程
- Aplysia吸引子分析MATLAB代码套件解读
- 程序性竞争问题解决实践指南
- lyra: Rust语言实现的特征提取POC功能
- Chrome扩展：NBA全明星新标签壁纸
- 探索通用Lisp用户空间文件系统clufs_0.7
- dheap: Haxe实现的高效D-ary堆算法
- 利用BladeRF实现简易VNA频率响应分析工具
- 深度解析Amazon SQS在C#中的应用实践
- 正义联盟计划管理系统：udemy-heroes-demo-09
- JavaScript语法jsonpointer替代实现介绍
