【前端】CSS（引入方式+选择器+常用元素属性+盒模型+弹性布局）
CSS (级联样式表) 是一种用来描述网页和其他HTML文件样式的语言。以下是关于CSS的一些主要概念：
CSS的引入方式：
- 内联样式：直接在HTML元素的style属性中添加CSS代码。
- 内部样式表：在HTML文档的<head>标签中添加<style>标签，并在其中编写CSS代码。
- 外部样式表：创建一个单独的CSS文件，并通过HTML文档的<link>标签引入。
<!-- 内联样式 -->
<p style="color: red;">This is a paragraph.</p>
<!-- 内部样式表 -->
<head>
<style>
p { color: red; }
</style>
</head>
<!-- 外部样式表 -->
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>CSS选择器：
- 标签选择器：直接使用HTML标签作为选择器。
- 类选择器：在HTML元素的class属性中指定一个或多个类名，并在CSS中以"."开头定义。
- ID选择器：在HTML元素的id属性中指定一个ID名，并在CSS中以"#"开头定义。
- 伪类选择器：用于向某些选择器添加特殊的效果，如:hover和:active。
/* 标签选择器 */
p { color: red; }
/* 类选择器 */
.center { text-align: center; }
/* ID选择器 */
#logo { width: 200px; }
/* 伪类选择器 */
a:hover { color: blue; }CSS常用元素属性：
- color：文本颜色。
- background-color：背景颜色。
- font-size：字体大小。
- border：边框。
- padding：内边距。
- margin：外边距。
/* 文本颜色 */
p { color: red; }
/* 背景颜色 */
div { background-color: blue; }
/* 字体大小 */
h1 { font-size: 24px; }
/* 边框 */
table { border: 1px solid black; }
/* 内边距 */
div { padding: 10px; }
/* 外边距 */
body { margin: 0; }CSS盒模型：
- content box：内容区域，用于存放文本和图像等元素。
- padding box：内边距区域，扩展了内容区域的尺寸，有padding属性控制。
- border box：边框区域，围绕内边距区域，由border属性定义。
- margin box：外边距区域，最外层的区域，由margin属性定义。
/* 设置元素的宽度和高度 */
div {
width: 300px;
height: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}CSS弹性布局：
- 使用display属性的flex值可以创建一个弹性容器。
- 使用flex-direction控制项目的方向。
- 使用justify-content控制项目在主轴上的对齐方式。
- 使用align-items控制项目在交叉轴上的对齐方式。
/* 创建弹性容器 */
.container {
display: flex;
flex-direction: row; /* 主轴方向 */
justify-content: center; /* 主轴对齐 */
评论已关闭