网页制作CSS样式
CSS样式基础语法
CSS规则由选择器和声明块组成。选择器指向需要样式化的HTML元素，声明块包含一条或多条用分号分隔的声明。
选择器 {
属性: 值;
属性: 值;
}常用选择器类型
元素选择器：直接使用HTML标签名
p {
color: blue;
}类选择器：以点号(.)开头
.classname {
font-size: 16px;
}ID选择器：以井号(#)开头
#header {
background: #ccc;
}盒模型属性
每个HTML元素都可视为一个盒子，包含内容(content)、内边距(padding)、边框(border)和外边距(margin)。
.box {
width: 300px;
padding: 20px;
border: 1px solid #000;
margin: 10px;
}布局方式
浮动布局
.left {
float: left;
width: 30%;
}
.right {
float: right;
width: 70%;
}Flex布局
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}Grid布局
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}响应式设计
使用媒体查询针对不同屏幕尺寸应用不同样式。
@media (max-width: 768px) {
.column {
width: 100%;
}
}动画效果
通过@keyframes创建动画，再通过animation属性应用。
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s;
}预处理器功能
Sass/Less等预处理器提供变量、嵌套、混合等功能。
$primary-color: #333;
.button {
background: $primary-color;
&:hover {
background: lighten($primary-color, 10%);
}
}最佳实践建议
- 使用外部样式表而非内联样式
- 合理组织CSS文件结构
- 采用BEM等命名规范
- 避免过度使用!important
- 考虑浏览器兼容性前缀
- 定期进行代码压缩优化
