目录
1.css样式的基本语法
选择器{属性:属性值;
}
2.常见样式
2.1控制字体
1.设置颜色------------color:#000000;(也可以用英语单词)
2.设置字号------------font-size:12px;(像素)
3.设置字体 ------------ font-family:"宋体";(基本上支持word文档中的字体)
4.设置行高 ------------ line-height:150% 1.5em;
5.设置字体的粗细 ------- font-weight:normal;(正常,默认值) blod;(粗体)
<style type="text/css">
#one
{
font-size: 12px;
color: #0000ff;
font-family: "宋体";
line-height: 300%;
font-weight: bold;
}
</style>
2.2css样式特点
1.继承性
2.传递性
2.3控制文本
1.设置文本的缩进
------text-indent
:
2em ;(
可以取负值
)
2.文本对齐方式
------ text-align : left center right;
3.对象中的空白处理
-------white-space:normal pre nowrap;
4.文本大小写的控制
-------text-transform:none; (
按照原文本大小写显示
)capitalize(
每个单词首字母
大写
)uppercase(
将小写转换大写
)lowercase(
将大写转换为小写
)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css">
*{margin: 0; padding: 0; }
a{color: white; font-size: 18px; font-weight: bolder; text-decoration: none; }
ul{list-style: none; }
.nav{ width: 900px; height: 65px;
/*border: 1px solid black;
*/ background-image: url(bg.jpg);
background-repeat: repeat-x; }
.nav ul{ width: 900px;
height: 65px; text-align: center; }
.nav>ul>li{ width: 100px; height: 65px;
float: left;
line-height: 64px;
}
.nav>ul>li:hover{ background-color: red; cursor: pointer; }
</style>
</head>