• CSS3.1


    如果说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

     

  • 相关阅读:
    30分钟速懂Java8新特性!
    学习数据结构和算法心得
    看似简单但容易忽视的编程常识
    你应该关注的几个Eclipse超酷插件
    无谓的通宵加班之后的思索
    比特币这么火热,看看这篇比特币初学者指南
    2017年最受欢迎的十大开源黑客工具
    15分钟破解网站验证码
    我的新博客:www.wangyufeng.org
    20 岁时候的你在想些什么?
  • 原文地址:https://www.cnblogs.com/CNZLSofXHB/p/5186858.html
Copyright © 2020-2023  润新知