前端基础总结（2）——简单的CSS样式

1.CSS 背景

（1）background-color(背景色)

 background-color：yellow;        

 // 颜色表示方法也可以用#00ff00，或者rgb(255,0,255)，自行补充学习

颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）

（2）background-image(背景图片)

 background-image:url('/i/eg_bg_03.gif');

 // url后面的括号里面填写图片路径

（3）background-repeat（背景图片重复）

           如果需要对背景图片进行平铺，设置background-repeat属性

background-repeat: repeat-y;          //垂直方向平铺

 repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺

2.CSS文本

       通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等等

（1） text-indent 缩进文本

p {text-indent: 5px;}         //使所有段落的首行缩进5px

   text-indent 可以使用所有长度单位，包括百分比值。

   可以对所有块级元素应用 text-indent，但无法将该属性应用于行内元素

（2）text-align水平对齐

h1 {text-align:center}     //水平居中对齐

   取值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中，值 justify 可以使文本的两端都对齐。

（3）word-spacing字间隔

.spread {word-spacing: 30px;}     //类名为spread的元素内字间距30px

  word-spacing 属性接受一个正长度值或负长度值，默认值 normal 与设置值为 0 是一样的。

（4）text-transform字符转换

h1 {text-transform: uppercase}    //将h1标签内的字符全部转换为大写

  默认值 none 对文本不做任何改动，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后capitalize 只对每个单词  的首字母大写。

（5）text-decoration文本装饰

a {text-decoration: none;}     //a标签默认有下划线，设置none去掉下划线

  underline 会对元素加下划线，overline 会在文本的顶端画一个上划线，值 line-through 则在文本中间画一个贯穿线，等价于 s标签的效果，blink 会让文本闪烁。

// 比较常用的是underline和none

3.CSS字体

（1）font-family字体

h1 {font-family: Georgia;}         //为所有 h1 元素设置了 Georgia 字体

（2）font-weight字体加粗

p{font-weight:bold;}         //p元素内字体加粗

  bold可以将文本设置为粗体，也可以用数字100 ~ 900 ，100 对应最细字体，900 对应最粗字体。数字 400 等价于 normal，而 700 等价于 bold。

（3）font-size字体大小

p {font-size:14px;}      //设置p元素内字体大小为14px

浏览器中普通文本的默认大小是 16 像素 (16px=1em)

//在设置字体大小时，em 的值会相对于父元素的字体大小改变。

4.CSS链接

 链接的四种状态：link，visited，hover，active

a:link {color:#FF0000;}		/* 未被访问的链接设置样式 */
a:visited {color:#00FF00;}	/* 已被访问的链接设置样式 */
a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上设置样式 */
a:active {color:#0000FF;}	/* 正在被点击的链接设置样式 */

当为链接的不同状态设置样式时，请按照以下次序规则：

• a:hover 必须位于 a:link 和 a:visited 之后
• a:active 必须位于 a:hover 之后

5.CSS 列表

• 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
• 有序列表 - 列表项的标记有数字或字母

(1)list-style-type指定列表项标记的类型

常见属性值:

         none（不使用项目符号）、disc（实心圆）、circle（空心圆）、square（实心方块）、decimal（阿拉伯数字） 、lower-alpha（小写英文字母） 、upper-alpha（大写英文字母） 、lower-roman（小写罗马数字 ）、upper-roman（大写罗马数字）

ps:红色部分是最常用的，一定要记住，其他的记不住知道就可以，用的时候百度就行了

(2)list-style-image指定列表项标记的图像

{
list-style-image: url('sqpurple.gif');
}

(3)list-style-position 可以确定标志出现在列表项内容之外还是内容内部

我们通常使用合并样式：

li {list-style : url(example.gif) square inside}

list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

6.CSS 表格

(1)表格边框

table, th, td
  {
  border: 1px solid blue;
  }

上述写法中的表格具有双线条边框，因为 table、th 以及 td 元素都有独立的边框。

如果需要把表格显示为单线条边框，请使用 border-collapse 属性

table{
      border-collapse:collapse;
  }

border-collapse 属性设置是否将表格边框折叠为单一边框

其他样式：

         通过 width 和 height 属性定义表格的宽度和高度。

         text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中。

         vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐。

         设置 padding 属性来控制表格中内容与边框的距离。