xml地图|网站地图|网站标签 [设为首页] [加入收藏]

软件资讯

当前位置:美高梅游戏网站 > 软件资讯 > 《CSS3实战》读书笔记 第2章 层叠样式表(CSS)

《CSS3实战》读书笔记 第2章 层叠样式表(CSS)

来源:http://www.gd-chuangmei.com 作者:美高梅游戏网站 时间:2019-09-02 13:41

 

## 层叠样式表

本章将阐述CSS的基本规则。

又翻了一下之前的读书笔记,再重温了忘掉的细节。最近一年的工作,由于有重构岗位的同学负责CSS的编写,虽说还是接触到,但毕竟不写好久了,有些东西还是忘记了,例如选择器的权重计算细节。这个笔记只是部分,后半部分快速浏览了,没写笔记。

### 解构CSS

所谓CSS,由选择器(selector)和声明块(declaration block)组成。再进一步细分,每个声明包括了属性和值。

selector:{
    property:value;
}

 

### 内联还是外链?

大多时候显然是外链更高效。样式文件可以缓存到用户电脑,如果你一个网站用一套css,当用户访问同一个网站其它页面时,就不用再次加载样式。

然而,缓存对于开发者来说是个坏东西。在本地调试时,修改样式表之后可能无法马上看到变化这时应该通过ctrl+F5来强制刷新清空缓存。

1、元素命名规则

内联样式

同在在head标记内建一个style标记,样式在里面写。在H5以前的规范中,style必须加上属性type="text/css",现在已经不作要求。如果head内还有javascript,需要把script标记放到样式的后面。
单个网页而言,内联样式相对较快,但是可维护性较差。

  • 类名或者ID以元素是做什么的来命名,不要以元素的外观表现来命名。
  • 类名或者ID全部小写,并用连字符号或许下划线分隔。(.add-class)

外链样式

外链样式起名随意,但是最好是相关的。全站的表单用同一套样式时,可以命名为form.css。

对于外链css还可以使用在线工具进行验证。

外链css必须关联。可以选择<link>标记也可以用@import来指向想要被引用的css,浏览器对此二者的解释并无区别。

2、伪类

link

h5的link调用格式为:

<link rel="stylesheet" href="css/styles.css">

xhtml的格式为:

<link type="texxt/css" rel="stylesheet" href="....."/>

h5省略了type="texxt/css"

本文由美高梅游戏网站发布于软件资讯,转载请注明出处:《CSS3实战》读书笔记 第2章 层叠样式表(CSS)

关键词:

上一篇:AngularJS 源码分析3

下一篇:没有了