一.css的样式----背景
1.背景颜色
body{
background-color: gray;
}
p{
width: 70px;
padding: 10px;
background-color: aqua;
}
2.背景图片
body{
background-image: url("bg.jpg");
/* 第一个是图片显示的位置,第二个是从图片的哪个位置开始显示 */
/*background-position: right top;*/
/*background-position: 10% 30%;*/
/* 第一个是距x轴的距离,第二个是距y轴的距离 */
background-position: 10px 100px;
/* 默认允许重复 */
background-repeat: no-repeat;
/* 背景图片是否随着页面滚动,默认随着 */
background-attachment: fixed;//不随着
}
p{
width: 70px;
padding: 10px;
background-image: url("itembg.jpg");
}
3.css3的样式
(1)规定图片的大小
backgroud-size:100px 100px;
(2)规定背景图片的定位区域-->相当于从哪儿开始(只限制左和上)
p{ width: 70px;
border: 10px dotted black;
padding: 30px; background-image: url("bg.jpg");
此属性不能在“backgroud-attachment:fixed”时使用
background-origin: content-box;//border-box/padding-box
background-repeat: no-repeat;}
(3)规定背景的绘制区域(上下左右都限制)
backgroud-clip:content-box;// border-box/padding-box
二.css样式---文本
1.css提供的:可以改变文本颜色,文字对齐方向,首行缩进(单位用em)等等。
2.css3提供的:
(1)text-shadow:距左5px 距上5px 清晰度1px(值越大越不清晰) 颜色#ffffff
(2)word-wrap:规定文本的换行规则
三.css样式---字体
1.引用系统提供的:font-family:fantasy;
2.引用自己下载的:
@font-face{
font-family: myFirstFont;
src: url('字体名称.ttf')
,url('字体名称.eot'); /* IE9只支持.eot格式的字体 */
}
四.css样式---链接
1.链接的四种状态
a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
eg:css中:a:link{color:#ff0000;}...
2.常见的链接方式
text-decration:多用于去除下滑线的作用,写到link中即可,这样所有的情况都不会有下划线了
3.设置背景颜色
backgroud-color
五.css样式---列表
1.list-style-type:提供了列表项前面的标识符
2.list-style-image:可以自定义标识符,显示某个图片 eg.list-style-image:url("图片名字.jpg");
六.css样式---表格
eg.
css:
#tb,th,tr,td{
/* 边框的粗细和颜色 */
border: 1px solid black;
/* 文字居中 */
text-align: center;
/* 背景颜色 */
background-color: burlywood;
}
#tb{
/* 折叠边框 */
border-collapse: collapse;
/* 宽高 */
width: 300px;
/*height: 300px;*/
/* 内边距 */
padding: 10px;
}
#tb tr.alt td{
background-color: cornflowerblue;
}
#tb th{
background-color: darkgray;
/* 字的颜色 */
color: aqua;
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css样式---表格</title>
<link rel="stylesheet" href="table.css" type="text/css">
</head>
<body>
<table id="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr class="alt">
<td>李四</td>
<td>21</td>
<td>女</td>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr class="alt">
<td>李四</td>
<td>21</td>
<td>女</td>
</tr>
</table>
</body>
</html>
七.css样式---轮廓
1.轮廓主要是突出元素的作用
outline:设置轮廓属性,可包含多个属性
outline-color:设置轮廓的颜色
outline-style:设置轮廓的样式
outline-width:设置轮廓的宽度