Web前端学习（第二周）

CSS选择器

选择器又称选择符。

作用：根据不同需求把不同的标签选出来。

基础选择器

标签选择器

基本语法：

标签名{

        属性1：属性值1；

        属性2：属性值2；

        ...

}

例：

p{
    color:red;
}
//所有的<p>改为红色

类选择器

样式点定义 结构类（class）调用 一个或多个 开发最常见

基本语法：

.类名1{

        属性1：属性值1；

        ...

}

.类名2{

        属性2：属性值2；

}

...

<标签1 class="类名1">...</标签1>

<标签2 class="类名1 类名2">...</标签2>

例：

.red{
    color:red;
}
.font666{
    font-size:666px;
}
...
<p class="red">这里的字体颜色为红色</p>
<div class="red font666">这里的字体颜色也为红色且字体大小为666px</p>

id选择器

样式用#定义 结构用id调用

基本语法：

#id名{

        属性1：属性值1；

}

<标签1 id="id名1">...</标签1>

例：

#red{
    color:red;
}
...
<p id="red">红色</p>

复合选择器

选择器	作用	特征	使用情况	用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	用来选择最近一级元素	只选亲儿子	较少	符号是大于 .nav＞p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 .nav,.header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover
.focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus

复合选择器会有权重叠加问题。

指定的范围越小，权重越大。 

 背景

属性	作用	值
background-color	背景颜色	预定义颜色值
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position
background-attachment	背景附着	scroll/fixed
背景简写	书写更简单	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明	背景色半透明	background:rgba(0,0,0,0.3)后面必须是四个值

盒子模型

由四部分组成，边框border，内容content，内边距padding，外边距margin。

边框border

边框简写：

border:1px solid red;   没有顺序

也可以分开写：

border-top:1px solid red;  只设定上边框，其余同理

  内边距padding

即边框与内容之间的距离

会影响盒子实际大小

padding-left:20px;

复合写法

padding: 5px;上下左右是五像素

padding: 5px 10px;上下是五像素，左右是十像素

 padding: 5px 10px 15px;上是五像素，左右是十像素，下是十五像素

padding: 5px 10px 15px 20px;上是五像素，右是十像素，下是十五像素，左是二十像素。 

外边距margin

写法与padding类似。

外边距可以使块级盒子水平居中，需要满足两个条件：

1. 盒子必须指定了宽度。
2. 盒子左右的外边距设置为auto。

margin-left:auto;margin-right:auto;

margin:auto;

margin:0 auto;

 JavaScript

变量

JavaScript 中的变量用于存储数据。可以使用 var、let 或 const 关键字来声明变量。

var

作用域：函数作用域或全局作用域。

变量可以在声明之前使用（提升）。

var name = "Alice";
console.log(name); // Alice

 let

作用域：块作用域。

变量不能在声明之前使用（无提升）。

let age = 25;
if (true) {
  let age = 30; // 块作用域
  console.log(age); // 30
}
console.log(age); // 25

 const

作用域：块作用域.

声明后不可重新赋值（但对象的属性可变）。

const PI = 3.14;
// PI = 3.14159; // 报错
const circle = { radius: 5 };
circle.radius = 10; // 合法

 数据类型

JavaScript 的基本数据类型有：

• 字符串（String）
• 数字（Number）
• 布尔值（Boolean）
• 未定义（Undefined）
• 空值（Null）
• 对象（Object）
• 符号（Symbol）

函数

函数是执行特定任务的代码块。可以通过函数声明或函数表达式创建。 

函数声明

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Hello, Alice!

 函数表达式

const greet = function(name) {
  return `Hello, ${name}!`;
};
console.log(greet("Bob")); // Hello, Bob!
 

 箭头函数

 const greet = (name) => `Hello, ${name}!`;
console.log(greet("Charlie")); // Hello, Charlie!

 函数作用域

• 全局作用域：在任何地方都能访问的变量。
• 局部作用域：在函数内部定义的变量，只能在该函数内访问。