[ 理解CSS | 青训营笔记]

如日中天的纪德
64 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

今天学习了【理解CSS】

1.本堂课重点内容

  1. CSS 代码构成
  2. CSS 使用方法
  3. CSS 流程之选择器组、文本渲染
  4. 调试 CSS
  5. CSS 选择器的特异度
  6. CSS 继承
  7. CSS 求值过程解析
  8. CSS 布局方式及相关技术
  9. CSS 盒模型 - 行级
  10. CSS 盒模型 - 块级

2.详细知识点介绍

  • css语法由选择符（Selector）、属性（property）、值（value） 三个部分组成。

  • html中使用css的方法有哪几种

  • 1、内联方式（行内样式）

  • 2、内部方式（内嵌样式）

  • 3、使用link标签（链接式）

  • 4、使用@import（导入式）

  • 学习了CSS渲染的优先级： important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承。

  • 课程中重点对CSS中的盒模型进行了探讨：

image.png

  • Margin(外边距)  - 清除边框外的区域，外边距是透明的。
  • Border(边框)  - 围绕在内边距和内容外的边框。
  • Padding(内边距)  - 清除内容周围的区域，内边距是透明的。
  • Content(内容)  - 盒子的内容，显示文本和图像。

3.代码案例

一些块级元素

  • <address> // 定义地址
  • <caption> // 定义表格标题
  • <dd> //定义列表中定义条目
  • <div> //定义文档中的分区或节
  • <h1> //定义标题
  • <hr> //创建一条水平线
  • <li> //标签定义列表项目
  • <ol><ul><dl> //定义列表
  • <p> //标签定义段落
  • <table> //标签定义 HTML 表格

一些行级元素

  • <big> //大号字体加粗
  • <br> //换行
  • <cite> //引用进行定义
  • <em> //定义为强调的内容
  • <i> //斜体文本效果
  • <img> //向网页中嵌入一幅图像
  • <input> //输入框
  • <label> //标签为 input 元素定义标注（标记）
  • <select> // 创建单选或多选菜单
  • <small> //呈现小号字体效果
  • <span> //组合文档中的行内元素
  • <strong> //加粗
  • <textarea> //多行的文本输入控件

4.课后个人总结

今天学习了CSS的使用，以及CSS中的诸多标签，在学习的过程中，我发现有很多的知识我在以前的学习中并没有接触过，像通过划线的方法对区域进行划分等。

  • 学习CSS的几点建议
  • 充分利用MDN和W3CCsS规范
  • 保持好奇心，善用览器的开发者工具
  • 持续学习，CSS新特性还在不断出现

5.引用参考

avatar
文章
阅读
粉丝