• 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

     

  • 相关阅读:
    从Oracle提供两种cube产品说开
    Sql Server DWBI的几个学习资料
    Unload Oracle data into text file
    初学Java的几个tips
    我常用的Oracle知识点汇总
    benefits by using svn
    如何在windows上使用putty来显示远端linux的桌面
    building commercial website using Microsoft tech stack
    Understand Thread and Lock
    Update google calendar by sunbird
  • 原文地址:https://www.cnblogs.com/CNZLSofXHB/p/5186858.html
Copyright © 2020-2023  润新知