14 posts tagged with "学习笔记"

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

大纲​

CSS 文本属性​

text-decoration​

• text-decoration(常用):用于设置文字的装饰线

  • none：无任何装饰线，可以去除 a 元素默认的下划线
  • underline: 下划线
  • overline: 上划线
  • line-through: 中划线

• 企业中常用的

  • css/reset.css 在里面设置, 在 html 通过 link 引入

a {
  text-decoration: none;
}

text-transform​

• text-transform(一般)
  • capitalize（每个单词的首字母大写）
  • uppercase 大写
  • lowercase 小写
  • none 没有任何影响

text-indent​

• text-indent(一般): 设置第一行内容的缩进
  • font-size: 40px; text-indent: 80px;
  • text-indent: 2em;

text-align​

• text-align(重要)
  • 直接翻译过来设置文本的对齐方式
  • MDN：定义行内内容（例如文字），如何想对它的块 父元素对其
  • 常用的值
    • left
    • right
    • center
    • justify： 两端对齐，基本很少用
      • 需要和text-align-last: justify一起配合用
  • W3C
    • This shorthand property sets the 'text-align-all' and 'text-align-last' properties and describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill

word/letter-spacing​

• word/letter-spacing
  • letter-spacing: 10px;
  • word-spacing: 10px;

CSS 字体的属性​

font-size​

• 常用设置
  • 具体数值 + 单位：默认为 16px（浏览器设置我们自己的大小就是 16px）
  • em
  • 百分比
    • 可以继承

font-family​

• 用于设置文字的字体名称 - 可以设置 1 个或者多个字体名称 - 浏览器会选择列表中第一个该计算机上有安装的字体 - 或者是通过 @font-face 指定的可以直接下载的字体 可以继承

font-weight(重要)​

• 用于设置文字的粗细(重量)
• 常见的取值
  • 100, 200, 300, 400, 500, 600, 700, 800, 900, 每一个数字表示一个重量
  • normal: 等于 400
  • bold: 等于 700
• strong, b, h1-h6 默认设置的就是 bold

font-style（一般）​

• 设置文字的常规，斜体显示

  • normal
  • italic：斜体，字体本身支持斜体时，显示的斜体
  • oblique：斜体，不管字体支持不支持斜体，都给字体做倾斜，看起来像斜体

• 早期 em, i, cite, address, var, dfn 等元素的 font-style 默认就是 italic

font-variant(了解)​

可以影响小写字母的显示形式，variant 是变形的意思

可以设置的值如下： - normal - small-caps 将小写字母替换为缩小过的大写字母 - My Name Is ->

line-height(常用)​

• 用于设置文本的行高

  • 可以先简单理解为一行文字所占据的高度

• 为什么文本需要行高

  • 方便文本的阅读和理解

• 严格定义

  • 两行文字(基线)之间的间距
  • 基线：与小写字母 x 对齐的线

• line-height - 文本的高度 = 行距
• 文本默认会在一行的中间显示

font​

• font 是一个缩写属性

  • font-style
  • font-size
  • font-weight
  • font-variant
  • font-family
  • line-height
  • font-style font-variant font-weight font-size/line-height font-family;

• 规则

  • font-style font-variant font-weight 可以随意调换顺序，也可以省略
  • /line-height 可以省略， 如果不省略，必须跟在 font-size 后面
    • 如果是数值，表示 2 倍或者 1.5 倍前面的行高
  • font-size, font-family 不可以调换顺序，不可以省略

font-size: 30px;
font-weight: 700;
font-variant: small-caps;
font-style: italic;
font-family: serif;
line-height: 30px;

font: italic small-caps 700 30px/30px serif;

CSS 选择器​

下定决心还是再学一遍 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 属性的官方文档​

• 官方文档

  • https://w3.org/TR?tag=css

• CSS 推荐文档地址

  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

• 由于浏览器版本，CSS 版本的问题，查询某些 CSS 是否可用

  • 可以到 caniuse.com，查询 CSS 属性的可用性

案例练习​

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

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

额外知识补充 2​

link 元素​

• 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)