CSS入门，看这篇就够了！

SS 有哪些用途？

CSS 可以用来修饰静态网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。下面我们就从几个方面来讲解 CSS。

CSS简介

●CSS 指层叠样式表 (Cascading Style Sheets)

● 样式定义如何显示 HTML 元素

● 样式通常存储在样式表中

● 把样式添加到 HTML 中，是为了解决内容与表现分离的问题

● 外部样式表可以极大提高工作效率

● 外部样式表通常存储在 CSS 文件中

● 多个样式定义可层叠为一

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

浏览器缺省设置（没有定义样式表，引用浏览器样式）

外部样式表（.css文件）

内部样式表（位于 <head> 标签内部）

内联样式（在 HTML 元素内部）

多重样式将层叠为一个元素举例：

<!DOCTYPE html>

<head>

<style>

.yang_shi{background:red;}

</style>

</head>

<body>

</body>

<／html>

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS语法

CSS 语法规则由两个主要的部分构成：选择器，以及一条或多条声明:

● 选择器通常是你需要改变样式的 HTML 元素。

● 每条声明由一个属性和一个值组成。

属性（property）是你希望设置的样式属性（style attribute）。每个属性有一个值，属性和值被冒号分开，声明组以大括号{}括起来。

CSS选择器

?? 类选择器：类选择器以一个点号显示。如：.center{color:red;}

?? Id选择器：id选择器以#来定义，id 属性只能在每个 HTML 文档中出现一次。

