如果说html的作用仅仅是对文本内容的定义。那么相对的,CSS就是对这些已经被定义的内容的显示方式进行你希望的表现
恩,CSS的样式的基本的规则:
这个规则由选择器和声明块组成
选择器决定是哪个元素会被声名块中的声明影响
而声名块则由一个及以上的 属性-值对 构成
这样说可能不够直接
举个栗子:
我希望h1标题被改成蓝色
那么此时CSS样式中,选择器就是h1元素了
那么声名块呢?它被包含在选择器之后的一对
{}中,在这个栗子中它应该是这样的:
{color:blue;}
这里的color就是属性,blue就是给color属性
赋予的值,当然也可以是别的值,比如red,yellow……
完整的规则表现为
h1{color:blue;}
注意封号,如果是位于最后的一个封号,其实是
可以省略的,但是最好不要,养成好的习惯
一般而言,一个CSS文件中应该由多条相互独立的
规则组成,如
h1{……}
h2{……}
p{……}
article{……}……
注释:
在CSS中的注释跟html中的不同
html中是<!--这里是需要的注释-->
在CSS中,注释类似于C中的
是酱紫的:
/*……*/
中间的省略号表示注释的内容
CSS中注释的使用非常得灵活
注释可以在规则外,也可以在规则内
当你不知道哪个元素过规则出现错误时
还可以使用注释将它注释掉,以此来
进行改进
但是注释是不能进行嵌套的
继承(这个好烦啊):
在这里要提及杂记里说到的父子元素概念(因为有关)
继承在CSS里很重要,所以我觉得理所当然的很麻烦
在这里还要提到一个新的概念,叫做文档树,它没有什么
卵用,只是用来直白地显示元素的父子关系
但是,我为什么又要说但是
当你是使用外部链接样式表为不是内部或者行内样式的时候
样式就不仅仅是作用于目标元素本身而已了
它是会传递滴,就像财产一样,会被继承
而这种继承又不是全部的,即有的会被继承,有的不会
所以我觉得它真XX麻烦啊
但是我觉得麻烦事一回事,继承实实在在给样式表起到的
简化作用也是十分值得学习的(inheri什么的后头说)
具体什么能被继承什么不可以我还是不大明白,就写这么多吧
《HTML/CSS3》P128——哪些属性会被继承(作者真贴心^.^)
样式对文本表现的改变我已经有所了解了
那么这些样式规则的使用在实际营运中发生
冲突时又要遵循什么规则呢?(冲突是必然的想想就知道)
有冲突就有有限,不能一存在冲突每个样式规则说了都算
那样就GG了
所以我在杂记中写到的id和类的作用在这里就派上用场了
CSS将规则的冲突成为层叠,层叠的原则如下:
考虑样式的特殊性,排序和重要性
特殊性:这个概念是针对选择器的
最原始的选择器就是元素本身,
高级一点的就是拥有一个类名的
在高级的就是拥有不止一个类名的选择器
具体的特殊性lv就是类名越多越高
那么特殊性最高的就是类名数量MAX的
那个?NO,是id,是拥有唯一标识id的
选择器,它才是最NB的
但是,不是说为了希望某个元素的样式不会
发生任何的冲突随随便便就给它一个id,
按书上的说法,那是脑残的做法
排序:这个概念是在特殊性解决不了
问题时拿来用的,原则很简单,谁晚出现
就听谁的,恩,老幺总是站便宜的
重要性:如果说前两个原则还是讲道理的
那这个就有点霸道的意思了,它是一条
特殊的规则,相当于给目标样式提供一道
安全级别MAX的保护,让它不受其他样式的
冲突干扰,做法就是在样式规则中加上
!important
例子:p{color:blue !important;}
有的时候,会遇到一些无法进行修改的
样式(按书中的说法,比如第三方提供的)
那么,看它不爽就暴力点用这条原则干掉吧
属性值:(其实还是具体属性具体分析)
属性的多样性决定了他们对应的属性值也是多样的
inherit:之前在继承中说到,有的父元素的样式是
无法被子元素继承的(当样式表为外部链接的时候)
那么如果希望子元素能继承父元素的某个样式,
就可以用到inher,即在子元素样式中希望继承
的那个样式后写上inherit
预定义值:即CSS中已经为那些属性规定好的
可选值,只能选那些,其他的NO WAY
(在html中就有很多)
长度和百分数:注意,所有的长度都应该是
数字和单位的组合,0除外,如果是小数如
0.78,那么可以简写为.78;百分数,没什么
好说的
纯数字:只有很少的属性接受纯数字作为值
URL:略
CSS颜色(这个内容太多了,单独说)
很明显一个网页要做好,多彩的颜色是必不可少的
所以在CSS中我毫不意外地看到颜色的显示方式有
十六进制(#XXXXXX的格式),关键字(纯文本),
RGB,RGBA,HSL,HSLA(仔细看到话还是很有意思的)
关键字:略
在说除关键字以外的方式时,要注意CSS中以三种
基本色红绿蓝的不同组合,比重分配来描述颜色
(我这么说应该比较专业吧)
不管是RGB/RGBA还是HSL/HSLA和十六进制法
都是按照红绿蓝的顺序
RGB:每种颜色的数字选择范围是0到255
例子:color:rgb(XX,XX,XX);
rgb和前括号之间不能有空格,XX既可以是
数字(0——255),也可以用百分比来表示
十六进制:开头必须是#,然后就是将RGB中
每种颜色的数字用十六进制来表示(我终于找到
C和网页制作的有一个联系点了)
如果红绿蓝三个数字是三对重复的,那么可以只写
一对中的一个,就是砍掉一半,这是允许的
RGBA:在rgb的基础上多加了一个A,这个A表示
alpha(透明度),这使得RGBA更多地使用于
设置背景(想想也是)
透明度允许元素下面的任何,任何东西透过来与
元素混合在一起(该死的IE9以前的版本不允许)
透明度的取值范围是0~1,越接近0则越透明
所以越接近1就越不透明(- 。-)
和RGB类似,百分比也是允许的
只是要注意A为25%表示透明度为75%!!!
例子:
backgroun-color:rgba(XX,XX,XX,XX%)
HSL:HSL中的三个字母分别表示三个概念
H-色相,S-饱和度,L-亮度
色相的取值范围是0~360,其中0和360重合(红色)
用一个圆来表示,颜色从顺时针的方向开始变化
最上端为0(360), 最右为90,最下边为180
最左边为270
饱和度和亮度的取值都是0~100%
例子:
color:hsl(XX,XX%,XX%);
HSLA:比较RGBA,也是在HSL的基础上
加了一个透明度,也是用百分比表示,用法
大致相同,所以略
“选择一个0到360之间的色相,并将饱和度设为100
亮度设为50,就会得到这种颜色最纯的形式。降低饱和度,
颜色就会想灰色变化。增加亮度,颜色就会相向白色变化;
减少亮度,颜色就会想黑色变化”
————Brandon Mathis