02-初识CSS

CSS(层叠样式表)用来规定HTML文档的呈现形式(外观和格式编排)

定义和应用样式

CSS样式由一条或者多条一分好隔开的样式声明组成, 每条声明中包含着一个CSS属性和该属性的值, 二者以冒号分隔

内嵌样式

样式不是定义了就完事了, 它还需要被应用, 特就是告诉浏览器它要影响那些元素, 把样式应用到元素身上的各种方式中, 最直接使用的就是使用style全局属性

文档内嵌样式

直接对元素应用样式有它的好处, 但是对于可能大量需要各种样式的复杂文档来说就显得缺乏效率, 这样做不进需要逐个元素设好样式, 而且软件更新时还不得不逐个元素仔细搞好样式调整, 很容易出错, 我们可以换种方法, 使用style元素顶级文档内嵌样式, 通过CSS选择器指示浏览器应用样式

一个style元素中可以定义多条样式, 为此只需要不断重复定义一个选择器和一套样式声明的过程接口

外部样式表

如果有一套样式要用于多个HTML文档, 那么与其在每一个文档中重复定义相同样式, 不如另外创建一个独立的样式表文件, 这种文件按照惯例以.css为文件拓展名, 其中包含着用户的样式定义

样式表中不需要style元素, 需要什么样式, 只需要为其设计好选择器, 后面在跟上一套样式声明即可, 然后HTML文档就可以使用link标签将这些样式导入其中

文档想要链接多少样式表都行, 为每个样式表使用一个link元素即可, 如果不同的样式表使用了相同的选择器, 那么这些样式表的导入顺序就非常重要了

在其中样式表中导入样式

可以使用@import语句将样式从一个样式表导入另一个样式表

一个样式表想要导入多少别的样式表都行, 为此每个样式表使用一条@import语句即可, @import语句必须位于样式表顶端, 样式表自己的样式定义不能出现在其之前

@import语句使用并不广泛, 其中一个原因是不少人不知道有这个语法, 另一个原因是浏览器处理@import语句的效率往往不如处理多个link元素并靠样式层叠解决问题

样式表的字符编码

在CSS样式表中可以出现@Import语句之前的只有@charset语句, @charset语句是用于声明样式表使用的字符编码

如果样式表并未声明所使用的字符编码, 那么浏览器将使用载入该样式表的HTML文档声明的编码, 如果HTML文档也没有声明编码, 那么默认情况下使用UTF-8

样式表的层叠和继承

要想掌握样式表, 弄清样式层叠和继承两个概念是关键, 浏览器根据层叠和集成规则确定显示一个元素时各种各样的属性采用的值, 每个元素都有一套浏览器呈现页面时要用到的CSS属性, 对于每一个这种属性, 浏览器都需要查看一下其所有的样式来源,

浏览器样式

浏览器样式(用户代理样式)是元素尚未设置样式时浏览器应用再其身上的默认样式, 这些因浏览器而异, 不过大体一致,

虽然不是每一个HTML元素都有默认的浏览器样式, 但是多数元素都有,

用户代理样式

大多数浏览器都允许用户定义自己的样式表, 这类样式表中包含的样式称为用户样式, 这个功能用的人不多, 不过, 那些要定义自己的样式表的人往往比较看重这一点, 一个特别的原因是这可以让有生理不便的人更容易使用网页

各种浏览器都有自己的管理用户样式的方式, 以Chrome为例, 它们在个人配置目录下生成一个Custom.css的文件, 添加到这个文件中的任何样式都会被用于用户访问的所有网站, 只不要要依层叠规则形式

样式如何层叠

明白了浏览器要查看的所有样式来源之后, 现在可以看看浏览器要显示元素时求索一个CSS属性值的次序

1. 内联样式

2. 稳步样式

3. 外链

4. 用户样式

5. 浏览器样式

重要样式

把样式属性值表示为重要(important), 可以改变正常的层叠次序

