HTML+CSS学习笔记(五)

学习HTML和CSS用的是一本叫《HTML5与CSS3基础教程》,人民邮电出版社的,这已经是第八版。整本书已经学完,感觉这本书思路清晰,代码也很翔实,入门书算是选对了,这本书里有很多超前的观点,尽管这无疑增加了复杂性,但从长远的角度来讲,还是值得的!当然,学到后面,前面遇到的很多概念和标签都记不大请,所以有必要从头开始,回头看,整理思路,写下来是个很好的办法。

继续前面的。从这里开始,逐步接触到CSS的魅力与强大。这也是"渐进增强"观念的深化。

前面已经讲了,HTML是"超文本标记语言",根据语义,添加合适的标签,而CSS,也叫"层叠样式表",是用来控制文本的显示效果。本质上讲,HTML的内容,显示出的应该与文本格式无异,正是由于一些标签默认有一些CSS格式,像<strong>,<em>之类的,当然,我们也可以通过修改CSS,自由的控制标签的显示效果。

  1. 样式表中的每条规则都由"选择器"和"声明块"构成。声明块由"{}"包裹,每个声明由"键-值"构成,键值中间以":"隔离,声明与声明之间用";"隔离。如:

    h1 {color:red;

    background-color:yellow;}

    注意:可以在样式表中添加空格和制表符,提高可读性,不影响最终效果。最后的分号不要省略!

  2. 添加注释,与C语言一样,用/* */包裹即可。注释是很好的组织工具,便于后期的维护,通常将相关规则放在一起,形成分组,每组的前面放置描述性的注释,如:

    /*GLOBAL NAVIGATION

    ----------------------------------------*/

    …………rules…….

  3. 理解继承:当你为某些标签添加CSS属性后,不仅该元素,包括其后代元素,都会发生改变,这无疑很大程度上减少了编写CSS的难度,不必为每一个元素添加CSS属性,"继承"的思想尤为重要。当然,也并不是所有的属性都会继承,但都可以通过inherit值强制转换

  4. 当规则发生冲突时:这时就体现"层叠"的意义了。通常我们使用的是外联样式表,如果对于同一个属性,有多条规则,浏览器的显示,首先,以你写的为准,默认样式就被屏蔽,除此之外,通过考虑特殊性、顺序重要性来判断具体应用哪条规则。

    特殊性是指指定选择器的特殊程度,冲突时应用特殊性强的,特殊性由高到低:#someID>.someClass.someOtherClass>.someClass>p。建议:多使用类选择器,减少ID选择器,原因是ID选择器灵活性比较低。

    顺序:这个比较简单,晚出现的优先级高,会把前面的规则覆盖。

    重要性:优先级的巅峰——!important,会覆盖其他任何规则,写法例如:

p {color:red !important;}

不推荐使用!

  1. 属性的值:每个CSS属性对于接受的值有不同的规定。

    Inherit:可以使该元素某属性的值与父元素该元素的值相同,显式的表现出来。

    预定义的值:大多数属性都有一些可供使用的预定值,如float属性可以为left、right或者none,一定不能加引号。

    长度和百分数:长度一定要有单位(px或em,1em表示与该元素字号相等,响应式Web设计经常用到,还有rem,相对于html元素字体大小。Pt这个单位基本只出现在为打印准备的样式表中),百分数(如65%)的使用很像em,通常是相对于父元素的。上述单位中,最常使用的是em,百分数和px,rem使用的越来越多。

    纯数字:很少使用,最常见的是line-height,z-index和opacity,一定不能加单位

    URL:有些CSS属性允许指定一个文件(大多是图像)的URL,如background-image:url(file.ext),其中file.ext是目标资源的路径和文件名,注意:相等URL是相对于样式表的位置而非HTML文件的位置,切记!切记!文件名可以不加引号,不要留空格,尤其是url与前括号!

    CSS颜色:表现方式比较多,可以用预定义的关键字或以十六进制,RGB、HSL、RGBA、HSLA,最后两种可以指定alpha,即透明度。

     

    RGB是通过指定红绿蓝的量来构建自己的颜色,可以使用百分数或者0~255之间的值。如:color:RGB(89, 0, 127);

    十六进制数是在RGB的基础上,将这些数字转化为十六进制,再在前面加一个"#",如:color:#59007f,分别对应红绿蓝,如果数字重复,如#ff3344可缩写为#f34

    RGBA在RGB的基础上增加了alpha属性用来调节透明度,本身是个介于0到1之间的小数,越接近0就越透明

    HSL是CSS3才引入的,对应的是色相、饱和度和亮度,色相的取值在0~360,饱和度和亮度的取值均为百分数,在0%~100%

     

     

    总结:这些只是CSS入门最基础的一些东西,暂时还没有涉及到具体的使用。只有理解了规则,才能更好的使用规则!照目前学习的过程,CSS比HTML更难控制,自由度更高,效果更好。当然,这些都是建立在具有良好语义的HTML的基础上,始终牢记:渐进增强。

却道,此心安处是吾乡
原文地址:https://www.cnblogs.com/lucifer25/p/6011468.html