css的属性和盒子模型:
一、css属性:
具体如下:
背 景 属 性
|
background |
色彩background-color |
background-color: 颜色; |
|
||||||||||||||||
边框 border |
实线solid |
border:width style color; eg: border:1px solid red; |
|
|||||||||||||||||
虚线 dotted |
|
|||||||||||||||||||
颜色color |
|
|||||||||||||||||||
图片 background-image |
background-image: url(xxx.gif/jpg/png); |
|
||||||||||||||||||
|
默认为水平垂直都平铺 |
|
|
|||||||||||||||||
不平铺no-repeat |
background –repeat:no-repeat; |
|
||||||||||||||||||
水平平铺repeat-x |
background-repeat:repeat-x; |
|
||||||||||||||||||
垂直平铺repeat-y, |
background-repeat: repeat-y,; |
|
||||||||||||||||||
(图片)滚动(背景图片默认滚动)background-attachment:(必须修改高度height属性) |
fixed;(固定) |
background-attachment: fixed; |
|
|||||||||||||||||
Scroll(滑动) |
background-attachment: Scroll; |
|
||||||||||||||||||
位置background-position (默认) |
Left (水平) |
left |
background-position:left ;
|
|
||||||||||||||||
Center |
background-position:center( center bottom); |
|
||||||||||||||||||
Right |
background-position:right; |
|
||||||||||||||||||
Top (中心垂直);
|
top |
background-position: center top; |
|
|||||||||||||||||
center |
background-position:center(left center); |
|
||||||||||||||||||
bottom |
background-position: center top; |
|
||||||||||||||||||
background:颜色 url(xxx.gif/jpg/png(图片类型)) repeat fixed left top;
eg: background: url("google.jpg") no-repeat scroll bottom;
|
|
|||||||||||||||||||
字 体 属 性 |
font |
大小(单位:px pd) font-size |
x-large;(特大) |
|
|
|||||||||||||||
xx-small;(极小) |
|
|
||||||||||||||||||
样式: font-style: |
oblique;(偏斜体) |
font-style: oblique; |
|
|||||||||||||||||
italic;(斜体) |
font-style: italic; |
|
||||||||||||||||||
normal;(正常) |
font-style: normal; |
|
||||||||||||||||||
粗细 font-weight |
bold;(粗体) |
font-weight:bold; |
|
|||||||||||||||||
lighter;(细体) |
font-weight:lighter; |
|
||||||||||||||||||
ormal;(正常) |
font-weight:ormal; |
|
||||||||||||||||||
英文字 母 大小写 |
变体 font-variant |
small-caps(小型大写字母) |
font-variant: small-caps;
|
|||||||||||||||||
normal(正常) |
font-variant: normal |
|||||||||||||||||||
大小写 text-transform: |
首字母大小写 capitalize |
text-transform: capitalize; |
||||||||||||||||||
大写: uppercase |
text-transform: uppercase |
|||||||||||||||||||
小写: lowercase |
text-transform: lowercase |
|||||||||||||||||||
|
行高: line-height: |
normal;(正常)
|
line-height: normal; line-height: 10px; |
|
||||||||||||||||
修饰
|
textdecoration: |
text-decoration:下划线 |
text-decoration: underline; |
|
||||||||||||||||
overline;上划线 |
text-decoration:overline; |
|
||||||||||||||||||
line-through;删除线 |
text-decoration:line-through; |
|
||||||||||||||||||
闪烁blink(无法实现) |
|
|
||||||||||||||||||
区块属性
|
|
字间距: letter-spacing |
normal; 数值 |
letter-spacing:normal; |
|
|||||||||||||||
|
对齐: text-align: |
justify;(两端对齐) |
text-align: justify; |
|
||||||||||||||||
left;(左对齐) |
text-align: left; |
|
||||||||||||||||||
right;(右对齐) |
text-align: right; |
|
||||||||||||||||||
center;(居中) |
text-align: center; |
|
||||||||||||||||||
|
indent: 数值 |
text-indent: 数值px |
|
|||||||||||||||||
text-indent: 2em;(空格两个字符)
|
|
|||||||||||||||||||
|
|
垂直对齐: |
vertical-align: baseline;(基线) vertical-align:sub;(下标) vertical-align: super;(上标)
|
|
||||||||||||||||
|
|
词间距 |
word-spacing: normal; 数值 |
|
||||||||||||||||
|
|
空格 |
white-space: pre;(保留) |
|
||||||||||||||||
white-space: nowrap;(不换行)
|
|
|||||||||||||||||||
|
|
显示 |
display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) |
|
||||||||||||||||
table |
inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) |
|
||||||||||||||||||
方 框 属 性
|
width:;长 |
|
||||||||||||||||||
height:;高 |
|
|||||||||||||||||||
float:;悬浮 |
|
|||||||||||||||||||
clear:both; |
|
|||||||||||||||||||
margin:; |
|
|||||||||||||||||||
padding:; 顺序:上右下左
|
|
|||||||||||||||||||
边 框 属 性
|
border-style: dotted;(点线) dashed;(虚线) solid(实线); double;(双线) groove;(槽线) ridge;(脊 状) inset;(凹陷) outset; border-width:; 边框宽度 |
|||||||||||||||||||
列 表 属 性 |
类型:
|
list-style-type:disc;(圆点) |
|
|||||||||||||||||
circle;(圆圈) |
|
|||||||||||||||||||
square;(方块) |
|
|||||||||||||||||||
decimal;(数字) |
|
|||||||||||||||||||
lower-roman;(小罗码数字) |
|
|||||||||||||||||||
upper-roman; (大罗马数字) |
|
|||||||||||||||||||
ower-alpha; (小写英文字母) |
|
|||||||||||||||||||
upper-alpha; (大写英文字母) |
|
|||||||||||||||||||
位置: |
list-style-position: outside;(外) list-style-position: inside(内); |
|
||||||||||||||||||
图像:
|
list-style-image: url(xxx.gif/jpg/png); |
|
CSS文字属性 |
color : |
加下划线text-decoration:underline; |
|
文字居中对齐text-align:center; |
|
把元素的顶端与行中最高元素的顶端对齐vertical-align:top; |
|
把元素的顶端与行中最低的元素的顶端对齐。vertical-align:bottom; |
|
CSS链接属性 |
a:link /超链接文字格式/ |
a:visited /浏览过的链接文字格式/ |
|
a:hover /鼠标转到链接/ |
|
a:active /按下链接的格式/
|
|
鼠标光标样式 |
cursor:hand;(pointer)小手 |
cursor:move;拖拽 |
|
cursor:crosshair;十字 |
|
cursor:wait;(转动小蓝圈) |
|
cursor:text; |
|
cursor:help;(问好) |
|
CSS框线一览表 |
border-top border-top-color : #369 /设置上框线top颜色/ border-top-width :1px /设置上框线top宽度/ border-top-style : solid/设置上框线top样式/
|
二、 盒子模型:是封装周围的HTML元素的一种模型,由内容+填充+边框+外边距组成(即Content+padding+border+margin)。
1、由内而外依次是元素:
内容(content)、 宽:(width)、 高:(height)、 内边距(padding-top、padding-right、padding-bottom、padding-left)、 边框(border-top、border-right、border-bottom、border-left) 和外边距(marging-top、margin-right、margin-bottom、margin-left)。 |
外边距外边距可以是负值。
宽和高不允许为负值。
2、Padding:内容和边框的距离:
四个值分别顺时针 :(上、右、下、左)
三个值(上、左右、下)
两个值(上下、左右)
一个值(上下左右都相等)
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
3、Margin:盒子和盒子之间的距离
【上下盒子最终距离取最大的margin-top或margin-bottom】
【左右盒子最终距离取margin-top和margin-bottom的和】------》需要float浮点
若 margin:0auto;则模型是上下为0 左右居中
位置属性 : poisition:absolute(绝对),relative(相对),static(静态),或者fixed(固定)
三、DIV+CSS模式的网站的优势:能表现和内容相分离、使得代码简洁,可提高页面浏览速度、并易于维护和改版和提高搜索引擎对网页的索引效率。