这是我参与「第五届青训营 」笔记创作活动的第2天
一、本堂课重点内容:
- 了解CSS的定义与简介
- 在页面中使用CSS
- CSS是如何工作的
- 调试CSS
- 深入CSS
二、详细知识点介绍:
- 在页面中使用CSS:
- 第一种方式:内联定义
- 第二种方式:定义内部样式块对象
- 第三种方式:链入外部样式表文件(这种方式最常用!)
- 选择器:
- 通配选择器、id选择器、标签选择器、类选择器、
- 属性选择器、伪类、组合(直接组合、后代组合、亲子组合、兄弟选择器、相邻选择器)、选择器组
- CSS样式
- 颜色--RGB、HSL
- alpha透明度-- 0~1
- 字体--font-family(Webfont)、font-size(大小)、font-weight(粗细)
- 行号--line-height
- 空白--white-space
- a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
- 选择器的优先级--通过特异度判断
- 继承:某些属性会自动继承其父元素的计算值,除非显式指定一个值
- 布局:常规流、浮动、定位
- 盒子模型
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像
显示一个表的单个边框,使用 border-collapse属性
- overflow
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
三、课后个人总结:
- 了解并掌握了CSS的基本使用位置、选择器的种类、CSS的工作过程以及调试
- 了解并掌握了CSS的选择器特异度、CSS继承以及布局