CSS 基础知识分享:从入门到注意事项

什么是CSS?

CSS是用于描述HTML或XML文档呈现方式的语言。它控制网页的布局、颜色、字体等视觉表现,让内容与表现分离。

通俗的说,html是骨头,那么css就是他的画皮。

基本语法

CSS规则由两部分组成:选择器和声明块。

css 复制代码
选择器 {
  属性: 值;
  属性: 值;
}

例如:

css 复制代码
p {
  color: blue;
  font-size: 16px;
}

常用选择器

  1. 元素选择器:直接选择HTML元素(常用)

    css 复制代码
    p { ... }
  2. 类选择器:选择具有特定class属性的元素(常用,需要编辑目标class属性)

    css 复制代码
    .highlight { ... }
  3. ID选择器:选择具有特定ID属性的元素

    css 复制代码
    #header { ... }
  4. 后代选择器:选择特定元素内的元素

    css 复制代码
    div p { ... }

常用属性

文本样式

  • color: 文本颜色
  • font-family: 字体
  • font-size: 字体大小
  • text-align: 文本对齐方式

盒模型

  • width/height: 宽度/高度
  • margin: 外边距
  • padding: 内边距
  • border: 边框

布局

  • display: 显示方式(block, inline, flex等)
  • position: 定位方式
  • float: 浮动

常见问题

1. 为什么CSS没效果?

  • 检查选择器是否写对了
  • 检查CSS文件路径是否正确
  • 看看是否有拼写错误(比如color写成colour

2. 颜色值怎么写?

  • 英文单词:red, blue
  • 十六进制:#FF0000(红色)
  • RGB:rgb(255, 0, 0)(红色)

3. 单位用px还是%?

  • px(像素):固定大小
  • %(百分比):相对大小
  • 初学者建议先用px

动手小练习

  1. 创建一个HTML文件
  2. 添加一个外部CSS文件
  3. 尝试:
    • 把所有段落文字变成蓝色
    • 给页面添加一个粉色背景
    • 让所有图片宽度变成300像素

下一步学习建议

掌握这些基础后,可以继续学习:

  1. 盒模型(理解margin/padding/border)
  2. 常用布局(flexbox)
  3. 响应式设计(让网页适配手机)

注意事项

1. 盒模型理解

CSS盒模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。默认情况下,元素的widthheight只指定内容区域的尺寸。

css 复制代码
.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}
/* 实际占用宽度 = 200 + 20*2 + 5*2 + 10*2 = 270px */

可以使用box-sizing: border-box让宽度包含padding和border:

css 复制代码
.box {
  box-sizing: border-box;
  /* 现在width包含content+padding+border */
}

2. 外边距合并

相邻的垂直外边距会合并(取较大值),这在布局时可能导致意外结果:

css 复制代码
.box1 { margin-bottom: 20px; }
.box2 { margin-top: 30px; }
/* 实际间距是30px,不是50px */

解决方案:

  • 使用padding代替margin
  • 添加边框或padding阻止合并

CSS看似简单,但深入掌握需要大量实践。建议从基础开始,逐步构建复杂布局,同时注意代码组织和维护性。

相关推荐
陈不知代码18 分钟前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记19 分钟前
sass中@mixin与 @include
前端·sass
陈琦鹏26 分钟前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数1 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante1 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam2 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8502 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏2 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪3 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾3 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite