CSS 基本样式
1.CSS 背景：
css 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
| 属性 | 描述 |
|---|---|
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 |
| background-color | 设置元素的背景颜色 |
| background-image | 把图片设置为背景 |
| background-position | 设置背景图片的起始位置 |
| background-repeat | 设置背景图片是否及如何重复 |
body{
background-image: url("python.png");
background-repeat: no-repeat;
}
body{
background-image: url("python.png");
background-repeat: no-repeat;
background-position:center top;
}
2.css3 背景
| background-size | 规定背景图片的尺寸 |
| background-origin | 规定背景图片的定位区域 |
| background-clip | 规定背景的绘制区域 |
body{
background-image: url("python.png");
background-repeat: no-repeat;
background-size：100px 100px;
}
css 样式-文本
CSS 文本属性可定义文本的外观。 通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
| 属性 | 描述 |
|---|---|
| color | 文本颜色 |
| direction | 文本方向 |
| line-height | 行高 |
| letter-spacing | 字符间距 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-transform | 元素中的字母 |
| unicode-bidi | 设置文本方向 |
| white-space | 元素中空白的处理方式 |
| word-spacing |
字间距 |
举例
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>查看颜色</p> <h1>标题查看颜色</h1> </body> </html>
style.css文件
body{
color: aqua;
}
CSS 链接
CSS 链接的四种状态：
a:link --普通的、未被访问的链接 a:visited --用户已访问的链接 a:hover --鼠标指针位于链接的上方 a:active --链接被点击的时刻
举例看一下当鼠标移到；链接附近时的反应
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css test</title> <script src="app.js"></script> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body > <a href="http://www.shiyanlou.com">shiyanlou</a> </body> </html>
test.css
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
2CSS 设置链接背景颜色
修改对应的属性 background-color
根据上面的链接 ，可以是这样的
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
3 修改链接下划线
link 属性中加入 text-decoration 属性
CSS 列表
CSS 列表允许防止、改变列表标志，或者将图片作为列表项标志。
1 列表类型
而 list-style-type 这个属性我们就可以用来控制标记类型
2 列表项图片
用 list-style-image 属性
ul.img1{list-style-image:url("4.ico")}
ul.img2{list-style-image: url("11.ico")}
<ul class="img1"> <li>shiyanlou</li> <li>shiyanlou</li> <li>shiyanlou</li> <li>shiyanlou</li> </ul> <ul class="img2"> <li>shiyanlou</li> <li>shiyanlou</li> <li>shiyanlou</li> <li>shiyanlou</li> </ul>
3 简写列表样式
li {list-style : url(example.gif) square}
CSS 表格
在表格的学习中我们主要了解以下属性：
border-collapse ---设置是否把表格边框合并为单一的边框。
border-spacing ---设置分隔单元格边框的距离。
caption-side --- 设置表格标题的位置。
empty-cells ---设置是否显示表格中的空单元格。
table-layout ---设置显示单元、行和列的算法。
CSS 轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。涉及到的属性有：
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。
<p id="p1">shiyanlou is my home</p> <p id="p2">shiyanlou is my home</p>
#p1{
outline-color: #FF704D;
outline-style: groove;
outline-width: 10px;
}
#p2{
outline-style: dotted;
outline-color: green;
outline-width: 5px;
}
