选择器与样式的设置暂时全部写在<style></style>标签中;/**/表示注释
1)CSS的计量单位
在CSS中表示宽度,距离时最常用的计量单位：1)px(像素)2)30%(百分比)3)em相对单位)
2)常用选择器
2.1标签(元素)选择器;例如body,input,ul,img,a等等
2.2类选择器:为指定元素添加一个class属性,此属性值为样式的名称,如果一个元素有多个class,其名称之间加空格;在style标签中类名前面加点"."
2.3id选择器:为指定元素添加一个id属性,此属性值为样式的名称,在style标签中此名称前面加点"#"一般用于Javascript中选择指定元素进行操作
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="1.css" rel="stylesheet" />
<title>层叠样式表</title>
<style type="text/css">
/*1 标签选择器*/
input {
/*边框宽度,类型(实线,虚线等),颜色*/
border: 1px solid red;
/*文本框的宽高*/
width: 200px;
height: 50px;
/*文本框背景颜色*/
background-color: burlywood;
/*文本框内容的颜色*/
color: rgb(44, 11, 226);
/*文字大小*/
font-size: 20px;
/*文字类型*/
font-family:Arial;
/*文字居中显示*/
text-align:center;
}
li{ /*先统一为li设置一个样式,下面的类选择器中为具体li单独设置样式*/
border: 1px solid red;
width: 150px;height: 30px;
padding:10px; /*li之间的距离*/
margin: 10px; /*文字到li边框的距离*/
}
/*2 类选择器*/
.c1{ /*名称暂时随便起的,每个公司都有自己具体的命名规范*/
border: 1px solid black;
font-size: 25px; /*文字大小*/
color: chartreuse; /*文字颜色*/
}
.c2{
border: 1px solid green;
font-size: 20px;
text-align: center; /*文字按照li设置的宽度居中显示*/
color:chocolate;
}
#id1{
/*将li前面的符号消除*/
list-style:none;
}
</style>
</head>
<body>
<ul>
<li class="c1">公司首页</li>
<li class="c2">公司简介</li>
<li id="id1">产品展示</li>
<li>人才招聘</li>
<li>联系我们</li>
</ul>
用户名:<input type="text" value=""></input>
</body>
</html>CSS其他的选择器以后遇到再说,样式的有关属性及其值太多不再一一细说,以后遇到时通过例题再说