跳到主要内容

CSS学习笔记

阅读需 3 分钟

下定决心还是再学一遍 CSS 等前端知识

CSS​

  • 三种引入方式

    • inline
    • <style></style>
    • 文件引入的方式：<link rel="stylesheet", href="./css/style.css">

  • index.css, 把其他 CSS 文件放到这里

@import url(./style.css) @import url(./test.css); /* @import "./style.css"
   但是推荐上面的那一种，用括号的方式，意思是作为函数参数传入
*/
  • CSS 的注释
    • /*CSS的注释*/

一个好问题：如果写多了注释，用户在下载文件的时候会不会太大，造成打开网页缓慢？

这个考虑是对的，但未来我们会用打包工具，比如 webpack，上传到服务器的代码会删除我们写的注释

常见的 CSS 元素​

必须掌握的 CSS 属性​

定位（Position）和布局（Layout）​

展示（display）和可见（visibility）​

盒子模型（box model）顺序​

背景设置（background）​

字体（Font），文本（text）​

其他属性（Other Property）​

CSS 属性的官方文档​

案例练习​

/* 方式一：改变元素的特性和垂直方向的布局 */
display: inline-block;
vertical-align: top;

/* 方式二： 通过浮动完成 */
float: left;

额外知识补充 2​

  • link 元素是外部资源链接元素，规范了文档与外部资源的关系

    • link 元素通常是在 head 元素中

  • 最常用的链接是样式表（CSS）

    • 此外也可以被用来创建站点图标（比如"favicon"图标）

  • link 元素常见的属性

    • href：此属性指定被链接资源的 URL。URL 可以是绝对的，也可以是相对的
    • ref：指定链接类型，常见的链接类型
      • icon：站点图标
      • stylesheet：CSS 样式

  • 属性

    • dns-prefetch

  • preload 预加载，在 webpack 会讲到

进制​

  • 二进制：0b 开头
  • 八进制：0o 开头
  • 16 进制：0x 开头

CSS 里面颜色的表示方法​

  • 颜色关键字

  • RGB 颜色

    • RGB 是一种色彩空间，通过 R，G，B 三原色来组成不同的颜色
    • RGB 各个原色的取值范围是 0-255

  • 当所有颜色都是 0 的时候，呈现黑色

    • 黑色是最纯洁的颜色

  • RGB 的表示方法

    • 十六进制 （#RRGGBB[AA]）
    • 十六进制 （#RGB[A]）
    • 函数符 RGB(100, 100, 100)
    • RGBA(), A 表示透明度

Chrome 浏览器开发者工具​

  • 打开

    • 右键->检查
    • 快捷键 F12

  • 其他技巧

    • 快捷键：ctrl+ 可以调整页面或者工具的字体大小
    • 通过删除某些元素来查看网页结构
    • 通过增删 css 来调试网页样式

浏览器的渲染流程 HTML，CSS​

浏览器的渲染流程

Dom Tree -> Render Tree(With CSS)

Loading Comments...
0%