CSS 编码基础

CSS（Cascading Style Sheets）是一种用于描述HTML或XML文档样式的语言。通过CSS可以控制网页的布局、颜色、字体等外观表现。

基本语法结构 选择器 { 属性: 值; 属性: 值; }

常用CSS属性

文本样式 font-family: 设置字体类型 font-size: 设置字体大小 color: 设置文本颜色 text-align: 设置文本对齐方式

盒模型属性 width: 设置元素宽度 height: 设置元素高度 margin: 设置外边距 padding: 设置内边距 border: 设置边框

布局属性 display: 控制元素显示方式 position: 定位方式 float: 浮动布局 flex: 弹性布局 grid: 网格布局

CSS选择器类型

元素选择器 p { color: blue; }

类选择器 .classname { font-weight: bold; }

ID选择器

idname {

background-color: yellow;

}

伪类选择器 a:hover { color: red; }

CSS引入方式

内联样式

文本

内部样式表

body { background-color: lightblue; }

外部样式表

CSS常用单位

px: 像素 em: 相对于当前元素字体大小 rem: 相对于根元素字体大小 %: 百分比 vw/vh: 视窗宽度/高度的百分比

响应式设计

@media screen and (max-width: 600px) { body { background-color: lightgreen; } }

CSS动画

@keyframes example { from {background-color: red;} to {background-color: yellow;} }

div { animation-name: example; animation-duration: 4s; }

CSS变量

:root { --main-color: #06c; }

h1 { color: var(--main-color); }

CSS预处理器

Sass示例 $primary-color: #333;

body { color: $primary-color; }

Less示例 @primary-color: #333;

body { color: @primary-color; }

CSS框架

Bootstrap Tailwind CSS Foundation Bulma

CSS最佳实践

使用语义化的类名 避免过度嵌套选择器 合理使用CSS重置 模块化组织CSS代码 考虑浏览器兼容性 优化性能减少重绘回流