前排提示：不是很全，后面的知识后面遇到了在学！！
为什么学习CSS
-
网页样式和布局：CSS是一种用于描述HTML元素在网页上呈现的样式和布局的语言。通过学习CSS，我们可以使网页看起来更加美观、易于使用，为用户提供更好的体验。
-
设备和浏览器兼容性：CSS具有跨设备和浏览器的兼容性。学习CSS能帮助我们针对不同的设备（如桌面电脑、平板电脑、手机等）和浏览器（如Chrome、Firefox、Safari等）优化网页样式，确保在各种环境下都能提供一致的用户体验。
-
网页性能优化：通过有效地使用CSS，我们可以减少网页的加载时间、优化渲染速度，提高网站的性能。这对于用户体验和搜索引擎优化（SEO）都非常重要。
-
动画和交互：CSS3引入了许多新特性，如动画、过渡、变形等，使得我们可以仅使用CSS来实现一些原本需要JavaScript的动画和交互效果。这样可以减少对JavaScript的依赖，提高网站性能。
-
响应式设计：CSS的媒体查询功能使得我们可以为不同屏幕尺寸的设备创建自适应的布局，实现响应式设计。这对于提高网站在移动设备上的用户体验和适应性至关重要。
-
提高开发效率：掌握CSS可以帮助我们更快速地完成网页开发。通过组织良好的样式表，我们可以在多个页面之间重用样式，减少重复劳动，提高开发效率。
-
前端开发的基本技能：CSS是前端开发的三大基石之一（HTML、CSS和JavaScript），掌握CSS是成为一名合格的前端开发人员的基本要求。学习CSS可以为我们打开Web开发领域的大门，为我们的职业发展提供更多机会。
基础知识
//HTML文件
<head>
<style>
.red{
color:red;
}
</style>
<link rel="stylesheet" href="./index.css" type="text/css">
</head>
<body>
<h1 class="green blue red">
A Tittle
</h1>
</body>
css
复制代码
/*index.css文件*/
.blue{
color:blue;
font-size:48px;
}
.green{
color:green;
}
继承
CSS 中的继承是一种机制，通过它，子元素可以从其父元素接收样式属性值。这使得我们可以在一个地方设置通用样式，然后让其他元素自动继承这些样式，从而减少代码的重复和提高可维护性。
并非所有的 CSS 属性都是可继承的。一些常见的可继承属性包括：color、font、text-align等。这些属性在父元素上设置后，子元素会自动继承这些样式，除非子元素上明确设置了不同的值。
盒模型
实现三角形
xml
复制代码
/* 创建一个空的 div 元素，将其作为三角形 */
<div class="triangle"></div>
/* 为三角形添加样式 */
<style>
.triangle {
/* 将 div 的宽度和高度设置为 0，这样它本身不会占据空间 */
width: 0;
height: 0;
/* 使用 border 来制作三角形 */
/* 三角形的底边宽度，此处设为 100px */
border-left: 50px solid transparent;
border-right: 50px solid transparent;
/* 三角形的高度，此处设为 100px */
border-bottom: 100px solid red;
/* 如果想创建其他方向的三角形，可以尝试更改 border 的设置 */
}
</style>
实现固定比例矩形
xml
复制代码
<div class="rectangle"></div>
<style>
.rectangle {
/* 设置矩形的宽度 */
width: 200px;
/* 使用 aspect-ratio 属性设置矩形的宽高比为 4:3 */
aspect-ratio: 4 / 3;
/* 设置矩形的背景颜色和边框 */
background-color: lightblue;
border: 2px solid black;
}
</style>
实现水平居中
<div class="container">
<div class="centered">
I am hhh.
</div>
</div>
css
复制代码
/* 设置 body 和 html 的高度为 100%，这样才能让外层容器占据整个屏幕 */
html, body {
height: 100%;
margin: 0;
}
.container {
/* 将容器的宽度设置为 100%，以使其占据整个屏幕宽度 */
width: 100%;
/* 使用 flex 布局将子元素水平居中 */
display: flex;
justify-content: center;
}
.centered {
/* 设置要居中的元素的样式，例如背景色、内边距等 */
background-color: lightblue;
padding: 20px;
border: 2px solid black;
}
