今日总结

今天对于页面优化做了一些总结

1、字体

• 各种字体之间必须使用英文状态下的逗号隔开。
• 现在网页中普遍使用14px+
• 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
• 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-fanily:'Times new Roman';
• 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示
• 尽量不用中文,有兼容问题,最好用对应的英文或者unicode编码。

2、选择器

• id
• class
• 行内
• 标签
• 通配符选择器 *
• 链接伪类选择器
• :link 未访问的链接
• :visited 已访问的链接我们已经点击过一次的状态
• :hover 鼠标移动到链接上
• :active 选定的链接 当我们点击别松开鼠标显示的状态

 

• 结构伪类选择器(css3新特性)
• :first-child 选取属于父元素的首个子元素的指定选择器。
• :last-child 选择属于其父元素的最后一个子元素的指定选择器
• :nth-child(n) 匹配属于其父元素的第N个子元素，不论元素的类型 even 偶数 odd 奇数,如果用公式n从0开始 (从上往下数)
• :nth-last-child(n) 选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数，n 可以是数字、关键词或公式(从下往上数)

3、颜色半透明

/*参数: r、g、b、a*/
 color:rgba(0,0,0,0.3)

4、背景

• 背景各个属性的应用

img {

   //引入
   background-image:url(images/icon.png);
   //不平铺
   background-repeat:no-repeat;
   /*方位 x、y   x是left/right，自动转换，top/bottom  不论顺序,自动转换，可省略一个，那么另一个就是center */
   
   //background-position:left center
   
   /*还可以是精确位置 如果写了精确位置,那么第一个一定是x，第二个一定是y*/
   
   //background-position:20px 20px
   
  /*还可以是混合，如果写了混合位置,那么第一个一定是x，第二个一定是 y*/
   background-position:20px center
 
  /*参数 scroll(滚动，默认)和fixed(固定)*/
   background-attachment:fixed //背景图像固定
  
}