?? 属性选择器：带有指定属性的选择器。如：[title]{color:#999}或者[title=hello]{color:red;}

?? 元素选择器：HTML 标签元素作为选择器。如：a{color:#999}

?? 派生选择器：根据元素在其位置的上下文关系定义样式，派生选择器包括后代选择器、子元素选择器、相邻兄弟选择器。

?? 伪类、伪元素

?? 选择器分组、结合选择器

CSS 选择器——属性选择器

CSS 选择器——派生选择器

后代选择器、子元素选择器、相邻兄弟选择器。

CSS 选择器——伪类与伪元素

伪类：包含两种状态，伪类和结构性伪类。状态伪类是基于元素当前状态进行选择的，在与用户的交互过程中元素根据动态变化的，展示相对应状态下的样式。

常见的状态伪类主要包括：

结构性伪类是 css3 新增选择器，利用 dom 树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少 class 和 id 属性的定义，使文档结构更简洁。

常见的结构性伪类主要包括：

伪元素是对元素中的特定内容进行操作，而不是元素本身。它的操作层次比伪类更深一层并不存在于文档结构中。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。

常见的伪元素主要包括：

注意：

有时你会发现伪类元素使用了两个冒号(::) 而不是一个冒号 (:)，这是 css3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。单冒号(:)用于 css3 伪类，双冒号(::)用于 css3 伪元素。对于 css2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。

CSS 选择器——选择器分组、结合选择器

1.选择器分组

假设我们有以下样式

2.结合选择器

span.class2 {color：red；}

<div>

</div>

CSS常用属性

?? Calc()

此 calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。

支持加减乘除括号等。

如：width:calc(100% - 80px);

?? Display

visibility：hidden 隐藏元素，但是元素仍然占据空间并影响布局。

display：none 隐藏元素，并从布局中删除元素。

display：block（块）块元素尝试获取整个宽度，并在布局中开始新行。

display：inline-block（内联块）内联元素块与其他内联元素保持在同一行中，并且不会开始新行。

display：box 盒模型。

?? Background

background-size 设置背景图片大小，支持百分比、像素单位等。

background-position 定位背景图。

如：background-position：20px 100px

?? Border-sizing:border-box;

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

?? 盒模型 display:box; 的使用

使用盒模型必须给父容器定义 css 属性 display:box 其子容器才可以进行划分(如果定了 display:box 则该容器则定义为了内联元素，使用 margin:0px auto 让其居中是无效的，要想使其居中只能通过它的父容器的 text-align:center);

HTML代码：

</article>

box-orient 用来确定父容器里子容器的排列方式，是水平还是垂直。(horizontal水平排列)

box-orient:vertical;//垂直排列

盒模型 display:box; 的使用

box-align 表示父容器里面子容器的垂直对齐方式，可选参数如下所示：

start | end | center | stretch

相信小伙伴们对 CSS 有了大概的了解，它既简化了网页的格式代码、加快了下载显示的速度，又减少了需要上传的代码数量。可以说，CSS 是 web 的造型师，快和小象一起学起来，有不懂的问题记得私信小象哦～

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

生命不必每时每刻都要冲刺

低沉时

就当给自己放了一个悠长假期

- 2024.04.26 -

在编程的世界里，数据是构建一切的基础。就像建筑师需要了解不同材料的强度和特性一样，程序员也必须熟悉各种数据类型。

今天，我们就来深入探讨JavaScript中的数据类型，看看它们如何塑造我们的代码世界。

一、JavaScript数据类型简介

数据类型是计算机语言的基础知识，数据类型广泛用于变量、函数参数、表达式、函数返回值等场合。JavaScript语言的每一个值，都属于某一种数据类型。

JavaScript的数据类型主要分为两大类：基本数据类型和引用数据类型。下面就来详细介绍这两类数据类型中都包含哪些及如何使用它们。

二、基本（值类型）数据类型

首先，让我们从最基本的数据类型开始。JavaScript的基本数据类型包括：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、符号（Symbol）。

1、字符串（String）

tring类型用于表示由零或多个16位的Unicode字符组成的字符序列，即字符串。至于用单引号，还是双引号，在js中还是没有差别的。记得成对出现。

let name1='张三'

let name2="李四"

let name3=`王五`

1.转换为字符串有2个方法：toString()、String()

let n=100

n.toString() // '100' 数值类型转换为字符串类型

String(200) // '200' 数值类型转换为字符串类型

2.模板字符串相当于加强版的字符串，可以定义多行字符串。还可以利用${}在字符串中插入变量和表达式

let name='张三丰'

let age=180

`我叫${name}，今年${age}岁啦!` // 我叫张三丰，今年180岁啦!

2、数字(Number)

该类型的表示方法有两种形式，第一种是整数，第二种为浮点数。整数：可以通过十进制，八进制，十六进制的字面值来表示。浮点数：就是该数值中必须包含一个小数点，且小数点后必须有一位数字。

let num=100 // 整数

let floatNum=3.14 // 浮点数

// toFixed() 方法可以对计算结果进行四舍五入
let pi=Math.PI // 3.141592653589793

pi.toFixed(2) // 3.14 保留2位小数

// 八进制的值第一位必须是零0，后面每一位数的范围在0~7。如果某一位数超出范围，首位的0会被忽略，后面的数值会按照十进制来解析
let octalNum1=076 // 八进制的 63

let octalNum2=083 // 八进制 83

let octalNum3=06 // 八进制 6

// 十六进制的值前两位必须是0x，后面每一位十六进制数字的范围在0~9及A~F，字母A~F可以大写也可以小写。
let hexNum1=0xA // 十六进制 10

let hexNum2=0x3f // 十六进制 63

// 数值转换的三个方法 Number()、parseInt()、parseFloat()

1.Number() // 可以将字符串、布尔值、null、undefined 等转换为对应的数值，如果无法转换返回NaN

Number("123") // 输出123

Number("hello") // 输出NaN

2.parseInt() // 可以将字符串转换为整数，如果无法转换返回NaN

parseInt("123") // 输出123

parseInt("123.45") // 输出：123

parseInt("hello") // 输出NaN

3.parseFloat() // 可以将字符串转换为浮点数，如果无法转换返回NaN

parseFloat("123.45") // 输出123.45

parseFloat("hello") // 输出NaN

3、布尔(Boolean)

Boolean 数据类型只有两个值：true 和 false，分别代表真和假。很多时候我们需要将各种表达式和变量转换成 Boolean 数据类型来当作判断条件。

示例：

1.数值运算判断

1 + 2===3 // true

1 + 1 > 3 // false

2.数值类型转换
let bool1=Boolean(0); // 数值转换为布尔值

let bool2=Boolean(""); // 字符串转换为布尔值

let bool3=Boolean(null); // null 转换为布尔值

let bool4=Boolean(undefined); // undefined 转换为布尔值

let bool5=Boolean(NaN); // NaN 转换为布尔值

let bool6=Boolean([]); // 空数组转换为布尔值

let bool7=Boolean({}); // 空对象转换为布尔值

ECMAScript 类型的值都有与布尔值等价的形式。可以调用 Boolean() 函数来将其他类型转换为布尔值。不同类型转换为布尔值的规则如下表

4、未定义（Undefined）

在 JavaScript 中，undefined 是一个特殊的值和数据类型。当一个变量声明但未赋值时，该变量的值就是 undefined。它表示一个未定义或未初始化的值。

1.声明但未赋值的变量
// 当使用 var、let 或 const 声明一个变量但未对其赋值时，该变量的初始值为 undefined。
let n;
console.log(n) // 输出 undefined

2.未定义的属性
// 当访问一个不存在的属性时，该属性的值为undefined
let obj={ name: '张三丰' }

console.log(obj.age) // 输出 undefined

3.函数没有返回值
// 如果函数没有明确返回值或者使用 return 语句返回一个未定义的值，函数的返回值将是 undefined

function getName() {
// 没有返回值
}

console.log(foo()) // 输出 undefined

4.函数参数未传递
// 如果函数定义了参数但未传递相应的值，那么该参数的值将是 undefined
function getName(name) {
console.log("Hello, " + name)
}

getName() // 输出：Hello, undefined

5、空（Null）

在 JavaScript 中，null 是一个特殊的值和数据类型。它表示一个空值或者不存在的对象。

与undefined不同，null是JavaScript 保留关键字，而 undefined 只是一个常量。也就是说可以声明名称为 undefined 的变量，但将 null 作为变量使用时则会报错。

1.空值
// null 表示一个空值，用于表示变量的值为空
let name=null

console.log(name) // 输出 null

2.不存在的对象
// 当使用 typeof 运算符检测一个值为 null 的对象时，会返回 "object"

let obj=null
console.log(typeof obj) // 输出：object

null 与 undefined 区别

undefined 是表示一个未定义或未初始化的值，常用于声明但未赋值的变量，或者访问不存在的属性。
null 是一个被赋予的值，用于表示变量被故意赋值为空。
在判断变量是否为空时，使用严格相等运算符（===），因为 undefined 和 null 在非严格相等运算符（==）下会相等。

let x;

let y=null;

console.log(x===undefined) // 输出：true

console.log(x===null) // 输出：false

console.log(y===null) // 输出：true

console.log(y===undefined) // 输出：false

6、符号（Symbol）

符号 (Symbols) 是 ECMAScript 第 6 版新定义的。符号类型是唯一的并且是不可修改的。

1.创建Symbol

// 使用全局函数 Symbol() 可以创建一个唯一的 Symbol 值

let s=Symbol()

console.log(typeof s) // 输出 symbol


2.唯一性
// 每个通过 Symbol() 创建的 Symbol 值都是唯一的，不会与其他 Symbol 值相等，即使它们的描述相同
let s1=Symbol()

let s2=Symbol()

console.log(s1==s2) // 输出 false

let s3=Symbol('hello')

let s4=Symbol('hello')

console.log(s3==s4) // 输出 false


3.Symbol 常量
// 通过 Symbol.for() 方法可以创建全局共享的 Symbol 值，称为 Symbol 常量
let s5=Symbol.for('key')
let s6=Symbol.for('key')

console.log(s5===s6) // 输出 true

Symbol 的主要作用是创建独一无二的标识符，用于定义对象的属性名或者作为一些特殊的标记。它在一些特定的应用场景中非常有用，如在迭代器和生成器中使用 Symbol.iterator 标识可迭代对象。

三、引用数据类型

除了基本数据类型，JavaScript还有引用数据类型：对象（Object）、数组（Array）和函数（Function）

1、对象（Object）

Object 是一个内置的基本数据类型和构造函数。是一组由键、值组成的无序集合，定义对象类型需要使用花括号{ }，它是 JavaScript 中最基本的对象类型，也是其他对象类型的基础。

1.创建对象
// Object 类型可以用于创建新的对象。可以使用对象字面量 {} 或者通过调用 Object() 构造函数来创建对象

let obj1={} // 使用对象字面量创建空对象

let obj2=new Object() // 使用 Object() 构造函数创建空对象


2.添加、修改、删除属性

let obj={}

obj.name='张三丰' // 添加属性

obj.age=30 // 添加属性

obj.name='张无忌' // 修改属性

delete obj.age // 删除属性

2、数组（Array）

JavaScript 中，数组（Array）是一组按顺序排列的数据的集合，数组中的每个值都称为元素，而且数组中可以包含任意类型的数据。

在 JavaScript 中定义数组需要使用方括号[ ]，数组中的每个元素使用逗号进行分隔。

想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！云端源想-程序员必看的精品课程

数组的特点有哪些？

1、有序集合：数组是一种有序的数据集合，每个元素在数组中都有一个对应的索引，通过索引可以访问和操作数组中的元素。

2、可变长度：数组的长度是可变的，可以根据需要动态添加或删除元素，或者修改数组的长度。

可以使用 push()、pop()、shift()、unshift() 等方法来添加或删除元素，也可以直接修改数组的 length 属性来改变数组的长度。

3、存储不同类型的值：数组可以存储任意类型的值，包括基本类型和对象类型。同一个数组中可以混合存储不同类型的值。

4、索引访问：通过索引来访问数组中的元素，索引从 0 开始。可以使用方括号语法 [] 或者点号语法 . 来访问数组的元素。

5、内置方法：数组提供了许多内置的方法，用于对数组进行常见的操作和处理，如添加、删除、查找、排序、遍历等。

常用的数组方法包括 push()、pop()、shift()、unshift()、concat()、slice()、splice()、indexOf()、forEach()、map()、filter()、reduce() 等。

6、可迭代性：数组是可迭代的，可以使用 for...of 循环或者 forEach() 方法遍历数组中的元素。

1.创建数组

// 可以使用数组字面量 [] 或者通过调用 Array() 构造函数来创建数组。

let arr1=[] // 使用数组字面量创建空数组
let arr2=new Array() // 使用 Array() 构造函数创建空数组
let arr3=[1, 2, 3] // 使用数组字面量创建包含初始值的数组


2.访问和修改数组元素

// 数组的元素通过索引访问，索引从 0 开始。可以使用索引来读取或修改数组的元素。

let arr=[1, 2, 3]
console.log(arr[0]) // 访问数组的第一个元素，输出：1
arr[1]=5 // 修改数组的第二个元素

arr.length // 获取数组长度，输出：3

3、函数（Function）

ECMAScript中的函数是对象，与其他引用类型一样具有属性和方法。因此，函数名实际是一个指向函数对象的指针。

1.创建函数

// 可以使用函数声明或函数表达式来创建函数。函数声明使用 function 关键字，后面跟着函数名称和函数体，而函数表达式将函数赋值给一个变量。

// 函数声明
function add(a, b) {
return a + b
}

// 函数表达式
let multiply=function(a, b) {
return a * b
}


2.函数调用
// 函数可以通过函数名后面加括号 () 进行调用。调用函数时，可以传递参数给函数，函数可以接收参数并进行相应的处理。

let result=add(3, 5) // 调用 add 函数并传递参数
console.log(result) // 输出：8


3.函数返回值

// 函数可以使用 return 语句返回一个值，也可以不返回任何值。当函数执行到 return 语句时，会立即停止执行，并将返回值传递给函数调用者。

function calculateSum(a, b) {
return a + b
}

let result=calculateSum(2, 3)
console.log(result) // 输出：5

4.函数作用域
// 函数作用域是指函数内部声明的变量在函数内部有效，外部无法访问。函数内部定义的变量只能在函数内部被访问和使用，在函数外部是不可见的。

function myFunction() {
var x=10 // 局部变量
console.log(x) // 在函数内部可见
}

myFunction() // 输出：10
console.log(x) // 报错：x is not defined

此外，JavaScript还有一些特殊的数据类型，如Date（表示日期和时间）、RegExp（表示正则表达式），以及ES6新增的Map、Set、WeakMap和WeakSet，用于存储特定类型的数据。

四、数据类型检测

检测数据类型可以使用typeof操作符，它可以检测基本数据类型和function，但无法区分不同的引用数据类型。

var arr=[
null, // object
undefined, // undefined
true, // boolean
12, // number
'haha', // string
Symbol(), // symbol
20n, // bigint
function(){}, // function
{}, // object
[], // object
]
for (let i=0; i < arr.length; i++) {
console.log(typeof arr[i])
}

掌握JavaScript数据类型是成为一名高效开发者的关键。它们是构建程序的砖石，理解它们的用法和限制将使你能够构建更稳健、更可维护的代码。

现在，你已经了解了JavaScript的数据类型，是时候在你的代码中运用这些知识了。记住，实践是学习的最佳方式，所以动手尝试吧！

如果觉得本文对你有所帮助，别忘了点赞和分享哦！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

CSS中，类选择器用点号表示。

实际项目中一个div元素为了能被多个样式表匹配到（样式复用），通常div的class中由好几段组成，如<div class="user login">能被.user和.login两个选择器选中。

如果这两个选择器中有相同的属性值，则该属性值先被改为.user中的值，再被改为.login中的值，即重复的属性以最后一个选择器中的属性值为准。

测试代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style> 
.user
{
   font-size: 30px;
   background-color:red;
}
.login
{
   background-color:blue;
}
</style>
</head>
<body>
</head>
<body>
<div class="user">你好。这是一个 DIV 元素，class='user'。</div>
<div class="login">你好。这是一个 DIV 元素，class='login'。</div>
<div class="user login">你好。这是一个 DIV 元素，class='user login'。</div>
</body>
</body>
</html>

效果如下图：

在线咨询

上一篇：JavaScript中箭头函数的使用（Arrow F
下一篇：轻松搭建基于 SpringBoot + Vue 的

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。