css

标签：

1.不常见字体提前加载

#text{
font-family: "微软雅黑", "黑体" sans-serif; /*表示选无衬线字体*/
}

2.设置图片背景

背景图和背景色优先显示背景图

#text{

background-color:blue;   /*控制图片的位置*/

background-image:url(big.jpg); /*图片*/

background-repeat:no-repeat;/*也可以background-repeat:repeat-x;background-repeat:repeat-y;*/

background-fixed;

background-position：center top； /*控制图片的位置*/

/*背景用同一张大背景  移动大背景*/

background-position:0px -120px;/*左上角为0 0 原点*/

}

3.选择器

id 选择器                    #div     唯一ID

类选择器 class      .div      同名的人

标签选择器 div  ，p 

派生选择器div p     　　　 　只对div下的p标签起作用

属性选择器    a[href][title]{color:red;}　/*将带有href 和title的HTML 超链接的文本设置为红色*/　　

后代选择器

h1 em {color:red;}　　　

<h1>This is a <em>important</em> heading</h1>

/*假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。

解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 div 指定值为 sidebar 的 class 属性，并把主区的 class 属性值设置为 maincontent。然后编写以下样式：*/

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

 选择器的优先级

text1{color:red}  /*控制越精细优先级越高   火狐浏览器可查看*/ 

.text2{color:red}

#text{color:red}

div #text1{color:red}

<p id="text1" class="text2">好好学习</p>

css的引入方式

外部链接一个css文件，<link href="css/my.css" rel="stylesheet" type="text/css"/>

头部直接引用：  <style type="text/css">div{maign:0;padding:0;border:1px solid red；}</style>

外部多个css文件时：<style type="text/css">@import url(my.css);</style>

直接在标签里面写入对个标签的css控制： <div style="border:1px solid red;"">测试</div>

css初始化

在不同浏览器中，显示的效果稍有不同，各浏览器对各元素magin,border,font-size略有不同

通过css强制让所有元素的属性值都一样，整个过程及时初始化。

腾讯QQ官网 样式初始化

1. body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
2. body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
3. a{color:#2d374b;text-decoration:none} 
4. a:hover{color:#cd0200;text-decoration:underline} 
5. em{font-style:normal} 
6. li{list-style:none} 
7. img{border:0;vertical-align:middle} 
8. table{border-collapse:collapse;border-spacing:0} 
9. p{word-wrap:break-word} 

yahoo

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,   
form,fieldset,input,textarea,p,blockquote,th,td {   
    padding: 0;   
    margin: 0;   
}   
table {   
    border-collapse: collapse;   
    border-spacing: 0;   
}   
fieldset,img {   
    border: 0;   
}   
address,caption,cite,code,dfn,em,strong,th,var {   
    font-weight: normal;   
    font-style: normal;   
}   
ol,ul {   
    list-style: none;   
}   
caption,th {   
    text-align: left;   
}   
h1,h2,h3,h4,h5,h6 {   
    font-weight: normal;   
    font-size: 100%;   
}   
q:before,q:after {   
    content:‘‘;   
}   
abbr,acronym { border: 0;   
}  

css

标签：

原文地址：http://www.cnblogs.com/chendi618/p/5631127.html