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;
}

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

相关推荐
Jokerator2 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
Savior`L4 小时前
CSS知识复习4
前端·css
我要让全世界知道我很低调5 小时前
记一次 Vite 下的白屏优化
前端·css
again4328 小时前
css生效规则
css
Esun_R8 小时前
使用CSS选择器选择列表中最后一个子元素的几种情况
css
海底火旺9 小时前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
Allen Bright11 小时前
【CSS-15】深入理解CSS transition-duration:掌握过渡动画的时长控制
前端·css
到底起什么网名才能不重名1 天前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
sunbyte1 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
码哥DFS1 天前
Flex布局原理
前端·css·css3