初入前端-CSS（1）
CSS
CSS介绍
CSS (Cascading Style Sheets) 是一种用于描述网页样式和布局的样式表语言。它与 HTML 配合使用，用于控制网页中元素的外观和排版。
CSS 样式由选择器和声明块组成。选择器指定要应用样式的 HTML 元素，而声明块包含一个或多个属性-值对，定义元素的样式。下面是一个基本的 CSS 示例：
/* 选择器 */
h1 {
color: blue;
font-size: 24px;
}
/* 声明块 */
p {
color: #333333;
font-family: Arial, sans-serif;
}
在上面的示例中，h1 选择器选择所有的 <h1> 元素，并为其设置蓝色的文本颜色和 24 像素的字体大小。p 选择器选择所有的 <p> 元素，并为其设置颜色为 #333333（深灰色）和字体为 Arial。
CSS 样式可以应用于 HTML 页面中的元素，可以使用内联样式、嵌入样式和外部样式表三种方式来定义和应用 CSS。
- 内联样式：直接在 HTML 元素的
style属性中定义样式，例如<h1 style="color: red;">标题</h1>。 - 嵌入样式：在 HTML 页面的
<head>元素中使用<style>标签定义样式，例如：
<head>
<style>
h1 {
color: red;
}
</style>
</head>
- 外部样式表：将 CSS 样式定义在一个独立的 .css 文件中，然后在 HTML 页面中使用
<link>标签引入样式表，例如：
<head>
<link rel="stylesheet" href="styles.css">
</head>
在 styles.css 文件中定义样式：
h1 {
color: red;
}
使用 CSS，可以改变元素的颜色、字体、大小、边距、背景等属性，以及应用动画和过渡效果，实现丰富的网页设计和交互效果。
常见css设置
字体设置
设置字体样式和字体系列时，CSS提供了多个属性和值，以下是一个生成代码实例和相关讲解：
/* 设置字体样式和字体系列 */
body {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
line-height: 1.5;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 2px;
}
上述代码示例中，我们设置了一些常见的字体属性和值，让我们逐个进行讲解：
-
font-family：用于设置字体系列，即指定要在元素中使用的字体。在示例中，我们设置为Arial, sans-serif，这意味着首选字体为Arial，如果不可用，则使用sans-serif作为回退字体。 -
font-size：用于设置字体大小。在示例中，我们设置为16px，表示字体大小为16像素。chrome默认字体16px，最小字体12px -
font-weight：用于设置字体粗细。在示例中，我们设置为bold，表示使用粗体字体。 -
font-style：用于设置字体样式。在示例中，我们设置为italic，表示使用斜体字体。 -
line-height：用于设置行高，即每行文字的高度。在示例中，我们设置为1.5，表示行高为字体大小的1.5倍。 -
text-decoration：用于设置文本修饰，如下划线、删除线等。在示例中，我们设置为underline，表示给文本添加下划线。 -
text-transform：用于控制文本转换，如大写、小写或首字母大写等。在示例中，我们设置为uppercase，表示将文本转换为大写形式。 -
letter-spacing：用于设置字母间距。在示例中，我们设置为2px，表示字母之间的间距为2像素。
这些属性和值是设置字体样式的常见选项，你可以根据需要进行调整和组合，以达到所需的字体效果。将上述代码应用到适当的HTML元素上，即可改变该元素中文本的字体样式。
背景设置
设置背景样式时，CSS提供了多个属性和值，以下是一个生成代码实例和相关讲解：
/* 设置背景样式 */
body {
background-color: #f2f2f2;
background-image: url("background.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
上述代码示例中，我们设置了一些常见的背景属性和值，让我们逐个进行讲解：
-
background-color：用于设置背景颜色。在示例中，我们设置为#f2f2f2，表示背景颜色为淡灰色。 -
background-image：用于设置背景图像。在示例中，我们设置为url("background.jpg")，表示使用名为"background.jpg"的图像作为背景图像。 -
background-repeat：用于控制背景图像的重复方式。在示例中，我们设置为no-repeat，表示不重复背景图像。 -
background-position：用于设置背景图像的位置。在示例中，我们设置为center，表示将背景图像居中放置。 -
background-size：用于控制背景图像的尺寸。在示例中，我们设置为cover，表示使背景图像完全覆盖背景区域，可能会被裁剪或拉伸以适应。
这些属性和值是设置背景样式的常见选项，你可以根据需要进行调整和组合，以达到所需的背景效果。将上述代码应用到适当的HTML元素上，即可改变该元素的背景样式。
行块属性
CSS中的display属性可以用来控制元素的显示方式，包括行内（inline）和块级（block）等。以下是一个生成代码的示例和详细介绍：
/* 设置行块属性 */
span {
display: inline;
}
div {
display: block;
}
上述代码示例中，我们分别将display属性应用于span和div元素，来演示行内和块级元素的效果。
-
display: inline;：这行代码设置span元素为行内元素。行内元素不会独占一行，它们会尽可能地与相邻的元素在同一行显示，不会有换行。常见的行内元素包括span、a、strong等。 -
display: block;：这行代码设置div元素为块级元素。块级元素会独占一行，每个块级元素都会另起一行显示。常见的块级元素包括div、p、h1~h6等。
通过设置display属性，你可以控制元素是以行内还是块级的方式进行布局和显示。需要注意的是，并不是所有的元素都能使用这两个属性。有些元素本身就是固定的行内或块级元素，如span是行内元素，div是块级元素。而有些元素可以通过设置display属性来改变其默认行为。
另外，还有其他值可以用于display属性，例如：
display: inline-block;：将元素设置为行内块级元素，具有行内元素的特性（可以与相邻元素在同一行显示）和块级元素的特性（可以设置宽度、高度等）。display: none;：将元素隐藏，不会在页面上显示，也不占据空间。display: flex;：使用弹性盒子布局，可以实现灵活的元素排列和对齐。
这些是display属性的一些常见选项，你可以根据需要进行调整，以实现所需的布局和显示效果。
浙公网安备 33010602011771号