avatar
文章
533
标签
122
分类
88
首页
时间轴
标签
分类
List
  • 音乐
  • 照片
  • 电影
友链
关于
晚上十一点睡觉のBlogCSS的基本使用 返回首页
搜索
首页
时间轴
标签
分类
List
  • 音乐
  • 照片
  • 电影
友链
关于

CSS的基本使用

发表于2022-12-04|更新于2026-10-03|全栈前端
|总字数:9|阅读时长:1分钟|浏览量:|评论数:
文章作者: 晚上十一点睡觉
文章链接: https://11pmsleep.gungnir.top/posts/53243/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 晚上十一点睡觉のBlog!
私密笔记前端JavaScript
cover of previous post
上一篇
HTML基础知识
HTML 从零入门:文档基本结构与常用标签、块级与行内元素的区别、列表表格表单、多媒体与锚点链接,及表单提交与 GET/POST 的前端视角说明。
cover of next post
下一篇
JavaScript基础知识
JavaScript 入门笔记:js 的作用与使用方式、数据类型与函数,重点整理 DOM 获取标签元素(getElementById/querySelector 系列)、属性与样式操作及 innerHTML/innerText 区别。
相关推荐
cover
2022-12-26
jQuery基础学习
jQuery 入门到实战:入口函数与选择器、选择集过滤与转移、html/prop/val 操作元素,事件绑定与代理、animate 动画,以及 $.ajax/$.get/$.post 发请求实现局部刷新。
cover
2025-06-29
CSR和SSR
CSR 客户端渲染与 SSR 服务器端渲染的完整对比:工作原理、优缺点与适用场景,涵盖 Next.js、Nuxt.js 等框架的选型建议与混合渲染模式。
cover
2022-12-06
JavaScript基础知识
JavaScript 入门笔记:js 的作用与使用方式、数据类型与函数,重点整理 DOM 获取标签元素(getElementById/querySelector 系列)、属性与样式操作及 innerHTML/innerText 区别。
cover
2022-12-03
HTML基础知识
HTML 从零入门:文档基本结构与常用标签、块级与行内元素的区别、列表表格表单、多媒体与锚点链接,及表单提交与 GET/POST 的前端视角说明。
cover
2025-06-29
JavaScript基础知识-数组
JavaScript 数组操作全解:定义与多维数组,push/pop、shift/unshift、slice/splice、join/sort/reverse/concat 等方法示例,及哪些操作会修改原数组的注意事项。
cover
2025-06-29
JavaScript基础知识-运算符
JavaScript 运算符速查:算术、赋值、比较、逻辑与三目运算符的用法表格与示例,重点讲清 == 隐式类型转换与 === 全等的区别。

评论
avatar
晚上十一点睡觉
个人学习日志,学习领域:网络安全和Python爬虫。近一年blog更新至语雀,等有时间再推送至此,后续blog会以全新版本进行发布
文章
533
标签
122
分类
88
Follow Me
公告
stay passionate and never say die
目录
  1. 1. CSS的介绍
    1. 1.1. css 的定义
    2. 1.2. css 的作用
    3. 1.3. css 的基本语法
    4. 1.4. 小结
  2. 2. CSS 的引入方式
    1. 2.1. 行内式
    2. 2.2. 内嵌式(内部样式)
    3. 2.3. 外链式
    4. 2.4. 导入式(用的少)
    5. 2.5. css引入方式选择
    6. 2.6. 小结
  3. 3. CSS 选择器
    1. 3.1. css 选择器的定义
    2. 3.2. css 选择器的种类
    3. 3.3. 标签选择器
    4. 3.4. 类选择器
    5. 3.5. 层级选择器(后代选择器)
      1. 3.5.1. 后代选择器:
      2. 3.5.2. 子代选择器
      3. 3.5.3. 兄弟选择器(之后所有兄弟选择器)
      4. 3.5.4. 相邻选择器(下一个兄弟选择器)
    6. 3.6. id选择器
    7. 3.7. 组选择器
    8. 3.8. 伪类选择器
      1. 3.8.1. 示例代码:hover
      2. 3.8.2. 示例代码:关于链接状态
      3. 3.8.3. 示例代码:focus
      4. 3.8.4. 示例代码:first-child
      5. 3.8.5. 代码示例:nth-child
      6. 3.8.6. CSS 中提供了各种各样的伪类,如下表所示:
    9. 3.9. 小结
  4. 4. CSS 属性
    1. 4.1. 布局常用样式属性
    2. 4.2. 文本常用样式属性
    3. 4.3. 布局常用样式属性示例代码
    4. 4.4. 文本常用样式属性示例
    5. 4.5. 小结
  5. 5. CSS字体/文本
    1. 5.1. 字体常用样式
      1. 5.1.1. 字体 :font-family
      2. 5.1.2. 字号 :font-size
      3. 5.1.3. 字体风格 :font-style
      4. 5.1.4. 小写字母转为大写 :font-variant
      5. 5.1.5. 字体复合属性
    2. 5.2. 文本常用样式
      1. 5.2.1. 对齐方式:text-align
      2. 5.2.2. 首行缩进:text-indent
      3. 5.2.3. 文本线:text-decoration
      4. 5.2.4. 字距:letter-spacing
      5. 5.2.5. 词距:word-spacing
      6. 5.2.6. 行高:line-height
  6. 6. CSS背景
    1. 6.1. 背景颜色:background-color
    2. 6.2. 背景图片:background-image
    3. 6.3. 背景铺盖
    4. 6.4. 背景大小:background-size
    5. 6.5. 背景定位:background-position
    6. 6.6. 复合样式:background
  7. 7. CSS浮动
    1. 7.1. 元素怎样浮动:
  8. 8. CSS 元素溢出
    1. 8.1. 什么是 css 元素溢出
    2. 8.2. 示例代码
    3. 8.3. 小结
  9. 9. CSS定位:position
    1. 9.1. static 定位
    2. 9.2. fixed 定位
    3. 9.3. relative 定位
    4. 9.4. absolute 定位
    5. 9.5. sticky 定位
    6. 9.6. 元素的堆叠
  10. 10. 案例:滚动条显示溢出的内容
  11. 11. 案例:更改鼠标光标:
  12. 12. CSS 显示特性
    1. 12.1. display 属性的使用
    2. 12.2. 示例代码
    3. 12.3. 小结
  13. 13. 盒子模型
    1. 13.1. 盒子模型的介绍
    2. 13.2. 盒子模型特点
    3. 13.3. 盒子模型相关样式属性
      1. 13.3.1. 设置宽高:width和height
      2. 13.3.2. 设置边框:border
      3. 13.3.3. 设置内间距:padding
      4. 13.3.4. 设置外间距:margin
      5. 13.3.5. 盒子的真实尺寸
  14. 14. 重置样式
  15. 15. CSS练习:注册登录
    1. 15.1. 注册
    2. 15.2. 登录
  16. 16. 注意点
  17. 17. refer
最新文章
集团流量链路
集团流量链路2026-10-04
6-小红书环境一致性风控与逐项排查实战
6-小红书环境一致性风控与逐项排查实战2026-10-04
4-小红书签名体系与风控实战
4-小红书签名体系与风控实战2026-10-04
Linux-Shell脚本学习
Linux-Shell脚本学习2026-10-04
Linux-Kali配置与使用
Linux-Kali配置与使用2026-10-04
© 2022 - 2026 By 晚上十一点睡觉
Welcome to 11pmsleep's blog ~~~ Blog仅供个人记录笔记学习所用,若有侵权,联系我删除~若有错误,也望诸君不吝指正
搜索
数据加载中