CSS背景以及文本
css设置背景:
<style type="text/css"> /*background-image: 直接设置x,y重复而且平铺整个body*/ /*下面两句的功能图片在昨边居中*/ /*background-position:left;*/ /*background-attachment:fixed;*/ body{ background-color: gray; background-image: url(123.png); background-repeat:no-repeat; background-attachment:fixed; /*background-position:10% 0%; 第一个参数50%水平居中 第二个参数50%垂直居中*/ background-position:210px 110px; } /*p.flower p.中间不能有空格*/ p.flower { background-image: url(bubbleMine.jpg); } </style>
css设置文本:
/*padding内边距 text-indent 4em:首行缩进,可以为负数 ,也可以是百分数,缩进父元素的%数*/ p {background-color: yellow; padding: 20px; text-indent: 4em;}
/*p.flower p.中间不能有空格*/ p.flower { background-image: url(bubbleMine.jpg); text-align: justify; }
文本间隔:
h4 {letter-spacing: 20px}
默认值 none 对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后,capitalize 只对每个单词的首字母大写。
h1 {text-transform: uppercase}
nderline 会对元素加下划线,就像 HTML 中的 U 元素一样。overline 的作用恰好相反,会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁,类似于 Netscape 支持的颇招非议的 blink 标记。
a {text-decoration: none;}
还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线,又有上划线,则规则如下:如果一个元素有两个值,不会叠加,优先的会期待之前的
a:link a:visited {text-decoration: underline overline;}
white-space:
p {white-space: normal;}
direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。
font-family:可以输入多个,从第一个开始,优先级,都好隔开
h1 {font-family: Georgia, serif;}
font-sytle:font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。italic倾斜, 一般italic和oblique在浏览器中没有区别
p.oblique {font-style:oblique;}
全部字母转大写,而且第一个单词的第一个字符大一些
p {font-variant:small-caps;}
font-weight:关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。
p.thick {font-weight:bold;}
h1 {font-size:60px;}
列表样式
/*none disc circle decimal decimal-leading-zero square upper-roman lower-alpha*/ /*ul {list-style-type : square}*/
系统的图片不能满足我们的需要
ul li {list-style-image : url(bubbleMine.jpg)}
/*该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处,不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。*/
/*li {list-style : url(example.gif) square inside}*/ /*list-style-position*/ ul { list-style-position:inside; }
table
border-collapse 属性设置是否将表格边框折叠为单一边框:
table { border-collapse:collapse; }
table { width:100%; }
表格标题
<caption>This is a caption</caption>
表格水平间距,垂直间距
border-spacing: 10px 50px
隐藏空的cell数据
empty-cells: hide;
边框:
outline-color outline-style outline-width
p { border:red solid thin; outline:#00ff00 dotted thick; }
dotted dashed solid double groove ridge inset outset IE8
p { border:red solid thin; outline-style:dotted; outline-color:#00ff00; }