css-白红宇

css

阅读量：6279 次

发布时间：2019-06-22

本文共 4127 字，大约阅读时间需要 13 分钟。

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;}　　　 This is a important heading

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

解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 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}

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官网样式初始化

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{
margin:0;padding:0}

body{
font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}

a{
color:#2d374b;text-decoration:none}

a:hover{
color:#cd0200;text-decoration:underline}

em{
font-style:normal}

li{
list-style:none}

img{
border:0;vertical-align:middle}

table{
border-collapse:collapse;border-spacing:0}

p{word-wrap:break-word}

新浪官网样式初始化

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{
margin:0;padding:0;border:0;}

body{
background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}

ul,ol{
list-style-type:none;}

select,input,img,select{
vertical-align:middle;}

a{
text-decoration:none;}

a:link{
color:#009;}

a:visited{
color:#800080;}

a:hover,a:active,a:focus{
color:#c00;text-decoration:underline;}

淘宝官网样式初始化

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:0; }

网易官网样式初始化

html {overflow-y:scroll;}

body {
margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{
padding:0; margin:0;}

table,td,tr,th{
font-size:12px;}

li{
list-style-type:none;}

img{
vertical-align:top;border:0;}

ol,ul {
list-style:none;}

h1,h2,h3,h4,h5,h6{
font-size:12px; font-weight:normal;}

address,cite,code,em,th {
font-weight:normal; font-style:normal;}