欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端开发基础学习笔记(三):知识点--CSS基础

程序员文章站 2022-06-11 20:45:38
...

1.CSS 实际上如何工作?

     当浏览器显示文档时,它必须将文档的内容与其样式信息结合。它分两个阶段处理文档:

     1)浏览器将 HTML 和 CSS 转化成 DOM (文档对象模型)。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。

     2)浏览器显示 DOM 的内容。

前端开发基础学习笔记(三):知识点--CSS基础

2.CSS的属性和属性值:

background-color: yellow;

 background-color称为属性,类似yellow的值称为属性值。

3.CSS条件信息(嵌套语句):

     @media:用于浏览器设备匹配条件时生效:

@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}

     @supports:只有浏览器确实支持被测功能时才会应用

     @document:只有当前页面匹配一些条件时才会应用

4.为了代码简洁,CSS简写:

padding: 10px 15px 15px 5px;

     效果等同于:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

 

相关标签: 前端开发