css基础笔记简洁版1

📘 CSS 基础笔记 1

一、CSS 简介

CSS(层叠样式表)用于为网页添加样式,实现结构与样式分离,能够控制颜色、字体、布局、位置、动画等视觉效果。

二、基本语法

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

说明:

  • 选择器:选中目标元素
  • 属性:值:设置样式
  • 每条声明用 ; 结尾,属性和值用 : 分隔

三、CSS 的三种写法

  1. 行内样式(不推荐):
html 复制代码
<p style="color: green;">你好</p>
  1. 内部样式表:
html 复制代码
<style>
  p { color: red; }
</style>
  1. 外部样式表(推荐):
html 复制代码
<link rel="stylesheet" href="style.css">

四、基础选择器

类型 写法 说明
标签选择器 p {} 所有 <p> 标签
类选择器 .box {} class 为 box 的元素
ID 选择器 #header {} id 为 header 的元素
通配符选择器 * {} 匹配所有元素,常用于初始化

五、复合选择器

类型 写法 说明
后代选择器 div p {} 所有 div 内的 p 元素
子选择器 ul > li {} ul 的直接子元素 li
并集选择器 h1, p {} 同时选中 h1 和 p

六、伪类选择器(常用交互样式)

伪类 写法 说明
:hover a:hover {} 鼠标悬停
:active button:active {} 鼠标点击时
:focus input:focus {} 输入框获取焦点时
:first-child li:first-child {} 第一个子元素
:last-child li:last-child {} 最后一个子元素

七、通配符说明

css 复制代码
* {
  margin: 0;
  padding: 0;
}

用于清除所有元素的默认边距,常用于页面初始化。

相关推荐
P7Dreamer8 小时前
Tailwind CSS 日常使用
前端·css
默默地离开8 小时前
深入理解CSS盒子模型:从基础到实战 (第四回)
前端·css
遗憾随她而去.9 小时前
前端css 的固定布局,流式布局,弹性布局,自适应布局,响应式布局
前端·css
前端赵哈哈9 小时前
🚀 从 Windi CSS 迁移到 Tailwind CSS v4 完整实践指南
前端·css·vue.js
walking9579 小时前
在SCSS中使用BEM命名规范
前端·css
1phoenix16 小时前
JavaScript 实现自定义右键菜单
前端·javascript·css
福娃B16 小时前
【CSS】面试必会—浮动布局:让元素“漂浮”的艺术
前端·css·面试
PineappleCoder16 小时前
CSS那些你不得不懂的“潜规则”(二)
前端·css·面试
小楓120118 小时前
0基礎網站開發技術教學(一) --(前端篇)--
前端·javascript·css·html·web開發
有事没事实验室1 天前
node.js中的path模块
前端·css·node.js·html·html5