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

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

WBOY
WBOYOriginal
2016-06-24 12:04:381351Durchsuche


目录:


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 搜索条结束*********/  
  7.  


② 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 设置字体的粗细。



Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn