2018 May 03 —— improvement; web; js

CSS

本次来整体的学习以及练习 CSS;

1 CSS IS?

CSS(层叠样式表): 定义文档如何呈现;

网页中的信息使用 HTML 组织其内容结构;文档可能由多个文件组合构建而生成; XML / SVG / XUL/ HTML

2 Why CSS

CSS 样式与文档内容分离,以便样式复用以及各自独立维护;

浏览器渲染时,将css 以及 页面内容一起加载;

注意: 在使用 CSS 时,注意避免使用糅杂的 html 标签做样式控制, 否则样式的一部分内容在html 中,一部分又存在于

3 CSS Works

HTML 组合 CSS 转换为 DOM结构,浏览器展示 DOM 内容;

标记语言中的元素, 元素的开头和元素的结束;元素又可以作为容器存在去装载其他元素,进而将 DOM 演化为一种树形结构;

如何去分析 DOM 结构? 利用浏览器调试工具;

4 层叠与继承

CSS 的最终作用结果由多层样式来源叠加而混合决定;

开发者样式类型: 独立外部文件而存在的外链样式/ 在页面头部定义的内联样式 / 定义在特定元素中的临时调试样式

CSS 样式的继承: 元素自身的样式优先级高于从父级元素继承来的样式;

如 : p 元素包含了一个 span ,span 会继承来自 p 元素的样式;

!important关键字,用户自定义样式

5 选择器

css 中的 rule : rule 通常以选择器开始,带上对应的样式内容声明{}

  1. 标签选择器
  2. 类选择器,设置元素 class 属性,定义元素类名,css 中类选择器以 . 开头
  3. ID 选择器,以 # 开头

CSS 规定有更高确定度的选择器优先级更高,由于每个ID在文档中必须是唯一的,所以 ID 选择器具有更高确定度,优先级高于类选择器;

确定度相同时,后出现的优先级更高;

当规则冲突时: 增加其中一条的确定度,如 类选择器变为 ID 选择器,或者移动选择器到后面以便提升其优先级;

伪类选择器

加在选择器后面用于指定元素状态的关键字;

针对伪类选择器进一步指定状态,如 selector : class {}

伪类选择器修饰元素的特殊状态下的呈现;

基于关系的选择器

本节非常重要;

注意优先级原则: ID 选择器高于类选择器, 自身的优先级高于继承父元素的属性优先级;

可读性良好的 CSS

良好的排版与组织形式

善用注释 /**/

定义选择器组合 h1,h2,h3


Quote:

[CSS入门教程](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started) [CSS 教程](http://www.runoob.com/css/css-tutorial.html)
上一篇
下一篇
Loading Disqus comments...
Table of Contents