vscode (Visual Studio Code) CSS基础 — HTML系列

CSS基础

参考资料：

• css | web
• CSDN - 熟 | HTML (自己的)

——————————————————————————————————————————————————————————————

CSS 是什么

-CSS是层叠样式表（Cascading Style Sheets）的缩写。它是一种用于描述网页文件如何呈现的标记语言，用于控制网页的布局、颜色、字体等样式。通过CSS，可以将网页的样式与内容分离，使网页的结构更清晰，易于维护和修改。CSS可以应用于HTML、XHTML、XML等文件，来为网页添加样式和布局。

-和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。CSS 是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式，打个比方：HTML 是身体，CSS 就是衣服，JS就是人的行动能力。

• 让我们来写一下

-打开vscode，新建内置文本文件，创建style.css文件，保存到跟index.html同一根目录下
至于index.html内的内容，为上节课的vsode (Visual Studio Code) HTML – 你的第一个网页

-把下方代码粘贴入style.css

p {
  color: grey;
}

打开HTML, 复制

<link href="style.css" rel="stylesheet" />

原版

加入CSS属性后变为灰色

那么它是怎么工作的呢

• 来看张图
  

- 选择器 Selector

-HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 < p >元素）。要给不同元素添加样式，只需要更改选择器。

- 声明 Declaration

一个单独的规则，如 color: red;

- 属性 Properties

• 改变 HTML 元素样式的途径（本例中 color 就是 <p> 元素的属性）。CSS
  中，由编写人员决定修改哪个属性以改变规则。

- 属性的值 Property value

-在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color )。

——————————————————————————————————————————————————————————————

• 注意：如果需要加入多个语句，需要用;隔开

-下面用**< img >**图片元素写一个示例（找到图片盒子）

插入CSS代码

img {    
    width: 500px;
    border-radius: 8px; 
}

-加入 width 和 height 属性
设置大小
border-radius设置圆角

CSS 示例

• 更改页面颜色

html {
	background-color: #f1f1f1;
}

• 文本样式

body {
	width: 400px;
  	margin: 0 auto;
  	background-color: #f0f1f1;
  	padding: 0 10px 20px 10px;
}

• 按钮样式
  
  我们可以使用 background-color 属性来设置按钮颜色

.button1 {background-color: #4CAF50;} 
.button2 {background-color: #008CBA;} 
.button3 {background-color: #f44336;} 
.button4 {background-color: #e7e7e7; color: black;} 
.button5 {background-color: #555555;} 

.button {
    background-color: #f1f1f1; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

回顾

…………………

按本课可以改造为

原版

加入CSS后

——————————————————————————————————————————————————————————————

完