在样式声明后附上!important即可将对应属性值标记为重要, 不管这种样式属性定义在什么地方, 浏览器都会给与优先考虑

根据具体程度和定义程序解决同级样式冲突

如果有两条定义于同一层次的样式都能应用与同一个元素, 而且它们都包含着浏览器要查看的CSS属性值, 这个时候就需要另加发吗助天平持平的双方一决高下, 为了判断该用那个值, 浏览器会平哥两条样式的具体程度, 然后选中较为特殊的那条, 样式的具体程度通过统计三类特征

1. 样式的选择器中id值的数目

2. 选择器中其他属性和伪类的数目

3. 选择器中元素名好伪元素的数目

在评定具体程度的时候要按三种每种选择器的权重值生成一个数字, 谁的权重值大, 浏览器就会使用谁

根据具体程度选用样式的属性值

如果同一个样式属性出现在具体程度相当的几条样式中, 那么浏览器会根据器位置的先后选择所用的值, 规则是后来者居上

继承

如果浏览器在直接相关的样式中找不到某个属性的值, 机会求助于继承机制, 使用父元素的这个样式属性值

但是并非所有的CSS属性均可被继承, 但是有条经验可供参考: 与元素外观相关的样式会被继承; 与元素在页面上布局相关的样式不会被继承, 在样式中使用inherit这个特别设立的值可以强行实施继承, 明确指示浏览器在该属性上使用父元素样式中的值

CSS中的颜色

颜色在网页中的作用非常重要, 在CSS中设置颜色有好几种方法, 最简单的办法是使用规定的颜色名称, 或者使用RGB, 也可使用十六进制

CSS中的长度

许多CSS属性要求为其设置长度值

绝对长度

一条样式中可以混合使用多种单位, 包括混合使用绝对单位和相对单位, 如果能预先知道内容的呈现方式, 那么使用绝对单位很有好处,

相对单位

相对单位的规定和实现都比绝对单位更复杂, 需要以严密, 精确的语言明确定义, 相对单位的测量需要依托其他类型的单位,

像素单位问题

CSS的像素工白不是你心里想的那样, 像素这个属于一般是指显示设备上可寻址的最小单元--图像的基本元素, CSS确实另辟蹊径, 其像素的定义是: 惨高像素是距读者一臂之遥的像素密度为96dpi的设备上一个像素的视角(visual angle)

这正是CSS中那种令人头疼的模糊定义

提示: CSS像素原本是一个相对单位, 但是在实际使用中变成了绝对单位

百分比单位

可以把一个度量单位表示为其他属性值的百分比, 这正式%单位的用途

使用百分比单位会遇到两个麻烦, 并非所有属性都能使用这个单位, 而是对于能用百分比的单位的属性, 那个百分比挂钩的其他属性各部相同, 比如, font-szie属性, 挂钩的是元素继承到的font-size值, 对于width属性, 挂钩的是元素包含块的宽度

vw和vh

vw(view port)与视口宽度挂钩 1vw=1%浏览器窗口

vh视口高度

vm

如果vw比vh小则采用vw, 反之亦然

算式做值

允许将CSS属性值设置为算式是CSS3定义的一个引人关注的特性, 这种灵活手段在控制能力和精确程度方面都给样式设计工作提供了帮助

算式包含在关键字calc之后的括号中, 在其中可以混合使用各种单位进行基本的算术运算

其他的CSS单位

CSS中的单位不止有长度这一项, 而是种类繁多, 但是其中只有一小部分得到了管饭应用

CSS角度

角度的表示方式是一个数字后面跟上一个单位(360deg)

CSS时间

可以用CSS时间单位度量时间间隔, 时间的表示方式是一个数字后面跟一个时间单位(100ms)

CSS特性的支持情况

Can I use... Support tables for HTML5, CSS3, etc

总结

此处知识书写一些CSS的简单知识, 总体是为了更加方便的学习一下的HTML内容