CSS、JS (1)内联样式、外部样式表、选择器等。 (2)JS基础语法、监听事件。
时间: 2025-06-21 16:28:22 浏览: 14
### CSS基础知识
#### 内联样式与外部样式表用法
对于CSS而言,有多种方式来应用样式到HTML文档中。其中一种是内联样式,即将样式直接写入HTML标签内的`style`属性里。这种方式虽然直观简单,但是不利于维护和重用。
```html
<p style="color:red; font-size:18px;">这是一个带有红色字体大小为18像素的文字。</p>
```
另一种更为推荐的方式是使用外部样式表文件[^3]。这允许开发者在一个单独的`.css`文件中定义所有的样式规则,并通过链接将其引入至HTML页面之中。这样做的好处是可以轻松管理大量样式代码并提高网站性能。
```html
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* styles.css */
body {
background-color: lightblue;
}
h1, p {
color:green;
}
```
#### 选择器详解
在编写CSS时,选择器用来指定要应用样式的元素。以下是几种常见的选择器类型:
- **元素选择器**:针对特定类型的HTML元素设置样式。
```css
h1 {
text-align:center;
}
```
- **类选择器**:以`.`开头后面跟上自定义名称,可用于标记具有相同特征的一组元素。
```css
.highlighted-text {
background-color:yellow;
}
```
- **ID选择器**:以`#`开头加上唯一标识符名,通常只应用于单个唯一的DOM节点之上。
```css
#main-title {
font-weight:bold;
}
```
- **后代组合子**:当两个选择器之间存在空格分隔,则表示后者是前者内部任意层次下的子孙关系。
```css
div span {
color:white;
}
```
- **伪类/伪元素选择器**:用于匹配某些特殊状态或部分的内容。
```css
a:hover{
cursor:pointer;
}
::first-letter {
float:left;
font-size:larger;
}
```
---
### JavaScript基础语法教程
JavaScript是一种广泛使用的脚本语言,主要用于创建动态交互功能于Web应用程序之内。下面是一些基本概念介绍:
- 变量声明
使用关键字如`var`, `let` 或者 `const` 来初始化变量存储数值、字符串或其他数据类型。
```javascript
let message = "Hello world!";
const PI = Math.PI;
var count = 0;
```
- 函数表达式
定义可重复调用的功能模块,接受参数输入返回处理后的结果。
```javascript
function addNumbers(a,b){
return a+b;
}
console.log(addNumbers(5,7)); // 输出:12
```
- 控制流语句
利用条件判断(`if...else`)循环遍历数组(`for`,`while`)等控制程序分支走向。
```javascript
if (age >= 18) {
alert('成年人');
} else {
alert('未成年人');
}
for(let i=0;i<array.length;i++){
console.log(array[i]);
}
```
- 对象字面量
创建包含键值对集合的对象实例,方便组织关联的数据集。
```javascript
const person={
name:"张三",
age:24,
hobbies:["阅读","旅行"]
};
console.log(person.name); // 输出:"张三"
```
---
### JS事件监听机制
为了使网页更加生动有趣,可以通过注册事件处理器让浏览器知道何时何地发生了什么动作。例如点击按钮触发弹窗提示框显示消息给用户看。
```html
<button id="myButton">Click Me!</button>
<script type="text/javascript">
document.getElementById("myButton").addEventListener("click",function(){
alert("You clicked the button!");
});
</script>
```
上述例子展示了如何利用`addEventListener()`方法附加一个匿名函数作为回调函数去响应用户的鼠标左键按下释放行为。每当该按钮被按动一次就会执行这段预设好的逻辑操作[^1]。
阅读全文
相关推荐


















