CSS属性
2016-09-25 本文已影响9人
夷陵小祖
link标签的rel属性
外部样式表
rel属性值：
1.stylesheet：定义样式表
2.alternate stylesheet ：候选样式表（少用）
CSS的单位
a.绝对单位 2.54cm = 25.4mm = 72pt = 6pc (派卡)
b.相对单位 px , %
字体的属性
图片来自W3C
p{
font-size:30px;
font-family:华文彩云，幼圆，宋体；
//当不支持华文彩云时就用幼圆，类推，都不支持就默认。中间用逗号隔开
font-weight：bold/bolder; //这两个效果区别不大
font-style:italic; //斜体
font-variant:small-caps; //小写变大写
font: 30px 华文彩云 bold italic //也可以写一起
}
文本属性
图片来自W3C
p{
letter-spacing:0.5cm;
word-spacing:1cm;
text-align:center； //容器中
text-decoration:underline / line-through / overline
//上中下划线
text-transform:uppercase / lowercase / capitalize
// 大写/小写/每个单词首字母大/小写
}
背景属性
图片来自W3C
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盒子模型
上图可以看到 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">
