理解 CSS | 青训营笔记

175 阅读2分钟

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

一、本堂课重点内容:

  • 了解CSS的定义与简介
  • 在页面中使用CSS
  • CSS是如何工作的
  • 调试CSS
  • 深入CSS

二、详细知识点介绍:

  • 在页面中使用CSS:
-   第一种方式:内联定义
-   第二种方式:定义内部样式块对象
-   第三种方式:链入外部样式表文件(这种方式最常用!)
  • 选择器:
-   通配选择器、id选择器、标签选择器、类选择器、
-   属性选择器、伪类、组合(直接组合、后代组合、亲子组合、兄弟选择器、相邻选择器)、选择器组
  • CSS样式
-   颜色--RGBHSL
-   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继承以及布局