1 line
13 KiB
Plaintext
1 line
13 KiB
Plaintext
{"editorState":{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"CSS 代表","type":"text","version":1},{"detail":0,"format":1,"mode":"normal","style":"","text":"层叠样式表","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":"（Cascading Style Sheets）","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"HTML","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"link","version":1,"rel":null,"target":null,"title":null,"url":"https://developer.mozilla.org/zh-CN/docs/Glossary/HTML"},{"detail":0,"format":0,"mode":"normal","style":"","text":" 是最常见的标记语言，但你可能也听说过其他可标记语言，如 ","type":"text","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"SVG","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"link","version":1,"rel":null,"target":null,"title":null,"url":"https://developer.mozilla.org/zh-CN/docs/Glossary/SVG"},{"detail":0,"format":0,"mode":"normal","style":"","text":" 或 ","type":"text","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"XML","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"link","version":1,"rel":null,"target":null,"title":null,"url":"https://developer.mozilla.org/zh-CN/docs/Glossary/XML"},{"detail":0,"format":0,"mode":"normal","style":"","text":"。","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"CSS 应用于文档的三种方法","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"使用外部样式表","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"使用内部样式表","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":2},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"使用内联样式","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":3}],"direction":"ltr","format":"","indent":0,"type":"list","version":1,"listType":"number","start":1,"tag":"ol"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"CSS 声明通过空白字符分离不同的值，","type":"text","version":1},{"detail":0,"format":1,"mode":"normal","style":"","text":"属性名称不应该含有空白字符","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":"。","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"CSS是如何工作的","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"heading","version":1,"tag":"h1"},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"浏览器载入 HTML 文件（比如从网络上获取）。","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式，下一节将更加详细的解释 DOM。","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":2},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理，简单起见，同时此节主讲 CSS，所以这里对如何加载 JavaScript 不会展开叙述。","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":3},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":4},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":5},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"网页展示在屏幕上（这一步被称为着色）。","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":6}],"direction":"ltr","format":"","indent":0,"type":"list","version":1,"listType":"number","start":1,"tag":"ol"},{"children":[{"altText":"","caption":{"editorState":{"root":{"children":[],"direction":null,"format":"","indent":0,"type":"root","version":1}}},"height":0,"maxWidth":500,"showCaption":false,"src":"https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works/rendering.svg","type":"image","version":1,"width":0}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"一些 css 属性继承当前元素的父元素上设置的值，有些则不继承。这也可能导致一些和期望不同的结果。","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"层叠","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"link","version":1,"rel":null,"target":null,"title":null,"url":"https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#%E5%B1%82%E5%8F%A0"}],"direction":"ltr","format":"start","indent":0,"type":"heading","version":1,"tag":"h3"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"样式表","type":"text","version":1},{"children":[{"detail":0,"format":1,"mode":"normal","style":"","text":"层叠","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"link","version":1,"rel":null,"target":null,"title":null,"url":"https://developer.mozilla.org/zh-CN/docs/Web/CSS/Cascade"},{"detail":0,"format":0,"mode":"normal","style":"","text":"——简单的说，就是 CSS 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"优先级","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"link","version":1,"rel":null,"target":null,"title":null,"url":"https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#%E4%BC%98%E5%85%88%E7%BA%A7"}],"direction":"ltr","format":"start","indent":0,"type":"heading","version":1,"tag":"h3"},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"继承","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"link","version":1,"rel":null,"target":null,"title":null,"url":"https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#%E7%BB%A7%E6%89%BF"}],"direction":"ltr","format":"start","indent":0,"type":"heading","version":1,"tag":"h3"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"继承也需要在上下文中去理解——一些设置在父元素上的 CSS 属性是可以被子元素继承的，有些则不能。","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"举一个例子，如果你设置一个元素的 ","type":"text","version":1},{"detail":0,"format":16,"mode":"normal","style":"","text":"color","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":" 和 ","type":"text","version":1},{"detail":0,"format":16,"mode":"normal","style":"","text":"font-family","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":"，每个在里面的元素也都会有相同的属性，除非你直接在元素上设置属性。","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"一些属性是不能继承的——举个例子如果你在一个元素上设置 ","type":"text","version":1},{"children":[{"detail":0,"format":16,"mode":"normal","style":"","text":"width","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"link","version":1,"rel":null,"target":null,"title":null,"url":"https://developer.mozilla.org/zh-CN/docs/Web/CSS/width"},{"detail":0,"format":0,"mode":"normal","style":"","text":" 为 50% ，所有的后代不会是父元素的宽度的 50% 。如果这个也可以继承的话，CSS 就会很难使用了！","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"像 ","type":"text","version":1},{"detail":0,"format":16,"mode":"normal","style":"","text":"width","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":"、","type":"text","version":1},{"detail":0,"format":16,"mode":"normal","style":"","text":"margin","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":"、","type":"text","version":1},{"detail":0,"format":16,"mode":"normal","style":"","text":"padding","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":" 和 ","type":"text","version":1},{"detail":0,"format":16,"mode":"normal","style":"","text":"border","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":" 不会被继承","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"children":[{"detail":0,"format":16,"mode":"normal","style":"","text":"inherit","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"link","version":1,"rel":null,"target":null,"title":null,"url":"https://developer.mozilla.org/zh-CN/docs/Web/CSS/inherit"}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID）十（类）个（元素）","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"内联样式，即 ","type":"text","version":1},{"children":[{"detail":0,"format":16,"mode":"normal","style":"","text":"style","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"link","version":1,"rel":null,"target":null,"title":null,"url":"https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes#style"},{"detail":0,"format":0,"mode":"normal","style":"","text":" 属性内的样式声明，优先于所有普通的样式，无论其优先级如何。","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用——","type":"text","version":1},{"detail":0,"format":16,"mode":"normal","style":"","text":"!important","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":"。","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}} |