CSS基本样式讲解

• CSS背景
• CSS 文本
• CSS 字体
• CSS 链接
• CSS 列表
• CSS 表格
• CSS 轮廓

背景

背景.png

background-image: url("white_chocolate_donut.jpg");
background-repeat: no-repeat; //默认重复
background-size: 100px 100px;
background-attachment: fixed;

background-position 其实是两个属性，第一个属性是图片的位置，第二个是图片自身从哪里开始显示

文本

CSS文本属性可定义文本外观
通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进

文本.png

text-indent: -2em; //缩进两个字母
padding-left: 2em;//左边距为两个字母
text-transform: capitalize;//首字母大写
text-transform: lowercase;//全部小写
text-transform: uppercase; 全部大写

text-shadow: 10px 10px 0px #FF0000;/*距左  距上 清晰度 背景颜色*/ 投影
text-wrap: normal;//折行 配合宽度
width: 200px;

字体

字体.png

zti-code.png

链接

CSS链接的四种状态

• a:link 普通的 、未被访问的链接
• a:visited 用户已经访问的链接
• a:hover 鼠标指针位于链接的上方
• a:active 链接被点击的时刻

常见的链接样式：
text-decoration 属性大多用于去掉链接中的下划线

下划线.png

列表

CSS列表.png

列表项.png

表格

表格.png

表格-code.png

表格- 效果图.png

轮廓

轮廓.png

表格.png

轮廓imag.png