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模式的网站的优势:能表现和内容相分离、使得代码简洁,可提高页面浏览速度、并易于维护和改版和提高搜索引擎对网页的索引效率。