• 技术文章 >web前端 >html教程

    项目复习总结3:CSS引入方式,注释,命名规范,背景,行高,文本属性_html/css_WEB-ITnose

    2016-06-24 12:04:38原创728


    目录:


    1、CSS注释的书写 怎么写?好处?

    2、CSS引入方式 各种的优缺点

    3、选择器的写法与选择器的优先级

    4、CSS命名规范

    5、背景,行高

    6、文本(text与font开头)等所有属性


    ① CSS注释书写规范:


    1、单行注释:

    直接写在属性值的后面,如:


    1. ① .search{
    2. border:1pxsolid#fff;/*定义搜索输入框边框*/
    3. background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/
    4. }
    5. ② .wrap { /*height: 100px;*/ }

    2、多行注释:

    分别在开始的地方及结束的地方注释,如:

    1. ①/********Start 搜索条开始********/
    2. .search{
    3. border:1pxsolid#fff;
    4. background:url(../images/icon.gif)no-repeat#333;
    5. }
    6. /********End 搜索条结束*********/


    ② CSS注释书写好处:


    1. 利用注释可以快速定位到复杂的代码页面中,可以高效的编写样式,使得代码层次清楚,修改更加直观。

    2. css注解(css 注释)可以帮助我们对自己写的CSS文件进行说明,如说明某段CSS代码是什么地方、功能、样式等说明,以便我们以后维护具有一看即懂的方便性,同时在团队开发网页是时候合理适当的注解有利于团队看懂css样式是对应html哪里的,以便顺利快速开发网页。


    扩展:JavaScript的两种注释方法

    行注释

    // 这是行注释,注意'//'后面有空格

    /* 这是一段注释 */

    块注释

    /*

    * 注释以一行(*后面记得有空格)

    * 注释以二行(*后面记得有空格)

    * 注释以三行(*后面记得有空格)

    */


    扩展:HTML结构的注释方法

    使用 进行注释

    如:



    CSS引入方式 各种的优缺点

    外部引入:使用最广泛,一个css文件可控制多个页面,从整站来讲,减少代码数量,提高加载速度,便于维护

    头部引入:使用也比较多,加载速度快,一般用于访问量较大的网站或首页,但是整站代码较多,不利于维护

    标签内写:用得比较少,权重最高,代码多,加载慢,不利于维护

    ④ @import : 跟link类似,如果使用@import的话,要将@import放到样式代码的最前面,否则它将会不起作用


    link与@inport区别:

    ① @import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)。


    ② @import 是css2里面的,所以古老的ie5不支持。


    ③ 当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的


    ④ link除了能加载css外还能定义RSS,定义rel连接属性,@import只能加载css


    扩展:JS三种引入方式



    选择器的写法与选择器的优先级


    选择器种类:

    ① 标签名选择器 ② ID名选择器 ③ 类选择器 ④ 后代选择器

    ⑤ 群组选择器 ⑥ 伪类选择器 ⑦ 属性选择器 ⑧ 通配符 ⑨ 子代选择器

    选择器优先级:

    ① CSS不同引入方式的优先级:标签内嵌样式 > 头部书写样式 > 外部引用样式 > 浏览器默认样式。


    ② CSS选择器的优先级:id > class > tagname.


    ③ 多个选择器混用时的优先级:例子.a .b c{}和.a c{},它们指向的目标都是c,但是前者的优先级高于后者。


    注:当指向同一目标选择器的优先级相同时,后面的优先级大于前面的优先级;当同一个标签中定义有多个class名时,各个类选择器之间的优先级与html中的class名排列无关,而是与css文件中各个类选择器的排列有关。


    CSS命名规范

    1、规则命名中,一律采用小写加中划线的方式,不允许使用大写字母或_
    2、命名避免使用中文拼音,应该采用更简明有意义的英文但是进行组合
    3、命名注意缩写,但是不能盲目缩写
    4、不允许通过1 、2、3等序号进行命名
    5、避免class与id重名
    6、id用于标识模块或页面的某一父容器区域,名称必须唯一,不要随意新建id
    7、class命名必须言简意赅
    8、除了重置浏览器默认样式外,禁止直接为html tag添加css样式设置,例如:div { width:200px;height:100px;}
    9、每一条规则应该确保选择器唯一,禁止直接为全局 .nav/.header/.body等类设置属性


    详见:独行冰海-CSS编码规范


    扩展:JS命名规范

    1、 区分大小写

    2 、 首写符必须是字母,下划线( _ )或者美元符($)

    3、 除首字母外的字符,可以由字母,数字,下划线,美元符号组成

    4、 不允许包含空格



    背景,行高属性

    background背景 属性:


    * background-color
    * background-position
    * background-size
    * background-repeat
    * background-origin
    * background-clip
    * background-attachment
    * background-image


    CSS3新增的属性:

    属性 浏览器支持
    background-size
    background-origin

    background-clip

    background的语法:[详见博客背景图合并知识整理]

    background-color:red | #RGB;

    background-position:X轴坐标 Y轴坐标 | left| right | center | top..

    background-size: 100px | 30% | cover | contain; 在线测试

    background-repeat: repeat | no-repeat | repeat-x | repeat-Y

    background-origin:border | padding | content

    background-clip:border-box | padding-box | content-box

    background-attachment:fixed | scroll

    background-image:url

    简写的形式:background:color url() positon repeat;

    备注:background-size的属性值如果只设置一个值,则第二个值会被设置为 "auto"。

    cover实现把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

    contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域



    line-height行高属性:设置行间的距离(行高)。


    语法: line-height : normal | <实数> | <长度> | <百分比> | inherit


    行高与行距:



    line-height详解



    CSS 文本属性

    属性 描述
    color 设置文本颜色
    direction 设置文本方向。
    line-height 设置行高。
    letter-spacing 设置字符间距。
    text-align 对齐元素中的文本。
    text-decoration 向文本添加修饰。
    text-indent 缩进元素中文本的首行。
    text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
    text-transform 控制元素中的字母。
    unicode-bidi 设置文本方向。
    white-space 设置元素中空白的处理方式。
    word-spacing 设置字间距。


    CSS 字体属性

    属性 描述
    font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
    font-family 设置字体系列。
    font-size 设置字体的尺寸。
    font-size-adjust 当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)
    font-stretch 对字体进行水平拉伸。(CSS2.1 已删除该属性。)
    font-style 设置字体风格。
    font-variant 以小型大写字体或者正常字体显示文本。
    font-weight 设置字体的粗细。



    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:项目期复习总结:Table, DIV+CSS,标签嵌套规则_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 求两个纯Html之间的传值示例_html/css_WEB-ITnose• 实现主页_实现内容的第一部分• ajax基本介绍• ExtJs教程14• 为什么是这样的?_html/css_WEB-ITnose
    1/1

    PHP中文网