css基础二
1，文本
文本颜色：
<style> body {color:red;} /*为body的所有字体设置字体颜色为红色*/ h1 {color:#00ff00;} /*为h1元素设置字体颜色，这种表示方法是十六进制表示法*/ p.ex {color:rgb(0,0,255);} /*为所有class等于“ex”的p元素设置字体颜色为xxx，这是红绿蓝三原色表示法，另外css中，id用井号设置格式，class用英文句号*/ </style>
文本对齐方式：
h1 {text-align:center;} /*居中对齐*/ p.date {text-align:right;} /*左对齐*/ p.main {text-align:justify;} /*就像word中的文本自动对齐一样，justify自动两端对齐*/
文本修饰：
<head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> a {text-decoration:none;} /*为a元素设置没有文本装饰*/ </style> </head> <body> <p>链接到: <a href="http://www.runoob.com/">runoob.com</a></p> /*原本a元素链接是自带下划线的，但是由于a的不带装饰属性，所以网页上显示的链接现在已经不带下划线了*/ </body>
/*当然也可以这样*/
<style>
h1 {text-decoration:overline;} /*头顶上有下划线*/
h2 {text-decoration:line-through;} /*中间有一条线*/
h3 {text-decoration:underline;} /*下方有下划线*/
</style>
文本转换：
p.uppercase {text-transform:uppercase;} /*设置p元素中class等于uppercase的元素全变成大写*/ p.lowercase {text-transform:lowercase;} /*设置p元素class等于lowercase的元素全部变成小写 p.capitalize {text-transform:capitalize;} /*设置p元素中class等于capitalize的元素全都变成每个单词首字母大写*/
文本缩进
<style> p {text-indent:20%;} /*设置p元素的文本缩进百分之二十，当然了也可以用像素的单位px来*/ </style>
css中与文本有关的属性：
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
2，字体
css字体属性定义字体，加粗，大小，文字样式。
字形：分为通用字体系列和特定字体系列。通用字体系列常用：Serif（字体末端加装饰）Sans-serif（字体末端不加装饰）。
字体系列：font-family属性设置文本的字体系列，font-family属性应该设置几个字体名称作为一种后备机制。如果不支持第一种字体，会尝试下一种，注意如果字体名称超过一个词，包括“宋体”这种，要用引号表明。例如：
p{font-family:"Times New Roman", Times, serif;}
字体样式：font-style用于指定字体样式属性，主要是用于指定字体样式属性，比如：正常，斜体，另一种斜体，
p.normal {font-style:normal;} /*正常*/ p.italic {font-style:italic;} /*斜体*/ p.oblique {font-style:oblique;} /*另一种斜体*/
字体大小：font-size用于设置文本的大小，后面的单位可以是px，em，%，默认字体大小为16px也就是1em。
注意一个事情，h1-h6标签也可以改变文字的大小，如果设置不好，容易冲突，另外如果字体大小的单位是px，会造成有些浏览器通过缩放整个页面调整文本大小，要谨慎。
重点讲一讲em单位：为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。因为em是一个可以伸缩的单位。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。px和em单位之间的转换公式：px/16=em。em单位比较完美地实现了在浏览器中调整文本大小的要求，并且由于其可伸缩性和适应移动设备的特性，很受欢迎。用百分比设置文本大小，道理和em差不多。当然为了让我们的字体更加具有可操作性，我们可以使用百分比和em组合来设置文档文字大小：
body {font-size:100%;} /*整个body标签采用的是默认大小的浏览器字体大小*/ h1 {font-size:2.5em;} /*标题h1用的是2.5倍的标准大小。以body的字体为标准*/ h2 {font-size:1.875em;} p {font-size:0.875em;}
字体加粗：font-weight 属性来设置，常见normal，lighter，bold。
p.normal {font-weight:normal;} p.light {font-weight:lighter;} p.thick {font-weight:bold;} p.thicker {font-weight:900;}
css字体属性总结：
| Property | 描述 |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 指定字体的粗细。 |
3，链接
一般的链接可以使用css的任何属性，但是链接有几个特殊的属性，分别是
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接，是绿的*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上，是桃红 */ a:active {color:#0000FF;} /* 鼠标点击时，是蓝色 */ /*注意格式，它不和别的css设置一样，a标签以后用冒号，这几个属性的顺序也必须遵照此实例*/
设置链接的背景颜色：
a:link {background-color:#B2FF99;} /*没点击的时候背景是什么颜色*/ a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}
设置链接的文本修饰：
a:link {text-decoration:none;} /*文本装饰属性，普通链接没有下划线*/ a:visited {text-decoration:none;} /*点击过的链接也没有下划线*/ a:hover {text-decoration:underline;} /*把鼠标放到链接上的时候出现下划线*/ a:active {text-decoration:underline;} /*点击的时候也有下划线*/
4 列表样式，
html中列表（列表的编号）有两种，一个是无序列表，用圆点标识，一个是有序列表，用123，abc等标识。
<style> ul.a {list-style-type: circle;} /*也可以是none*/ ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;} /*前两者是无序的编号，标识符是空心圆圈或者是方块，后俩是有序的编号，是大写的罗马序号和小写的英文字母*/ </style> <body> <p>编号列表写法是这样的</p> <ul class="a"> /*列表元素的标识符*/ <li>apple</li> /*第一列*/ <li>banana</li> <li>orange</li> </ul> </body>
用图像作为列表编号的标记符：
ul { list-style-image: url('sqpurple.gif'); }
css列表属性：
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中，顺序：list-style-type,list-style-position,list-style-image |
| list-style-image | 将图象设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
5 table
<style> table,th,td { border:1px solid black; //不加“silid black”会不显示边框 } </style> </head> <body> <table> <tr> <th>Firstname</th> //顺便说一句，th是table head，tr表示横排，td表示单元格 <th>Lastname</th> </tr> <tr> <td>Peter jdalhddbs hdkddbf</td> //请注意，上表有双边框，因为th和td都有边框 <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> </body>
如果想设置单边框，请这样设置：
table { border-collapse:collapse; } table,th, td { border: 1px solid black; }
设置表格宽度高度：
table //整个表格的宽度都是100% { width:100%; } th //整个表格的表头高度都是50px { height:50px; }
设置表格的文字对其方式：
td { text-align:right; //左对齐右对齐 }
th
{
vertical-align:top; //顶端对其，底端对齐（bottom）
}
设置边框内部的大小：
td { padding:15px; } padding 属性设置元素的内边距。 padding 属性定义元素边框与元素内容之间的空间。 该属性可采取 4 个值： 如果规定一个值，比如 div {padding: 50px} - 所有四个边的 padding 都是 50 px。 如果规定两个值，比如 div {padding: 50px 10px} - 上下内边距是 50 px，左右内边距是 10 px。 如果规定三个值，比如 div {padding: 50px 10px 20px} - 上内边距是 50 px，左右内边距是 10 px，下内边距是 20 px。 如果规定四个值，比如 div {padding: 50px 10px 20px 30px} - 上内边距是 50 px，右内边距是 10 px，下内边距是 20 px，左内边距是 30 px。
设置表格的颜色：
table, td, th { border:1px solid green; //边框的颜色 } th { background-color:green; //表头的背景颜色是绿色 color:white; //表头的字体颜色是白色 }
