CSS知识

最新推荐文章于 2022-10-25 16:34:21 发布

爱上无名氏

最新推荐文章于 2022-10-25 16:34:21 发布

阅读量196

点赞数

分类专栏： javaScript 文章标签： css html javascript

本文链接：https://blog.csdn.net/g_zzh/article/details/119931303

版权

javaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS Object Model

HTMLElement
- style [CSSStyleDeclaration] ==> property.style 仅仅表示style解析的结果不是最终style
  - 运用多个规则时如何生效 <-----
- attributeStyleMap [StylePropertyMap] 对应attribute.style
- - computedStyleMap func 得到最终应用样式值 (会合并多个 CSSStyleDeclaration 包含stylesheet attribute.style)

HTMLLinkElement

rel 表名该文档是什么类型的文档 What Link? other Link
- stylesheet 文档的外部样式表会被解析为CSSStyleSheet 立即应用
- section 文档的节
- 。。。
- preconnect 和服务器提前建立TCP连接优化连接性能但会占用cpu
- preftch 预先加载内容预先加载下一页：
- preload 让浏览器在闲暇时间加载该资源
- prerender 预渲染，告诉浏览器在背后先默默渲染页面
- alternate stylesheet 可别替换的sheet。该sheet 不会立即生效 disable 控制是否生效
- 可以做到延迟生效
```
资源不阻塞关键渲染路径，还可以让它加载完毕后对当前页面生效。
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">同上 as 告诉浏览器加载的内容
<link rel="alternate stylesheet" href="style.css" onload="this.rel='stylesheet'">同上
```
```
<link rel="alternate stylesheet" href="style.css" title='aa'>
  1: title 必须
  2：link.disable = true; 让其不生效
  3: link.disable = false 让其生效 （生效之前必须让其不生效，第二步是必须的）
```

media 指定该link所适用的媒体查询

<head>
  <link ref="" /> 该css 会在首屏加载前 下载。等级很高
  <link ref='' media='print'>  会在首屏加载完成后，再下载css 等级较低 . 但是仅仅再打印的时候会生效
  <link ref='' media='print' onload="this.media='all'"> 资源不阻塞关键渲染路径，还可以让它加载完毕后对当前页面生效。
  

<head/>

CSSOM

是一组允许用JavaScript操纵CSS的API。 它是继DOM和HTML API之后，又一个操纵CSS的接口，从而能够动态地读取和修改CSS样式。

CSS知识点
- CSS对象 windows.CSS
- CSS Houdini
- 相关类
  - StyleSheet==>CSSStyleSheet 是对一个界面表示单个CSS样式表
    - link.rel=‘stylesheet’ link.as=‘style’
    - <style ></style>
```
cssrules===rules[遗留] CSSRuleList 当前样式表中所有CSSRule
disabled 前样式表是否生效。直接设置可生效
herf 来源
media
type
title
ownerNode 指向的节点 <style><link>
ownerRule
parentStyleSheet 指向父级别sheet
```
  - CSSRule 抽象类
    - CSSStyleRule 指向一个规则 dome:’.container{border:1px solid red}’
      - 隶属于一个sheet
      - cssText 该规则字符串形式
      - style：CSSStyleDeclaration 代表该规则所有[包含默认]属性
      - parentRule
      - selectorText 该规则对应的选择器
      - styleMap 对应
        该规则属性个数不包含系统默认的 {color:red,font:14px} ==>2。 === style.length
      - type :1 Type
    - CSSImportRule 指向一个规则文件 @import url(./import-rule.css);
      - 隶属于一个sheet
      - 见 CSSStyleRule
      - type:3
      - styleSheet 规则文件解析的sheet
    - CSSKeyframesRule CSSKeyframeRule 帧动画 @keyframes slidein {from{},to{}}
      - @keyframes == CSSKeyframesRule
      - type: 7
      - 见 CSSStyleRule
      - form ==> CSSKeyframeRule type:8
      - to ==> CSSKeyframeRule type:8
    - CSSPageRule @page 对应打印文档样式 @page{size:a4;}
    - CSSMediaRule @media screen(min-width: 900px){}媒体查询定义
    - CSSFontFaceRule @font-face {}描述要下载的外部字体的方面
    - CSSCounterStyleRule @counter-style thumbs {} ul{list-style: thumbs}
    - CSSSupportsRule css3 @supports (display: grid) {} 检查是否支持该css属性
  - CSSStyleValue 代表css 值：图片数字转换类单位值。。。
    - CSSStyleValue 对css 解析类 CSSStyleValue.parse(
      ‘transform’, ‘translate3d(10px,10px,0) scale(0.5)’);
  - StylePropertyMap 直接操作attribute.style Link
```
直接体现在style attribute <div style></div>
ele.attributeStyleMap.set('padding-left','10px')==><div style='padding-top:10px'>
ele.attributeStyleMap.set('padding-left',CSS.px(10))==><div style='padding-top:10px'>
set / append / delete ... 
```
- 自定义css属性
  - js增加属性 dome
```
  window.CSS.registerProperty({
    name:'--my-css-name', // 名字
    syntax:'<color>',//值类型
    inherits:false, // 是否可以继承
    initialValue:'#000000',// 初始值
  })

  @property --my-css-name{
    syntax:'<color>',//值类型
    inherits:false, // 是否可以继承
    initial-value:'#000000',// 初始值
  }
```
link rel 实现主题替换参考
预加载见 link.rel
Css优化
- https://github.com/addyosmani/critical
- https://github.com/berwin/Blog/issues/32

爱上无名氏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS知识

CSS Object ModelHTMLElementstyle [CSSStyleDeclaration] ==> property.style 仅仅表示style解析的结果不是最终style运用多个规则时如何生效 <-----attributeStyleMap [StylePropertyMap] 对应attribute.style computedStyleMap func 得到最终应用样式值 (会合并多个 CSSStyleDeclaration 包含st
复制链接

扫一扫