CSS样式表

2018年 第7篇

大家好

时隔一个多月

我又回来了

首先

申明一下

并不是我太懒

第一，我没有休息

第二，我没有旅游

第三，我没有生病

只是，我没有时间

今天

我回来了

回到了我曾经战斗过的地方

这一切

都是那么的熟悉

从今天开始

我们将要学习CSS

它是网页的第二基本支柱

如果说HTML

是骨

那CSS

就是皮

对，是真皮~

CSS的基础知识

HTML想要应用CSS效果

就必须在HTML内将CSS关联进来

第一。内联

在HTML元素中使用"style"属性

此方式灵活性极小，不推荐

第二。内部

在HTML文档头部 区域使用元素来包含CSS

此方式在一些并发数极高的网站内仍然坚持使用

以提高网页的响应速度

第三。外部

使用外部 CSS文件

当样式需要被应用到很多页面的时候

外部样式表将是理想的选择

使用外部样式表

你就可以通过更改一个文件

改变整个站点的外观

这是我们推荐的使用方法

样式表的写法

先看看下面这张图

样式表大致分三部分构成

1.标签名称

对应样式需要作用到的标签

2.{ 。。。}

括号内的内容为标签所属样式内容

3.属性+值

属性名称：值；

CSS注释

同HTML一样

CSS同样需要在必要的时候

注它一下释

来提醒未来的自己或他人

这个地方是

TM干嘛的

1.单行注释

/* 代码 */

2.多行注释

/* 代码 1

代码 2*/

小提示：选中需要注释的代码段，ctrl+/

CSS的长度单位

按照大的类别来分

CSS的长度单位可分为

绝对长度单位/相对长度单位

绝对长度单位是一个固定的值

它反应一个真实的物理尺寸

那么，常见的绝对长度单位有哪些呢？

· in 英寸

· cm 厘米

· mm 毫米

· ptpoints

· pcPicas

这些单位都是拥有真实的物理尺寸的以及确定的换算关系

比如，1in = 2.54cm

我们平时在书写css代码时

当然也可以直接使用这些单位

并且也能够在屏幕上表现

不过由于这些单位都是绝对长度单位

往往不利于页面屏幕的渲染

这些绝对长度单位更多的

使用场景往往是被用在印刷、打印等方向

CSS相对长度单位中的相对二字

表明了其长度单位会随着它的参考值的变化而变化

不是固定的

下面是常用的一些相对长度单位

· px 像素

· em 元素的字体高度

· exx-height，字母x的高度

· %百分比

在web开发中

像素现在仍然是典型（主流的）度量单位

当然

你可以在web开发的过程中采用其他的单位

但往往这些单位在渲染时都被映射换算成像素

单位的含义最初是指

基于当前字体大写字母”M”的尺寸

所以当改变font-size的大小时

这个长度单位将会发生变化

现代所有的浏览器中

都会有这样的一个默认值，即

所以即使你忘记了设置也不要紧

关于em单位有下面几点需要注意

基于当前元素的(如果没设置就是继承其父元素的)font-size

em单位具有级联关系

不理解？

看看下面的例子

span的字体大小设置为2em

其父元素div的字体大小为12px

所以，span的字体转换为像素就应该是

24px

三个DIV层层嵌套

div1给出字体大小为12px

作为1的子元素

div2的字体大小应为14.4px

作为2的子元素

div3的字体大小应为17.28px

CSS的颜色单位

CSS的颜色单位

跟HTML一样

有

英文【red】

十进制【rgb】

十进制透明度【rgba】

十六进制【#ff0000】等

此文略过

详情请参见

文末的小知识点