一、简介
CSS(Cascading Style Sheets，层叠样式表)是用来描述HTML或XML(包括如SVG、MathML或XHTML等XML方言)文档的外观和格式的语言。它为网页提供了样式，使得内容与表现分离，便于维护和更新。
二、选择器
元素选择器：直接使用HTML标签名作为选择器。
p {
color: blue;
}类选择器：以点号.开头，后跟类名。
.myClass {
background-color: yellow;
}ID选择器：以井号#开头，后跟ID名。
#myId {
font-size: 20px;
}伪类选择器：用于选择元素的特定状态，如:hover、:active、:focus。
a:hover {
text-decoration: underline;
}属性选择器：基于元素的属性进行选择，例如[type="text"]。
input[type="text"] {
border: 1px solid black;
}三、盒模型
每个HTML元素可以看作是一个盒子，由四个部分组成：
内容区(content)：实际内容所在的区域。
内边距(padding)：内容区与边框之间的空间。
边框(border)：围绕在内边距外的线条。
外边距(margin)：边框之外的空间，用来分隔相邻的元素。
div {
width: 300px;
height: 200px;
padding: 10px;
border: 5px solid red;
margin: 20px;
}四、定位(Positioning)
提供多种方式来控制元素的位置：
static：默认值，元素按照正常的文档流布局。
relative：相对定位，相对于其正常位置进行偏移。
absolute：绝对定位，相对于最近的非static祖先元素进行定位。
fixed：固定定位，相对于浏览器窗口进行定位，滚动页面时保持不动。
sticky：粘性定位，当页面滚动到指定位置时，元素会“粘”在视窗中的某个位置。
.stickyElement {
position: sticky;
top: 0;
}五、浮动(Float)与清除浮动(Clear)
float：使元素脱离正常的文档流，并向左或右移动，直到它的外边缘碰到包含块或另一个浮动元素的边缘。
clear：阻止元素旁边出现浮动元素。
.floatLeft {
float: left;
}.clearBoth {
clear: both;
}六、弹性布局(Flexbox)
Flexbox是一种一维布局模式，旨在提供一种更有效的方式来对容器内的项目进行排列、对齐和分布空间。
.flexContainer {
display: flex;
justify-content: center; / 水平居中 /
align-items: center; / 垂直居中 /
}七、网格布局(Grid)
Grid Layout 是一个二维布局系统，允许你创建复杂的Web设计，而无需使用浮动或定位。
.gridContainer {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
}八、媒体查询(Media Queries)
媒体查询允许根据设备的特性(如宽度、高度、方向等)应用不同的样式。
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}九、响应式设计
响应式设计是指设计能够适应不同屏幕尺寸和分辨率的网站。这通常涉及到使用媒体查询、灵活的网格布局和图片。
十、单位
支持多种单位，包括像素(px)、百分比(%)、em、rem等。其中，em和rem是相对单位，分别相对于父元素字体大小和根元素字体大小。
十一、颜色
中定义颜色的方式有多种，包括关键字(如red)、十六进制(如#ff0000)、RGB(如rgb(255.0.0))、RGBA(带透明度)、HSL(色调、饱和度、亮度)和HSLA(带透明度)。
十二、文本样式
font-family：设置字体系列。
font-size：设置字体大小。
font-weight：设置字体粗细。
line-height：设置行高。
text-align：设置文本对齐方式。
color：设置文本颜色。
text-decoration：设置下划线、删除线等装饰效果。
十三、背景与边框
background-color：设置背景颜色。
background-image：设置背景图像。
background-repeat：设置背景图像是否重复。
background-position：设置背景图像的位置。
border：设置边框的样式、宽度和颜色。
border-radius：设置圆角边框。
十四、过渡(Transitions)与动画(Animations)
transition：定义元素改变状态时的过渡效果。
animation：通过关键帧(@keyframes)创建动画效果。
.transitionExample {
transition: width 2s, height 2s, transform 2s;
}@keyframes slidein {
from {transform: translateX(0);}
to {transform: translateX(100px);}
}.animationExample {
animation: slidein 2s infinite;
}十五、伪元素(Pseudo-elements)
伪元素用于添加特殊效果到某些选定元素的一部分，如::before和::after。
p::first-letter {
font-size: 200%;
color: green;
}a::after {
content: " (链接)";
}以上是基础知识点的总结，对于初学者来说，这些都是构建网页布局和样式的基础。随着实践的深入，你可以探索更多高级特性和最佳实践。希望这些信息对你有所帮助!
