link标签的rel属性
rel属性值:
1.stylesheet:定义样式表
2.alternate stylesheet :候选样式表(少用)
CSS的单位
a.绝对单位 2.54cm = 25.4mm = 72pt = 6pc (派卡)
b.相对单位 px , %
字体的属性
p{
font-size:30px;
font-family:华文彩云,幼圆,宋体;
//当不支持华文彩云时就用幼圆,类推,都不支持就默认。中间用逗号隔开
font-weight:bold/bolder; //这两个效果区别不大
font-style:italic; //斜体
font-variant:small-caps; //小写变大写
font: 30px 华文彩云 bold italic //也可以写一起
}
文本属性
p{
letter-spacing:0.5cm;
word-spacing:1cm;
text-align:center; //容器中
text-decoration:underline / line-through / overline
//上中下划线
text-transform:uppercase / lowercase / capitalize
// 大写/小写/每个单词首字母大/小写
}
背景属性
body{
background-image:url(照片位置)
background-repeat:no-repeat /repeat-x /repeat-x
// 不重复 / 只在横向平铺 / 只在纵向平铺
background-position:right / center / right bottom /
right center / center center /right top
background-attachment:scroll / fixed
//移动滚动条图片位置不变 / 移动滚动条是图片也
随之滚动
//背景滚动方式
background-color:#xxxxxx
}
列表属性
ol{
list-style-image:url(image/ic_launcher-web.jpg);
margin-left:100
}
(重要)盒子模型
属性包括:
内容(content)
填充(padding)
边框(border)
边界(margin)
以下来自百科解释:
内容(CONTENT)就是盒子里装的东西;
填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;
边框(BORDER)就是盒子本身了;
边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。
在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。
填充只有宽度属性,可以理解为生活中盒子每个HTML标记都可看作一个盒子;
height:内容高度
width:内容宽度
IE盒子模型
上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了padding 和 border 和。
标准化W3S模型
在顶部加 doctype 声明,即可在所有浏览器中都显示“标准 w3c 盒子模型”。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">